Preview an Image Before Upload with JavaScript

Preview an Image Before Upload JavaScript

Many times you need to preview the image before uploading it. This type of JavaScript image preview design is mainly used for various image uploading or editing websites.

You can learn how to create this Preview an Image Before Upload project from this article. The input function of HTML and basic javascript is used to make it.

First I selected the file using HTML input. Then with the help of JavaScript, it will be arranged on the webpage. We find many types of inputs. One of these types is 'file'. This type = "file" will help to select a file. If you want to create any kind of custom file upload button then you have to use this type = "file".

Preview an Image Before Upload

I have shared many such javascript image preview tutorials on the internet. However, most of them are not designed for beginners. So here is a very simple way to create a Javascript Preview an Image Before Upload design.


See the Pen Untitled by Foolish Developer (@fghty) on CodePen.


There is a button. When you click on that button, your device's file will open. Then you can select the image of your choice. The selected image can be seen in a specific place on the webpage.

To create this javascript image upload button you need to have an idea about HTML, CSS, and javascript.

How to Preview image before uploading in Javascript

Now if you have a question in mind how to create a show image before upload. Then there is no reason to worry. Because I have created a complete step-by-step tutorial for you. Here you will find the complete explanation of each code line.

1. Basic structure of image upload

I have created a box on the web page using the following code. This box will serve as the basic structure of the Preview image before uploading the system.


<div class="center">
  <div class="form-input">

  </div>
</div> 

First I designed the web page. Here the page is designed using some CSS and blue color is used in the background.


body {
  margin:0px;
  height:100vh;
  background: #1283da;
}
.center {
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;

}

Now I have created the box which has width: 350px and background: white. Box-shadow has been used to enhance beauty.


.form-input {
  width:350px;
  padding:20px;
  background:#fff;
  box-shadow: -3px -3px 7px rgba(94, 104, 121, 0.377),
              3px 3px 7px rgba(94, 104, 121, 0.377);
}


Basic structure of image upload

2. Image viewing display

Now I have made a display. When you select an image it can be seen in this area. Here the width of the image: 100% is kept, that is, the size of the display will be determined according to the size of your image.

You can set a specific size here if you want. When you use it for professional work, you can add width and height according to your needs.

Display: none is used here, which means that under normal circumstances nothing can be seen here.


<div class="preview">
   <img id="file-ip-1-preview">
</div>



.form-input img {
  width:100%;
  display:none;
  margin-bottom:30px;
}

Image viewing display

3. Image select input button

Now I have created a place to input. Here I have used the input function of HTML to input. Here input type file is used which will be used to select any file on your device.

That is, first we will use this input function and select this file. Then I will arrange to show it on web pages using JavaScript.

   ✅ Here 'accept = image / *' condition is used. As a result, only image files can be selected.

   ✅ Here I want to select the only images. For that I have added 'accept = image / *' here. If you want to select another type of file, add it here instead of the image.

   ✅ image / *, meaning that all formats of the image will be accepted here.


<label for="file-ip-1">Upload Image</label>
<input type="file" id="file-ip-1" accept="image/*" onchange="showPreview(event);">

I have used a label here. I have used the following CSS to design this label. This label will basically act as an input button. The width of this button: 45%, height: 45px and the background color blue has been used.


.form-input label {
  display:block;
  width:45%;
  height:45px;
  margin-left: 25%;
  line-height:50px;
  text-align:center;
  background:#1172c2;
  color:#fff;
  font-size:15px;
  font-family:"Open Sans",sans-serif;
  text-transform:Uppercase;
  font-weight:600;
  border-radius:5px;
  cursor:pointer;
}

Image select input button

In the picture above we can see the file select button. The following CSS has been used to hide this file button. Because we don't need this section directly. With the help of a label, we can select the image.


.form-input input {
  display:none;
}

Preview an Image Before Upload

4. JavaScript of Preview image before upload

I have worked on all the designs of the mind above. I hope you did not have any difficulty in designing this Preview an Image Before Upload project. If there is any problem, you can let me know by commenting. I will try to reply to you immediately.

Now is the time to implement Image Upload and Preview with the help of JavaScript. Here I have used a very small amount of JavaScript which will not be a problem for you to understand.


function showPreview(event){
  if(event.target.files.length > 0){
    var src = URL.createObjectURL(event.target.files[0]);
    var preview = document.getElementById("file-ip-1-preview");
    preview.src = src;
    preview.style.display = "block";
  }
}

JavaScript of Preview image before upload

We hope this tutorial helps you to create this Image Preview Before Uploading. It's much easier than the other image select buttons I made. If you have any questions about this project, please let me know in the comments.







Comments

Post a Comment

Tell me what you think ??😎

Popular posts from this blog

Simple Day Night Toggle Button Using HTML and CSS

Image
Day-Night Toggle Button is a common web element that is often found on websites. This Day Night Toggle Switch in the navigation bar helps to choose the dark and light theme of the website. Currently, the Day And Night Toggle Switch can be seen on almost all major websites starting from Facebook and Instagram. Demo Download This article will help you to know step by step how to create Day Night Toggle Button using CSS . This type of CSS Toggle Button is used to create HTML checkboxes . Here's how to easily create a Toggle Switch using the checkboxes. CSS Day Night Toggle Button Although there are many such tutorials on the Internet. But here I will tell you how to make Day Night Toggle Button and how to implement it in your project. A check box was first created using HTML input to create this button. Then that checkbox is shaped like a button by CSS. To make CSS Day Night Toggle Switch you must have some idea about HTML and CSS. This is not the first time I ha...
Read more

Splash Image Mask Using HTML and CSS (Free Code)

Image
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image.  Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image.  Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file.  Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code:...
Read more

How To Limit Character In Input Field using JavaScript

Image
Limit Character is a common feature in the input box. Whenever we see this type of JavaScript Character Limit in the input box of any type of website. The biggest example of this is Twitter. Here I have created a limit character input box. Html, CSS, and javascript are used to create. Although you can create Limit Character using the max length attribute of HTML. Limit Character In Input Field However, even if you use the maxlength attribute , you will not be able to input more than that limit in the input box. But in this case, you can input as much as you want. When your input character exceeds the limit, a kind of error will appear. Here I have used the Character's limit of 50. When you input more than 50 characters, the color of the border will change. See the Pen Untitled by Shantanu Jana ( @shantanu-jana ) on CodePen . As you can see above, this is a simple Javascript Limit Characters . A box has been created on the webpage. An input box has been created i...
Read more