DEV Community: Ajulibe

UPLOADING FILES FROM REACT NATIVE TO AN S3 PRESIGNED URL.

Ajulibe — Thu, 29 Jul 2021 18:57:15 +0000

Been off here for a while because I have mostly been building ..scratch that..its been more of fighting with really stubborn bugs🤦🏽‍♂️. I am not done yet but I have decided to take sometime out to share my learnings and bug fixes through a series of articles. I honestly didn't expect uploading documents to an aws pre-signed url to be as stressful as it was for me. Luckily, I got that solved and here is what I did(errmm yeah.. i checked stack overflow and it didn't work for me...for those of you already thinking that 🙄).

This article like the rest of my previous articles, is to serve as a guide to anyone who is just like me, having tried the common methods, you may have found a solution. Now, I must point out that I am a noob as regards what the backend code/architecture looks like, as I was the frontend guy on this.

I will be working with expo and typescript but you can also use this with react-native and javascript too.

1) INSTALL THE NEEDED DEPENDENCIES

Firstly, the following packages need to be installed

expo install expo-document-picker
npm i expo-file-system
npm i buffer

2) PICKING OUR FILE

Next we will create our file picker function, which when called will open up a document picker and try to get the image data. If that is successful, it will save it as a state value.

import * as DocumentPicker from "expo-document-picker";

interface FileInterface {
  type: "success";
  name: string;
  size: number;
  uri: string;
  lastModified?: number | undefined;
  file?: File | undefined;
  output?: FileList | null | undefined;
}

//--> called when the file is picked
  const pickFile = async () => {
    try {
    //--> Pick file(PDF/IMG/OTHER)
    const file = await DocumentPicker.getDocumentAsync({
      type: "*/*",
      copyToCacheDirectory: true,
    });
      setFile(pickFile);
      //this is stored as a state value and this value will 
      //then be set in a useEffect dependency array to trigger 
      //the function below when the file state is updated.

     }
    catch(error){
      //toast error
    }
  };

3) CONVERTING TO A BLOB

The next step is generating a blob file using the fetch api.

According to MDN, The Blob object represents a blob, which is a file-like object of immutable, raw data; they can be read as text or binary data, or converted into a ReadableStream so its methods can be used for processing the data.
Blobs can represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system. 😴💤🥱

Okay back to Code🤓

const getBlob = async (fileUri: string) => {
 try {
  const resp = await fetch(fileUri);
  const imageBody = await resp.blob();
  return imageBody;
 } catch (err){
  //toast err
};

4)GETTING YOUR SIGNED URL

const signedUrl = await axiosClient.post(`${ENV.GENERATED_SIGNED_URL}`, payload);
 if (signedUrl == null) {
   //Toast error
   return;
  } else {
const { url, uploadID, fileName } = signedUrl.data.data;

5)CONVERTING BLOB URI DATA TO BASE 64

//Converting the uri obtained from the blob object to base64
  const base64 = await FileSystem.readAsStringAsync(uri, {
  encoding: FileSystem.EncodingType.Base64});

6)CONVERTING BASE 64 DATA TO A BUFFER

//Converting the base64 to a buffer
  const buffer = Buffer.from(base64, "base64");

7) UPLOADING TO S3

The final step is the actual uploading of the buffer data to the pre-signed URL.

  const uploadFile = await axios({
    method: "PUT",
    url: url,
    data: buffer,
    headers: { "Content-Type": fileType ?? "image/jpeg" },
  });

8) PUTTING IT ALL TOGETHER

import {useState, useEffect} from "react";
import axios from "axios";
import * as DocumentPicker from "expo-document-picker";
import axiosClient from "utils/axiosClient";
import * as FileSystem from "expo-file-system";
import {Buffer} from "buffer";

interface FileInterface {
  type: "success";
  name: string;
  size: number;
  uri: string;
  lastModified?: number | undefined;
  file?: File | undefined;
  output?: FileList | null | undefined;
}

interface DummySignedURLPayloadInterface {
  [key: string]: string;
}

