How to create a custom image uploader with preview

Introduction

Creating a custom image uploader has nearly become a must as the default HTML input type file looks plain.
You will agree that modern web design demands more, and there seems to be no direct way to style it. However, the use of ::file-selector-button CSS pseudo-element can be used but still has its limitations. In this article, I will show you how I created a fully customized image uploader with preview as shown below.

Creating an HTML input type File

Create an HTML input type file with attribute accept = “image/x-png, image/jpeg”

<input type="file"
   id="image-file"
   accept="image/x-png, image/jpeg"
/>

By adding the attribute accepts to the input type file, you specify the type of file you want the input to accept. In our case, we want it to accept image type png and image type jpeg.

Click on the input to open the file explorer. You will see that you can select images with .png extension and images with .jpeg extension only.

Creating an HTML label Tag

Add a label tag and point the label for attribute to the id of the created input file.

<input type="file"
  id="image-file"
  accept="image/x-png, image/jpeg"
 />
 <label for="image-file">Upload image</label>

By adding the for attribute of the label to the id of the input, clicking the label element behaves as if we clicked the input directly.

The outcome of the above is as shown below. We can click the Upload image text and see that it toggles the window file explorer, just as what the input file is doing.

Hiding The Default input

Next is to hide the default input and style the label as you want.
Since we have a label that behaves exactly as our input, the next is to hide the default input. To hide the default input, we need to add a CSS style and set display = none to the input file tag.

<input type="file"
  id="image-file"
  accept="image/x-png, image/jpeg"
  style="display : none"
/>

At this point, you now have a label you can style as you like. To style our label, add an id attribute to the label tag, then add the below CSS to give it a beautiful card-like custom image uploader.

<label id="image-label" for="image-file">Upload image</label>

   body{
      display: flex;
      justify-content: center;
   }
   #image-label{
      position: relative;
      width: 200px;
      height: 200px;
      background: #fff;
      background-position: center;
      background-repeat: no-repeat;
      background-size: contain;
      display:flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0px 1px 7px rgba(105, 110, 232, 0.54);
      border-radius: 10px;
      flex-direction: column;
      gap: 15px;
      user-select: none;
      cursor: pointer;
      color: #207ed1;
      transition: all 1s;
   }
   #image-label:hover{
      color: #18ac1c;
   }

Now that you have a completely customized image uploader, now is time to preview the selected image.

Using Javascript to Get a Selected File From an input Type File

Next is getting the selected image and previewing it for the user
Now what I did is, in my JavaScript file, I listen to the change event on the input file, whereby whenever a change is made, it returns an array of one element which contains the information of the uploaded file(such as file name, file type, etc.).

const input_file = document.getElementById('image-file');
input_file.addEventListener('change', async function(){
   const file = document.querySelector('#image-file').files;
   console.log("file", file)
   })

Using Javascript to Convert File to BASE64 Encoded File.

Now that we can get the file, we need to convert the file to a base64 encoded file for our browser to understand the image

const input_file = document.getElementById('image-file');

const convert_to_base64 = file => new Promise((response) => {
   const file_reader = new FileReader();
   file_reader.readAsDataURL(file);
   file_reader.onload = () => response(file_reader.result);
});

input_file.addEventListener('change', async function(){
   const file = document.querySelector('#image-file').files;
   const my_image = await convert_to_base64(file[0]);
   console.log(my_image, "my_image")
   })

Using Javascript to Style an Element

Now we are done, all we need to do is set the base64 image as the background image of our label.

const input_file = document.getElementById('image-file');
const input_label = document.getElementById('image-label')

const convert_to_base64 = file => new Promise((response) => {
   const file_reader = new FileReader();
   file_reader.readAsDataURL(file);
   file_reader.onload = () => response(file_reader.result);
});

input_file.addEventListener('change', async function(){
   const file = document.querySelector('#image-file').files;
   const my_image = await convert_to_base64(file[0]);
   input_label.style.backgroundImage =`url(${my_image})`
   })

And that is all. You have a super cool custom image uploader with an image preview in a few simple steps.

Conclusion

As a developer, you will agree that modern web design demands more than just a plain image uploader. The above articles show you how to create a custom image uploader with image preview in four easy steps with your HTML, CSS, and JavaScript

Thanks for Reading 🌟🎉

I'd love to connect with you on Twitter

Happy coding...