How Can I Allow a User to Upload an Image in Js

Prototype upload functionality using plain client-side JS and NodeJS

Hi at that place, how are you doing.

This post can exist considered as a written version of my YouTube mini-series on image upload end-to-stop functionality.

All the code shown here is available in this Github repo.

Intention:

The intention of this post and the corresponding YouTube playlist on paradigm upload functionality is this:

Why is this useful:

There are non many skilful tutorials on how to upload an image in a bully way. I thought it would be great to accept a demo that includes this.

What are some of the use-cases:

Profile moving-picture show update.
Image can be dragged and dropped into the placeholder and information technology shows a preview.
Some custom validations to restrict users from uploading bigger size images
Restrict users from uploading unwanted file-types.
Showing error bulletin and success message.
Using Ajax to do all the heavy-lifting and avoid folio reload for uploading the epitome.
Take a simple dorsum-finish using limited-js to simulate a real world upload scenario.
Clear the selected file before upload, no reload needed.

Technologies used:

In the front:

HTML5 for the markup
JavaScript (ES5) for image related functionality
jQuery just for the ajax functionality, you may utilize the obviously old XHR or the contempo ES6's fetch as well. Good thing with a simple arroyo is that it is very easy to integrate into any framework.
Bootstrap four for our UI styling. Not mandatory, y'all may use your own styles as well.

In the back cease:

ExpressJS for the routes handling.
NodeJS for saving the file and hosting the server.
Bower for the forepart end dependencies like bootstrap and jQuery.
Nodemon for continuous watching of file changes and auto-restart of node server.

How to install:

You lot should have NodeJS and Git installed in your machine. You can manage without Git, merely I highly recommend you use it, so you can become exposure on that.

Practice a git clone:

          git clone https://github.com/ChaituKNag/image-upload-demo.git

Install:

Go to that folder where yous did the git clone.

          npm install

Install front-end dependencies:

Equally we installed bower as an npm dependency, we can employ the below function to install the bower front-end dependencies.

          bower install

Run the app:

          npm start

That is all required to get up and running.

UI looks like this:

Open http://localhost:3000.

Forepart-end UI:

Lets talk about the front end UI.

Markup:

The index.html file has the normal html5 boilerplate construction. The Bootstrap 4 related files such as bootstrap.min.css, bootstrap.bundle.min.js (which comes along with PopperJS included) and jquery.min.js. These are required for our fancy UI to use the Bootstrap 4 magic. Since we are using jQuery for our Ajax functionality, information technology is good that we included this over here.

At that place is a form which has a hidden input blazon of file. Its label surrounds information technology similar this:

Discover the characterization surrounding the input

The reason for wrapping the input within the label and hiding information technology is this:

We want to stylize the label to look like a circular section where user can drop the epitome.
Nosotros as well desire the same circular section to be clicked upon and the native file explorer window should pop-up. The characterization'due south for attribute takes care of this.
We need to hide the normal file input field, because it looks ugly for our purposes and information technology looks different in each browser, then for consistency sake, we should hide it.

The label has the for attribute pointing to the input which allows us to action upon the input field by clicking on the characterization (which is the case for all types of input fields). So, when we click on the circular department, nosotros are actually clicking on the label and that in turn invokes the activity upon the hidden input field.

Detect that at that place is this attribute accept="image/png, image/jpeg" that makes sure that the user tin can only upload the images of type JPEG or PNG. Besides, there is no attribute chosen multiple and so the user can only upload i paradigm file.

There are empty paragraphs to show fault and success messages. In that location is an Upload push and a articulate link to clear the selected image.

Custom styling:

Though we are using bootstrap framework, they can just do so much help and its up to united states of america to customize our app to look the style we desire.

Even a superhero needs a haircut.

I'g using flex for centering the form. And the image container (label) is having the bulk of the styling.

The error and success letters:

Why is green ever success and carmine always error

To bear witness the prototype preview, we use an prototype tag inside the circular label. Just we demand to make certain the image centers in that circle and the overflow should be hidden (taken care in the label related way).

Notice, we are using the traditional style of centering things using left and transform translateX stuff there.

Nosotros are also giving a special form called .dragging that gets added to the circular department when the image is existence dragged onto information technology. Only extra border width and depression opacity to the independent text.

That is it nigh the UI. The only place where we are using Bootstrap is when nosotros mode the button and to utilise a container (with a fixed width). And of grade the fonts that come with Bootstrap look awesome equally always.

Forepart-end JavaScript:

Ooohh yes, JS…

Recollect, there are no giant libraries to back u.s.a. up with the heavy lifting. Its just plain JavaScript.

We simply start with creating variables to all the sections:

The parallel thoughts:

There is a lot going on here.

We have to make sure nosotros:

allow user to drag and drop into the circular section
permit user to click on the circular department and select the prototype
let user to articulate the selected paradigm
allow user to submit the selected image
have to handle drag and drop events to check for file type and size
have to alter style of the circular section when the image is being dragged

The process of dragging:

This is plain the about important and intuitive role of this app. Simply it is every bit catchy to make certain you don't exercise errors while treatment the dragging scenario.

First, you have to prevent the default thing that happens when you lot drag a file onto a browser which is to load the file as a static file in the window.

For that yous have to add a special listener that cancels out such static loading equally soon as that event occurs. And this has to exist listening to all the drag and driblet related events.

Then comes the hover effect that comes when the user is dragging the file onto the circular section, we accept to add the .dragging class. We practise that like this:

The dragenter and dragover events happen when the file is beingness dragged over to the round section. The dragleave and dragend events happen when the file is beingness pulled away from the section. The drop event obviously happens when the file is allow go on the section.

And then finally when the user drops the file, we need to brand sure the file goes through a size-check and file-type cheque.

There is another listener to drop effect (remember? we can assign multiple listeners to DOM events). The checkFileProperties part takes intendance of the file-size and file-type checks. If there is an issue, it will gracefully complain using the #errorMessage paragraph and end the drib event handler. As well, we are restricting the dragged files to exist merely one.

Nosotros are restricting the file size to exist less than or equal to 500KB and of type JPEG or PNG. The file has type and size properties that requite us this info.

Selecting the file manually:

Only what if the user manually clicks on the circular department and manually selects the prototype instead of dragging. For that we will go a alter event existence triggered on the subconscious input field. We need to handle that as well like this:

The event.target.files belongings gives the listing of files the user has selected.

The same functionality for both dragging and selecting manually

Image preview within circular department:

The handleUploadedFile function takes care of previewing the uploaded image. This is done using a FileReader constructor which is coming from JavaScript's DOM api.

This FileReader reads the file and triggers a load effect when it is done reading. We are setting the paradigm source to be the consequence.target.consequence.

This takes care of previewing the image.

Submitting the image to the back-end:

When user clicks on the button, the uploaded prototype gets sent to the backed in a base64 string format.

This is of import to notation, because in that location are many ways that we tin can transport files to the back-terminate but for images, I think base64 formatted string is a quick and easy style.

The Ajax call too sends the name of the file which we are getting from the handleUploadedFile method. The base64 string is sent in the belongings named "theFile".

Once the upload is successful, we show the success message.

Clearing:

If the selected image has to be cleared for some reason, user tin can click on the Clear link beneath the push button.

The function looks like this:

We remove the manually added image and then that the groundwork text shows up once again.

Back-end JavaScript

The history of backend can be hands marked equally "Before NodeJS" and "After NodeJS". Of course there is however a lot of competition out at that place from the likes of Python, Java and PHP but in its relatively brusk life-time, NodeJS has touched every average developer'southward life in some style or the other. (Trying non to get emotional here :P).

Nosotros apply NodeJS for this example too. Nosotros use it for our packaging and server support. Packaging allows us to use many cute applications built on NodeJS such every bit bower, expressJs and the likes.

What exercise we apply:

NodeJS for sure.
ExpressJS for routing and body-parser to parse incoming Ajax requests
Bower for front end-end dependency direction
Nodemon — to watch our files and auto-restart Node.

What is routing:

When nosotros talk about the dorsum-end, there is ever a good chance that we are trying to build a micro-service or some sort of RESTful API that the front-end is going to utilize, right!

ExpressJS and its routing features allow us to build seamless API with its middleware functions. We can target diverse request types and RESTful paths. Also we tin can target route-params (though we are non covering them here).

Building the dorsum-end:

There is only i unmarried file that caters all of our needs hither, since this is a very simple demo as far as back-end is concerned.

In that file, we

Build our API route to handle the upload scenario.
Bring up the server to host the front-end as well as the back-end.
Handle the uploaded file by saving it in the "images" binder.

API route for uplading:

We import the express module and build our app. Then nosotros bring up the server using app.heed function.

The app listens on port 3000 or the PORT variable on the environment.

Then we create the required routing using the app.post method of the ExpressJS API.

A lot is going on here, lets only take a step back and analize.

The API URL is specified equally the start parameter to the .post method. It is /upload.
The second argument is the office that gets called back when this particular road is targeted through a postal service call.
When the role gets executed, the kickoff two arguments are request object (req) and response object (res) respectively.
The request object as usual contains the body object that contains all the information that is being sent from the front-end.
In that body object, nosotros can find the theFile property that contains our base64 encoded string of prototype data.
We check for that property's existence and get both the encoded string and the championship of the image to save it inside the file that we are going to save it every bit.
Then we writ the file to the "images" binder, using the NodeJS'south born fs.writeFileSync method.
Notice that in this method we are passing the encoding also in the options object. This is to ensure that the file is beingness written in the proper format.
At final, we utilize the response object to send a uncomplicated "UPLOADED" cord to the front end-end to notify that the upload worked fine.

Static loading:

In order to serve the front-stop files, we are putting them inside a folder chosen public. To brand the NodeJS app server serve those files equally they are, we utilise the express.static method similar below.

We are likewise serving the bower_components in the /libs road.

Limiting file-size and encoding incoming requests:

Nosotros are using torso-parser in order to exercise some middleware changes.

We tin can call the imported bodyParser function with an options object and the master option hither is limit which we are setting to 1mb.
Also, we are converting all incoming request data to JSON format using bodyParser.json method.
Nosotros are also using the bodyParser.urlencoded method to read the encoded data that sometimes comes through.

The conclusion

I hope you liked this postal service and gained some knowledge out of it. Please practise give me some feedback by posting your comments here.

Also give me some claps :)

I have created a YouTube serial demonstrating this illustrated example demo.

Please subscribe to my YouTube channel (Naga Konada Devtips) and follow me here too.

Come across yous soon with more than tutorials and tips.

garciadembeelith.blogspot.com

Source: https://medium.com/@nagachaitanyakonada/image-upload-functionality-cd497a5bba54