const signedURLpayload: DummySignedURLPayloadInterface = {
  name: "mazi_juls",
  twitterhandle: "@ajulibe",
  id: "007"
};

export const useUploadToS3 = () => {
  const [file, setFile] = useState<FileInterface>();
  const [res, setRes] = useState("👀");

  useEffect(() => {
    if (typeof file === "undefined") {
      return;
    } else {
      uploadFileToS3(signedURLpayload, file);
    }
  }, [file]);

  async function getBlob(fileUri: string) {
    const resp = await fetch(fileUri);
    const imageBody = await resp.blob();
    return imageBody;
  }

  //--> called when the file is picked
  const pickFile = async () => {
    //--> Pick file(PDF/IMG/OTHER)
    const file = await DocumentPicker.getDocumentAsync({
      type: "*/*",
      copyToCacheDirectory: true,
    });

    if (file.type !== "success") {
      //--> Toast error
      return null;
    } else {
      setFile(file);
      //this is stored as a state value which is then added to the useEffect dependency array
      //to trigger the uploadFileToS3 function
    }
  };

  const uploadFileToS3 = async (
    signedURLpayload: DummySignedURLPayloadInterface,
    file: FileInterface,
  ) => {
    try {
      //--> Pick file(PDF/IMG/OTHER)
      if (file.type !== "success") {
        //--> Toast error
        return null;
      } else {
        let {uri} = file;
        const fileBody = await getBlob(uri);
        const fileType = fileBody["type"];
        if (fileBody == null) {
          //--> Toast error
          return null;
        } else {
          //--> Get signed URL
          const signedUrl = await axiosClient.post(
            "Upload/Generates3URL",
            signedURLpayload,
          );
          if (signedUrl == null) {
            throw new Error("😩😩");
          } else {
            //--> destructuring out the signed URL from the response
            const {url} = signedUrl.data.data;
            const base64 = await FileSystem.readAsStringAsync(uri, {
              encoding: FileSystem.EncodingType.Base64,
            });
            const buffer = Buffer.from(base64, "base64");
            const uploadFile = await axios({
              method: "PUT",
              url: url,
              data: buffer,
              headers: {"Content-Type": fileType ?? "image/jpeg"},
            });
            if (uploadFile.status === 200) {
              console.log("🥳🥳");
              setRes("🥳🥳");
            } else {
              console.log("😩😩");
              throw new Error("😩😩");
            }
          }
        }
      }
    } catch (error) {
      setRes("😩😩")
      console.log("😩😩");
      //--> toast error
    }
  };

  return {
    res,
    pickFile,
  };
};

//--> This can be used in your component like a hook
import React from "react";
import {View,Text,TouchableOpacity} from "react-native";
import {useUploadToS3} from "./yourHooksFolder";

const MazisFuncCmp: React.FC = () => {
  const {res, pickFile} = useUploadToS3();

  return (
    <View>
      <Text>Hi There...</Text>
      <Text>{res}</Text>
      <TouchableOpacity type="button" onPress={pickFile}>
        <Text>Click me to test 👨🏽‍🏫 </Text>
      </TouchableOpacity>
    </View>
  );
};

export default MazisFuncCmp;

SUMMARY:

After a file has been picked successfully, its value is stored as state which then triggers the useEffect hook to run again. At this point, the value of file is not undefined so the else block is triggered. This calls the uploadFileToS3 function. The uploadFileToS3 function is made up of all the code snippets shown earlier all wrapped as an async operation.✌🏽

Setting up tests for React-Native-Expo-Typescript

Ajulibe — Tue, 09 Feb 2021 08:33:41 +0000

Recently I decided to write tests for my expo react native app written in typescript. Having done this in Reactjs, I didn't expect its native counterpart to be such a pain. I did the usual reading of documentations, checking StackOverflow and there was nothing. I couldn't find any working test or a proper documentation for setting up tests for expo react native apps written in typescript. I must add that I initialised my expo app using a blank template. Using either the tabs or the minimal template automatically sets up test for you (I learnt this much matter).

