Image Uploading: Using React and Node to Get The Images Up
For any developer who envisions building an application, uploading images is a major component they have to take into account. Given that I have been trying my hands with React and Node, I realized that uploading images using a server side technology setup is not as simple as it seems if you are not aware of the right processes and protocols. But we are talking about image uploading here. It is an essential requirement if you are planning to build a feature or a full fledged application. How can you not get the images to get pushed to the server and come up — all flashy and bright — on to your amazing User Interface?
We are here to explore a few possible techniques available for uploading images and let me just give you a fair warning. All the techniques have not been optimized for performance completely. So it is fine to say that incoming tweaks are always welcome. I guess it is.
So without further blabbering, let us begin.
Tech-Stack At Play
Before we start getting into the nitty-gritty of what we are trying to build here. It is essential we talk about the building blocks we would be playing around with.
Let us walk through the technology components and frameworks being utilized in this case.
React: A JavaScript library for designing User Interfaces. It is developed and maintained by Facebook and is a highly popular Single Page Application framework in use today.
Node: An open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. It was first developed by Joyent and has over time evolved into a sustainable and scalable server side development choice for JavaScript-preferred development teams.
Express: It is a minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications. It enables easy API development.
MongoDB: MongoDB is a cross-platform document-oriented database program. It has become a popular means to work with data due to the intuitive nature in which it handles data.
Firebase Storage: Firebase is a service provided by Google and it has its own storage solution which we will use as an image hosting service in this particular instance.
That is all the technology components we would be requiring. It is time to jump into coding. All excited? Let’s start.
Coding The Image Up
We will be exploring three mechanisms to upload an image using React and Node, mainly along with MongoDB, for storing the uploaded images. The three techniques we will be looking at are — uploading image using multer in Node, using firebase storage as an image hosting option and uploading image directly in base64 format.
I have the entire code repository available on my Github. You can refer the code below.
Time to get our hands dirty and when I say dirty I meant dirty through code.
- Uploading Image Using Multer
One of the preferred techniques to upload images is using multer as an option. Multer is basically a Node.js middleware which helps us to handle data in multipart/form-data format and is primarily used for uploading files to the server. In our case, we would be using multer to upload a file from the React side onto a static directory created on the node side and then send a reference of the image uploaded as a document key to be stored in a MongoDB database instance. Sounds pretty simple.
Enough talk. Time to code. So I am assuming we already have React and Node.js with Express setup up with all the required middleware, in order to be able to connect to the database in use. If not, you can check out my repository to get an idea regarding that.
We would start up by setting up multer in our Node.js application and creating an API that enables multer to come into play. After having setup a connection to MongoDB, we go ahead and install multer to the node application.
We will have a model already created using mongoose to store the images being uploaded. It is a simple model which includes an image name and the image reference or image data. This model would be utilized for all the three techniques. The model structure is as follows.
A common route is created for all the APIs concerned with handling the image upload process. For this technique, we have created an API with route /uploadmulter which utilizes the multer middleware and stores the images received from the front-end into a static uploads folder on the server side.
First, we create this uploads folder and create a static path reference to it through the following code added in app.js.
Having created a reference to the uploads folder and installed multer middleware, we go ahead and create our respective API to handle image uploading using multer. The respective code for the API is disclosed below.
In Part 1, we import the related middlewares and libraries to be utilized in creating the concerned API. We create a storage variable where we provide the path to the destination folder being used and also define a filename for the file uploaded. The fileFilter variable defines the file types which are to be accepted by the server. Finally, we create an upload variable which creates an instance of the multer middleware with the storage details, maximum acceptable file size and filter options being set.
In Part 2, we create the route /uploadmulter where we process the incoming multipart data which basically consists of the image file being sent from the front-end. The upload.single() function should be provided with the key-name consisting of the image file in order for it to invoke multer properly. Then the data is sent to the MongoDB database.
The server side code is pretty straight forward. The front-end code for the same is no different. I have added minimal styling to make it look presentable. Let’s skip the basic styling and layout part as I believe there is not much for us to discuss through. Jumping to the functional aspect of how the uploaded file is handled, let’s take a look at the code concerned.
In the front-end, we simply upload the image through an input tag created in the layout. The image is then stored in a local state variable and converted into form data format after which it is sent to the node server, using axios as a http client. Pretty straight forward process. Right?
The visual flow is as follows.
We have seen how we can upload images using multer on the node side. Let’s move onto the next technique at hand.
2. Uploading Image Using Firebase Storage
In the second technique, we would be focusing on uploading images on an image hosting platform which would go ahead to serve as a Content Delivery Network for us to retrieve images at our convenience. In our case, we would be using the free storage module provided by Firebase from Google. The main advantage of this technique is that we can take the storage load off our own server module and hand it to an external system. All we need is the URL obtained from the front-end. Thus, most of the heavy lifting in this case is taken care of by the client side.
On the server side, we could create an API called /uploadbase which would serve as the go to API for both Firebase Storage technique as well as for storing images in Base64 format. The API code is pretty straightforward. We assume the data obtained is in the form of a JSON object containing an image name and a reference to the image in the image data key.
The API is a POST request created making use of Express and captures the data received in the form of a JSON object. After validating the required fields, the object is pushed into the MongoDB database.
The same API would be utilized for the third technique as well which we will cover post this.
Coming to the front-end code, we will glance through it. But before we get into it, there are a few things that have to be taken care of from the Firebase side which includes creating a new project and configuring it accordingly on the React side.
First, you create a new project in the Firebase console and secure the API details for the web which would be something like this in the console.
Next, go to the storage option on the left hand side of the Firebase console and change the published rules to enable unauthenticated storage for now. (Authenticated storage is necessary while working with the production application so you need not get tensed right now.)
After having done that. Go ahead and create a file called firebase-config.js, install firebase on the frontend and create an instance of the credentials so as to refer from there.
The front-end code for image uploading through firebase storage is as follows.
The main function handles the image file uploaded by invoking a reference to the storage object of the firebase module containing the concerned credentials. We use the getDownloadUrl() function to obtain the uploaded URL from the storage module once the image is hosted on the storage cloud. On obtaining the URL, we create a JSON object and send the data to the server.
The visual flow as follows.
Let’s run through the final technique which is the simplest of the three real quick.
3. Uploading Image in Base64 Format
Base64 is basically a group of similar binary-to-text encoding schemes which represent binary data in ASCII string format. In simple terms, the image is basically translated into a string and sent as a key-value pair to the server side.
We utilize the API /uploadbase created in the previous technique for this as well as the data to be processed is in the form of a simple JSON object.
However, on the client side, we will have to handle the way the image file is handled and is translated into a Base64 string. The front-end code is disclosed as follows.
We make use of react-file-base64 npm library for converting the added image directly into Base64 format. A specific react component is created by the library which provides the basic input feature but provides the Base64 format of the concerning file uploaded.
We club the Base64 image along with the image name and shoot it directly to the API /uploadbase which takes care of the rest.
Wrapping Up
We have covered the three major techniques for uploading images using a simple combination of React and Node, along with the relevant middlewares and accessories. Image uploading is an essential aspect of building almost any application and it is widely used and pretty much required in almost every scenario.
I hope this would help you get started or give you an idea as to where to start. Improvements and suggestions are always welcome. Feel free to let me know what you feel.
Till then. Code to make the world a better place.
Peace.
