How to upload files in Vue With Node.js & Express
In this post we will give you information about How to upload files in Vue With Node.js & Express. Hear we will give you detail about How to upload files in Vue With Node.js & ExpressAnd how to use it also give you demo for it if it is necessary.
we are going to learn about how to upload the files in vue.js using express as a backend API.
Creating Express Backend server
We are creating a post API using NodeJS & express, which helps us to upload the files like (images, pdf, etc) to the backend server.
Setup the backend project
Let’s set up the node.js backend project by running the following commands one by one in your terminal.
mkdir fileupload # creating fileupload foldercd fileupload # changing directory to fileuploadnpm init -y # initializing package.json file
Installing packages
Now, we need to install four packages which are express, express-fileupload,cors and nodemon.
Run the below command to install the packages.
npm i express express-fileupload cors nodemon
Now open the fileupload folder in your favorite code editor and create a new file called server.js.
Add the following code to the server.js file.
const express = require('express');const fileUpload = require('express-fileupload');const cors = require('cors')const app = express();// middle wareapp.use(express.static('public')); //to access the files in public folderapp.use(cors()); // it enables all cors requestsapp.use(fileUpload());// file upload apiapp.post('/upload', (req, res) => { if (!req.files) { return res.status(500).send({ msg: "file is not found" }) } // accessing the file const myFile = req.files.file; // mv() method places the file inside public directory myFile.mv('${__dirname}/public/${myFile.name}', function (err) { if (err) { console.log(err) return res.status(500).send({ msg: "Error occured" }); } // returing the response with file path and name return res.send({name: myFile.name, path: '/${myFile.name}'}); });})app.listen(4500, () => { console.log('server is running at port 4500');})In the above code, we first imported three packages which are express, express-fileupload and cors, next we created express application by invoking express() function.
Our post API route is /upload.
We are placing files inside the public folder, so that we need to create a public folder inside our backend project.
Adding scripts
To run and restarting the backend server we are using the nodemon, open your package.json file and add the following code to scripts object.
"server": "nodemon server.js"
Now, start the backend server by running npm start server command in your terminal.which shows a similar text.
nodemon server.js[nodemon] 1.14.3[nodemon] to restart at any time, enter 'rs'[nodemon] watching: *.*[nodemon] starting 'node server.js'server is running at port 4500
Creating a Vue Project
Let’s create a new vue project by using the Vue Cli.
vue create vue-file-upload
This above command will create a new vue project inside the vue-file-upload folder.
Now, change your current working directory to vue-file-upload by running the following command.
cd vue-file-upload
Installing Axios Library
We are installing the axios http client library in vue project, which helps us to make the post request toour backend API.
npm i axios
Creating file upload component
Now, open the vue-file-upload folder in your favorite code editor and create a new file called FileUpload.js inside the components folder.
Add the following code to the FileUpload.js file.
<template> <div > <input type="file" @change="onFileChange" /> <button @click="onUploadFile" :disabled="!this.selectedFile">Upload file</button> </div></template><script>import axios from "axios";export default { data() { return { selectedFile: "", }; }, methods: { onFileChange(e) { const selectedFile = e.target.files[0]; // accessing file this.selectedFile = selectedFile; }, onUploadFile() { const formData = new FormData(); formData.append("file", this.selectedFile); // appending file // sending file to the backend axios .post("http://localhost:4500/upload", formData) .then(res => { console.log(res); }) .catch(err => { console.log(err); }); } }};</script>In the above code, we have added two elements inside the template which are input and button.where attribute type=file is added to the input element so that it can accept the files.
Inside the methods object we have defined two methods which are onFileChange() and onUploadFile().
The onFileChange() method is invoked once a user is selected the file, inside that method we are accessing the file data using e.target.files[0] and setting it to this.selectedFile data property.
The onUploadFile() is invoked once a user clicks the Upload File button, inside that method, we are creating a new FormData object by invoking the FormData constructor and appending the file to formdata using append() method.
Then we are uploading a file to the backend api using the axios.post() method by passing API endpoint and formData as arguments.
Adding styles to FileUpload component
Add the below styles to the FileUpload.vue file.
<style scoped>.file-upload { box-shadow: 2px 2px 9px 2px #ccc; border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; font-size: 1rem; width: 60%; margin: 0 auto;}input { font-size: 0.9rem;}input,div,button { margin-top: 2rem;}.upload-button { width: 7rem; padding: 0.5rem; background-color: #278be9; color: #fff; font-size: 1rem; font-weight: 500; cursor: pointer; border-radius: 1rem;}.upload-button:disabled { background-color: #b3bcc4; cursor: no-drop;}Now, import the FileUpload component inside the App.vue file.
<template> <div id="app"> <FileUpload /> </div></template><script>import FileUpload from "./components/FileUpload.vue";export default { name: "app", components: { FileUpload }};</script>Start the Vue app development server by running the following command in your terminal.
npm run serve
Testing file upload component
Let’s test the FileUpload component by uploading a sample image or file.
Note: Make sure that your backend server is running.
Have you seen in the above image, our file is successfully uploaded to the backend server.
Adding a progress bar
Let’s add the progress bar to our FileUpload component so that the user knows how much amount of file is uploaded.
The axios.post() method also accepts a third argument, which is an object that contains an onUploadProgress() method by using that we can add a progress bar to the FileUpload component.
update the FileUpload.vue file with the below code.
<template> <div > <input type="file" @change="onFileChange" /> <div v-if="progress" :style="{'width': progress}"> {{progress}} </div> <button @click="onUploadFile" :disabled="!this.selectedFile">Upload file</button> </div></template><script>import axios from "axios";export default { data() { return { selectedFile: "", progress: 0 }; }, methods: { onFileChange(e) { const selectedFile = e.target.files[0]; this.selectedFile = selectedFile; this.progress = 0; }, onUploadFile() { const formData = new FormData(); formData.append("file", this.selectedFile); // appending file axios .post("http://localhost:4500/upload", formData, { onUploadProgress: ProgressEvent => { let progress = Math.round((ProgressEvent.loaded / ProgressEvent.total) * 100) +"%"; this.progress = progress; } }) .then(res => { console.log(res); }) .catch(err => { console.log(err); }); } }};</script>You can also improve it more like hiding the upload button during the file is uploading or getting the file url once a file is uploaded to the server, etc.
Code repositories
Hope this code and post will helped you for implement How to upload files in Vue With Node.js & Express. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs