An easy way to upload an image using JS

• This document explains how to upload an image and display it, it also displays the uploaded image in a model when the user clicks on it.
• This going to be approached by using the FileReader API.
• FileReader API is an object lets web applications asynchronously read the contents of files stored on the user’s computer, using File objects to specify the file to read.

1.Create a template

First, we will create an HTML file named ImageUpload.html with the following code :

<div class="uploader">

<span class="btn btn-default btn-file center-block" onclick="$('#filePhoto').click()">

Upload an Image … <input type="file" name="userprofile_picture" id="filePhoto" />

</span>

<br>

<img id="myImg" src="" />

</div>

The above code does the following :

• <input type=”file” /> will accept a file from the user.
• onClick event is used to trigger the handleImage function in the javascript file when an element is clicked on.
• Type of input is set to file.
• #filePhoto is a reference of input on which we can access uploaded files.
• <img> element will display the uploaded image.

2. Create a JS file

• Next, we will create a javascript file called ImageUpload.js with the following code:

var imageLoader = document.getElementById('filePhoto');

imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {

var filetype = imageLoader.files[0].type;

var reader = new FileReader();

reader.onload = function (event) {

if(filetype.indexOf("image") > -1){

$('.uploader img').attr('src',event.target.result);

}else if(filetype.indexOf("video") > -1){

$('.uploader video')[0].src =reader.result;

}

}

reader.readAsDataURL(e.target.files[0]);

}

The above code does the following things :

• handleImage is getting the input file we sent from the fileLoader
• Next, we check the type of the uploaded file if it’s image and video and save the file type in fileType variable.
• If the type of the file is an image we will set the src element in the HTML file to the image to display it.
• If the type of the file is a video we will set the src element in the HTML file to the video to display it.
• By calling readAsDataURL, we can get a base64 representation of an image or a video in the callback function of the addEventListener we subscribed to before.

3. Create an Image Modal

Last step we will create a modal (dialog box) that is hidden by default. We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on.

In ImageUpload.html we will implement the following :

<div id="myModal" class="modal">

<span class="close">&times;</span>

<img class="modal-content" id="img01">

<div id="caption"></div>

</div>

In ImageUpload.js we will implement the following :

var modal = document.getElementById('myModal');

var img = document.getElementById('myImg');

var modalImg = document.getElementById("img01");

var captionText = document.getElementById("caption");

img.onclick = function(){

modal.style.display = "block";

modalImg.src = this.src;

captionText.innerHTML = this.alt;

}

var span = document.getElementsByClassName("close")[0];

span.onclick = function() {

modal.style.display = "none";

}

In the above code , first we will get the model then we will Get the image and insert it inside the modal also we will use its “alt” text as a caption then we will Get the <span> element that closes the modal so When the user clicks on <span> (x) the modal will be closed

Demo :

This is a demo of the previously explained code.