Luckily after about 2 weeks, I came across an npm package expo-template-typescript-jest [https://www.npmjs.com/package/expo-template-typescript-jest] created by [https://github.com/elgsantos]

It seemed like it was recently put there as an answer to my prayer. I had to take it for a spin. Ah!! yes it worked. Also, seeing that I didn't want to use its template, I had to study the repo and replicate the configurations used in my already existing expo app.

let me walk you through how I added jest and react-test-renderer to my already existing expo app in 4 simple steps.

LIST OF DEPENDENCIES USED
1) React-test-renderer
2) jest
3) jest-expo
4) ts-jest
5) jest-coverage-badges
6) @types/jest
7) @types/react-test-renderer

STEPS:

1) Install all the listed dependencies above best with --save-dev flag to see these in your devDependencies.

2) Add a jest configuration file.

//jest.config.js
module.exports = {
 testEnvironment: "jsdom",
  preset: "jest-expo",
  globals: {
    "ts-jest": {
      tsconfig: {
        jsx: "react",
      },
    },
  },
  transform: {
    "^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js",
    "^.+\\.tsx?$": "ts-jest",
  },
  testMatch: ["**/?(*.)+(spec|test).ts?(x)"],
  collectCoverageFrom: [
    "**/*.{ts,tsx}",
    "!**/coverage/**",
    "!**/node_modules/**",
    "!**/babel.config.js",
    "!**/jest.setup.js",
  ],
  moduleFileExtensions: ["js", "ts", "tsx"],
  transformIgnorePatterns: [
    "node_modules/(?!(jest-)?react-native|react-clone-referenced-element|@react-native-community|expo(nent)?|@expo(nent)?/.*|react-navigation|@react-navigation/.*|@unimodules/.*|sentry-expo|native-base)",
  ],
  coverageReporters: ["json-summary", "text", "lcov"],
})

3) Add "esModuleInterop": true to your tsconfig.json file. Your final configuration file should look like the one below.

//tsconfig.json
  {
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react-native",
    "lib": ["dom", "esnext"],
    "moduleResolution": "node",
    "noEmit": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "strict": true,
    "esModuleInterop": true
  }
}

4) Add scripts for running your tests in different modes in your package.json.

//package.json
"test": "jest",
"test:watch": "npm run test --watch",
"test:ci": "npm run test --coverage",
"test:badges": "npm run test:ci  && jest-coverage-badges --input coverage/coverage-summary.json --output __badges__"

Now we can go ahead to check if this works
I will have two files here: App.tsx and App.test.tsx

1) App.tsx

//App.tsx
import { StatusBar } from "expo-status-bar"
import React from "react"
import { StyleSheet, Text, View, Image } from "react-native"

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={require("./assets/adaptive-icon.png")}
        style={styles.logo}
      />
      <Text>Open up App.tsx to start working on your app!</Text>
      <StatusBar style="auto" />
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
  },
  logo: {
    width: 120,
    height: 120,
    margin: 10,
  },
})

2) App.spec.tsx

//App.spec.tsx
import React from "react"
import renderer from "react-test-renderer"

import App from "./App"

describe("<App />", () => {
  it("has 2 child", () => {
    const tree: any = renderer.create(<App />).toJSON()
    expect(tree?.children?.length).toBe(2)
  })
})

You can go ahead and test with npm run test.

To have a better overview of the code and template used here, you can check out the repo below.

elgsantos / expo-template-typescript-jest

🔥 A React Native Template using Expo, Typescript and Jest

React Native Template Expo Typescript with Jest

A React Native Template using Expo, Typescript and Jest
Explore the docs »
Report Bug · Request Feature

About The Project

This template was developed to facilitate the creation of a new project using Expo, React Native and Jest.

Built With

Getting Started

To get this template up and running follow these simple steps.

Prerequisites

Install Node.js
Expo
```
npm i -g expo-cli
```
Yarn
```
npm install -g yarn
```

Installation

Create a project with this template:

expo init --template expo-template-typescript-jest

