If you want to know how to upload files directly to google cloud storage using Reactjs, then you are at right place. In this tutorial, we have covered reactjs file upload directly to google cloud storage using multer, express, nodejs. I have used react-dropzone-component to upload the file from Reactjs. It has a good amount of configuration and features with UI(filepicker.css). Our server is in nodejs with express and I have used multer npm module to get rid of file uploading process directly to google cloud storage. Might be you haven’t heard about Google cloud storage but you definitely heard about AWS S3. Google cloud is as same as Amazons S3 bucket. So we will proceed with google cloud storage file upload using reactjs.
Software stack used for Reactjs file upload to google cloud storage:
1. ReactJs: for frontend development. React tutorial
2. ExpressJs: for API development.
3. Nodejs: for server-side development.
4. @google-cloud/storage SDK: to interact with Google cloud storage.
5. Multer: as middleware to upload the files.￼
6. react-dropzone-component: Reactjs component to upload the files with drag and drop.
Let’s get started with file reactjs file upload component with react-dropzone-component:
First of all, I have started by cloning reactjs seed app from GitHub for a basic react app. After setting up basic app we are ready to go for further. In this example, we have used React-Dropzone-Component for drag and drop file upload functionality. To utilize the features of react-dropzone-component, we need to install it first as below.
After react-dropzone-component getting installed import it to use in our app.
There is some configuration which is provided by the react dropzone component module. This configuration is done as shown below. It includes file types, post url to upload file etc.
react-dropzone-component provides events such as addedfile, success, removefile, uploadprogress etc. This events can be setup as shown below
Now its time to define react-dropzone-component as below:
As a result, our upload file component will look like this:
Import file upload component in app.js file.
That’s it from our frontend using Reactjs. We have design file upload component with the help of DropzoneComponent.
Server-side code to upload the files to google cloud storage using multer.
Let’s move towards server-side functionality using multer, express and nodejs. Below is our server.js file and the code is very much self-explanatory with comments.
Finally, we are at the conclusion that, we have just implemented file upload functionality using reactjs, multer, express and nodejs with the help of awesome react component DropzoneComponent.