Building an Interactive Drag-and-Drop File Uploader with Vue
File upload components are a crucial part of many web applications. They allow users to upload files, images, and documents, making it essential to create a seamless and intuitive experience. In this article, we will explore how to build a minimalist yet interactive drag-and-drop file uploader using Vue.
Getting Started
To begin, we will create a new Vue application by running the command vue create my-app. Once the project is set up, we will create a new component called DropFile.vue inside the src/components directory.
Creating a Simple Drop Zone
We will start by creating a simple drop zone using the native HTML input element with the type attribute set to file. However, this will only allow us to select one file at a time. To enable multiple file selection, we can add the multiple attribute.
html
<input type="file" multiple />
Building an Advanced Drop Zone
To create a more advanced drop zone, we will use a combination of HTML, CSS, and JavaScript. We will create a container element with a border and padding, and then add a label element to make the drop zone interactive.
“`html
“`
Adding Interactivity with JavaScript
We will use JavaScript to add interactivity to our drop zone. We will create a Vue instance and attach a custom ref to the input element to make it easily accessible.
javascript
export default {
data() {
return {
isDragging: false,
files: []
}
},
methods: {
onChange(event) {
this.files = event.target.files;
},
onDragOver(event) {
this.isDragging = true;
},
onDragLeave(event) {
this.isDragging = false;
},
onDrop(event) {
this.files = event.dataTransfer.files;
this.isDragging = false;
}
}
}
Listing Dropped Files
To list the dropped files, we can loop through the files array and display each file name.
“`html
- {{ file.name }}
“`
Removing Files
To remove files, we can add a button next to each file name and call a remove method when clicked.
“`html
-
{{ file.name }}
“`
Previewing Selected Image Files
To preview selected image files, we can generate an arbitrary URL using the native URL.createObjectURL() method.
javascript
const url = URL.createObjectURL(file);
Showing File Size
To show the file size, we can access the size property of each file object.
“`html
- {{ file.name }} ({{ file.size }} bytes)
“`
Preventing Duplicate Files
To prevent duplicate files, we can check if a file already exists in the files array before adding it.
javascript
if (!this.files.find((file) => file.name === newFile.name && file.size === newFile.size)) {
this.files.push(newFile);
}
Uploading Files to the Server
To upload files to the server, we can use the FormData API and send the files to the server using Axios.
javascript
const formData = new FormData();
this.files.forEach((file) => {
formData.append('files[]', file);
});
axios.post('/upload', formData);
By following these steps, we have created a minimalist yet interactive drag-and-drop file uploader using Vue. Our file upload component allows users to select multiple files, preview image files, and remove files before uploading them to the server.