(It will prompt you to enter a project name)

Usage

Navigate to the created directory
Start the project:
```
yarn start
```
Then develop your app, creating files .tsx for React Native components and .ts for plain typescript files.

Testing

There are some…

View on GitHub

Aws::S3::Errors:: fix with Travis-CI, Docker and AWS. [JUNE 2020 UPDATE]

Ajulibe — Sat, 13 Jun 2020 11:24:56 +0000

DoCker! DOckER! dOCKer!

In my Last 6 months of consistent coding, I have discovered that with each phase of progress, there has always been an interesting Topic/Concept to look forward to in this journey. Few weeks ago, it was docker for me and ... voila!!! Here we are.

I have been following a docker course on Udemy (Docker and Kubernetes The Complete Guide), taught by Stephen Grider (an awesome teacher) for a while and this article tackles a problem I faced with deployment and how I solved It.

Before going forward, I will like to state that this is NOT an exposition into docker but rather an update to a very detailed article written by a tech brother (William Okafor). It will be focused on step 8 of his article. There is no need to reinvent the wheel here. Please do well to check out his article for an in-depth coverage of the Steps involved in building a CI/CD pipeline with Travis-CI, Docker and AWS.You can find a link to his amazing article below.

https://medium.com/@wilpat456/my-first-go-at-travis-ci-d0e63ccdc4d0

While toggling between my course, Williams' article, documentations and StackOverflow, I discovered that there is a breaking change in the secret_access_key syntax for the .travis-yml file.

FROM WILLIAMS' ARTICLE

Step 8: Back to React —
We need to update our .travis-yml file with the instructions for
deploying our code and then push to github.
Update yours with the following:

In the image above, the breaking change is in the secret_access_key prefixed by FIXME:.

Using the syntax above, I encountered the issue shown below.

EXPLANATION:

The problem here is that you are assigning a plain text value to the secret_access_key. Some months ago, Travis rolled out additional changes to data processing, to prevent the accidental exposure of these secrets.

Previously, this configuration worked because Travis was passing through values whenever the decrpytion failed.

SOLUTION:

Based on this, Our new configuration is:

I hope this article has helped you to make sense of that error and like I earlier pointed out, William did a fantastic job in his article, this is basically an update to a changed synthax. Thanks for reading.

Safely Storing Passwords in mongoDB Using Bcrypt and a mongoose middleware.

Ajulibe — Sat, 30 May 2020 07:01:14 +0000

Hey there.
Maybe you landed here mistakenly or you are interested in figuring out how to safely hash user passwords and store it in your database, you are definitely in the right place. I will try to make this as concise as possible because i know these things can get out of hand real quick.

AIM:

The aim here is to make use of the document middleware from mongoose's library to perform a hashing operation on our password field, before it is stored in our mongoDB database. In mongoose there are 4 middlewares and here, we will be making use of the document "save" middleware.

I am running with the assumption that you have a basic mongoDB/mongoose and express server already setup.

If not, you can check out mdn's basic express setup here
https://developer.mozilla.org/enUS/docs/Learn/Serverside/Express_Nodejs/development_environment

And here for a mongoDb mongoose setup
https://developer.mozilla.org/enUS/docs/Learn/Serverside/Express_Nodejs/mongoose

Okay, Enough with the boring theory lets do some work...

First, we will install bcrypt using npm install bcryptjs

Require it like we do with all our modules
var bcrypt = require('bcryptjs');

In your schema file, just before creating your model add.

Your complete schema file should look like this.

Finally, this is my registration route in my route file.

LOGIC:

What happens here is, whenever this schema is called through its model (by going to the users registration route) , lets say we are registering a user, the middleware scans the request body to see if there is a password in it. If a password is present, it hashes it using the bcrypt algorithm.

Also, whenever the password is modified, maybe during a password change or an update, the middleware performs the same hashing operation. In essence, the middleware serves as a middle man between an incoming request and the action to be performed on the request object.

For a more in-depth understanding of the backdoor operations of either bcrypt or mongoose you can check out their documentation.