Vue Js Multiple Image Upload with preview:Vue.js is a JavaScript framework that allows for efficient development of user interfaces. When it comes to Vue Js Multiple Image Upload with preview, Vue.js provides a simple and elegant solution. By utilizing the v-for directive to loop through an array of selected images, each image can be displayed using the v-bind directive. Additionally, an input type of “file” allows users to select multiple images simultaneously. Upon selection, the images can be previewed using the URL.createObjectURL() method, which generates a temporary URL for each image. Overall, Vue.js enables developers to create a dynamic and interactive interface for multiple image uploads with real-time previews.
How can I implement Vue Js multiple image upload with preview?
This code snippet allows users to Vue Js Multiple Image Upload with preview feature. The HTML markup includes an input element of type “file” with the multiple attribute, enabling the selection of multiple files. When the file selection changes, the handleFileUpload method is triggered.
The uploaded images are displayed in a div with the class “image-container.” The v-for directive iterates over the “images” array, rendering each image as an img element with a preview URL. Clicking on an image triggers the showImage method, displaying a modal with a larger view of the selected image.
Each image item in the container also includes a remove button, which triggers the removeImage method. The modal is displayed or hidden based on the value of the “showModal” variable.
Vue Js Multiple Image Upload with preview Example
<div id="app">
<label for="file-upload">Choose Image</label>
<input type="file" id="file-upload" multiple @change="handleFileUpload">
<div class="image-container">
<div v-for="(image, index) in images" :key="index" class="image-item">
<img :src="image.previewUrl" alt="Preview" class="profile-pic" @click="showImage(index)">
<button class="remove-button" @click="removeImage(index)">X</button>
</div>
</div>
<div v-if="showModal" class="modal" @click.self=" closeModal">
<div class="modal-content">
<span class="close" @click="closeModal">×</span>
<img :src="selectedImage.previewUrl" alt="Preview" class="modal-image">
</div>
</div>
</div>
Output of Vue Js Multiple Image Upload with preview
Efficiently Implement Vue Js Multiple Image Upload with Preview : Step-by-Step JavaScript Code Example
This code demonstrates Vue Js multiple image upload with preview feature. It starts by creating a Vue application using Vue.createApp(). The application’s data consists of an empty array called images, a boolean variable showModal initialized as false, and selectedImage set to null.
The code defines several methods. The handleFileUpload method is triggered when files are selected for upload. It loops through each file, creates a FileReader, and assigns an onload event handler. When the reader finishes loading the file, it pushes an object containing the file itself and its preview URL into the images array.
The removeImage method removes an image from the images array at the specified index. The showImage method sets the selectedImage to the image object at the given index and sets showModal to true, displaying a modal dialog with the selected image preview.
The closeModal method is responsible for closing the modal dialog. It sets showModal back to false and selectedImage to null.
Vue Js Multiple Image Upload with preview Example – Javascript Code
<script type="module" >
const app = Vue.createApp({
data() {
return {
images: [],
showModal: false,
selectedImage: null
};
},
methods: {
handleFileUpload(event) {
const files = event.target.files;
for (let i = 0; i < files.length; i++) {
const reader = new FileReader();
reader.onload = (e) => {
this.images.push({
file: files[i],
previewUrl: e.target.result
});
};
reader.readAsDataURL(files[i]);
}
},
removeImage(index) {
this.images.splice(index, 1);
},
showImage(index) {
this.selectedImage = this.images[index];
this.showModal = true;
},
closeModal() {
this.showModal = false;
this.selectedImage = null;
}
}
});
app.mount('#app');
</script>
CSS Code for Vue Js Multiple Image Upload with Preview
The CSS code provided sets the styling for a web application. It centers the content both vertically and horizontally using flexbox. The #app element is displayed as a flex container with a column direction, and its content is aligned and justified at the center.
The code also includes styles for a file input and label, an image container, image items, profile pictures, remove buttons, and a modal. The modal is a fixed-position overlay with a close button and a content container for displaying images.
Vue Js Multiple Image Upload with preview Example – Css Code
/* Center the content vertically and horizontally */
#app {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
font-family: Arial, sans-serif;
}
/* Style for the file input */
input[type="file"] {
display: none;
}
/* Style for the file input label */
label {
padding: 10px 20px;
background-color: #4285f4;
color: #ffffff;
font-size: 16px;
font-weight: bold;
cursor: pointer;
border-radius: 4px;
transition: background-color 0.3s ease;
}
label:hover {
background-color: #3367d6;
}
.image-container {
display: flex;
flex-wrap: wrap;
margin-top: 20px;
}
.image-item {
position: relative;
margin-right: 10px;
margin-bottom: 10px;
}
.profile-pic {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 50%;
cursor: pointer;
}
.remove-button {
position: absolute;
top: 5px;
right: 5px;
padding: 5px;
background-color: #f44336;
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
font-weight: bold;
}
.remove-button:hover {
background-color: #d32f2f;
}
/* Modal styles */
.modal {
display: block;
position: fixed;
z-index: 1;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.8);
}
.modal-content {
margin: auto;
display: flex;
justify-content: center;
align-items: center;
width: 80%;
max-width: 800px;
height: 80%;
}
.modal-image {
width: 100%;
height: auto;
object-fit: contain;
}
.close {
position: absolute;
top: 20px;
right: 30px;
font-size: 35px;
font-weight: bold;
color: #f1f1f1;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
Output of Vue Js Multiple image upload with preview
