Having a feature to view files before sending them in an application can significantly enhance user experience. With an image preview feature before uploading, users can easily ensure that they have selected the correct file. Many social media applications already implement this feature, helping users review the content of an image before uploading it. So, how can you create an image preview feature before upload in a web-based application?
In this article, I will provide a step-by-step guide to creating an image preview feature before uploading using JavaScript. You can develop and customize this code according to your application's needs.
Step 1: Create the index.html File
Start by creating a file named index.html. Open this file using your favorite code editor and insert the following basic HTML structure. Here, I am using the basic code from the Bootstrap framework for a more appealing look.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Preview Before Upload</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>Step 2: Add the Input Form
Next, you will need to add the code for the input form immediately after the opening <body> tag in your index.html file. This form contains the file input element, which is essential for allowing users to upload images. In this code, I hide the file input so that it is not visually apparent to users. Instead, I provide a button labeled “Select Photo” to trigger the file selection.
Here's the code to insert:
<div class="container p-5">
<h1 class="fs-3 text-center">Image Preview Before Upload</h1>
<div id="formWrapper" class="mt-3">
<form enctype="multipart/form-data" method="POST" action="#" class="d-flex justify-content-center flex-column align-items-center">
<div class="image-container mt-3" style="width: 300px; height: 300px" id="imageContainer">
<img src="https://placehold.co/300" class="img-fluid img-thumbnail rounded rounded-circle" style="object-fit: cover; width: 100%; height: 100%" id="imagePreview"/>
</div>
<div class="form-group border-0 mt-3">
<input type="file" class="file-upload-default d-none" name="image" id="imageUpload" accept=".png,.jpg">
<div class="input-group">
<input type="text" class="form-control file-upload-info d-none" disabled/>
<span class="input-group-append">
<button class="file-upload-browse btn btn-success" type="button" id="selectImageButton">
Select Photo
</button>
<button class="btn btn-primary" id="uploadImageButton">
Upload
</button>
</span>
</div>
</div>
</form>
</div>
</div>Step 3: Add JavaScript for the Preview Feature
Then, add the following JavaScript code just before the closing </body> tag. This code activates the photo selection button and displays a preview of the selected image.
<script>
const selectImageButton = document.getElementById('selectImageButton');
const imageUpload = document.getElementById('imageUpload');
const imagePreview = document.getElementById('imagePreview');
selectImageButton.addEventListener('click', () => {
imageUpload.click();
});
imageUpload.addEventListener('change', () => {
const file = imageUpload.files[0];
if (file) {
const reader = new FileReader();
reader.onload = (e) => {
imagePreview.setAttribute('src', e.target.result);
};
reader.readAsDataURL(file);
} else {
imagePreview.setAttribute('src', 'https://placehold.co/300');
}
});
</script>Testing the Image Preview Feature
Save your index.html file and open it in a browser. Click the “Select Photo” button to choose an image. After selecting an image, you should be able to see a preview of that image in the provided container. If all steps are followed correctly, the image preview feature should work well.
Conclusion
The function of the upload button in this example is to send or submit the form to the back-end. If you are using Laravel, this button will direct the image to the function in the controller for further processing. This could be a separate discussion topic.
That’s how to create an image preview feature before uploading using JavaScript. I hope this article is helpful and assists you in developing more interactive web applications.