Vuetify image upload with preview example - BezCoder (2023)

In this tutorial, I will show you how to use Vuetify to create an uploaded image with a preview sampleSharesImulti-partFile for sending HTTP requests. You'll also learn how to add a progress bar, view a response, and list the image information (with URL).

More practice:
–Example of uploading multiple images via Vetify
–An example of a Vuetify data table with the CRUD | application v data table
–Vue.js JWT authentication with Vuex and Vue Router

Use Bootstrap:

overview

We will create a Vuetify image upload with a preview application so that the user can:

• see upload process (in percent)
• View all uploaded images
• Link to the file after clicking on the name of the image

Here are the APIs that Axios will use to send HTTP requests:

For information about rest APIs server implementation, see one of the following posts:
–Example of the Node.js Express File Upload Rest API
–Uploading a Node.js Express file to MongoDB - example
–An example of expressly uploading a Node.js file to Google Cloud Storage
–An example of uploading a multipart Spring Boot file (into a static folder).
–An example of uploading a Spring Boot file to the database

Technology

• Version 2.6
• axes 0.21.1
• Vuetify 2

Set up a Vuetify image upload project

Open cmd in the folder where you want to save the project folder and run the following command:
vue creates vuetify-image-upload-preview

You will see several options, please selectStandard (babel, eslint).

After successfully creating the Vue project, we import Vuetify with the following command:add vuetify view.
The console shows the following information:

�📦 Installation with vue-cli-plugin-vuetify...+[email protected]Added 5 packages from 7 contributors and checked 1277 packages out of 25013. 0 vulnerabilities found ✔ Plugin successfully installed: vue-cli-plugin-vuetify? Select preset: Default (recommended)� 🚀 Call generator for vue-cli-plugin-vuetify...� 📦 Install additional dependencies... Added 7 packages from 5 contributors and checked 1284 packages out of 41,183. 0 vulnerabilities found⚓ Running completion hooks... ✔ Successfully invoked plugin generator: vue-cli-plugin-vuetify Updated/added the following files: src/assets/logo.svg src/plugins/vuetify.js vue.config.js bundle-lock.json bundle. json public/index.html src/App.vue src/components/HelloWorld.vue src/main.js

openPlugins/vuetify.js, You can see:

import Vue from "vue"; import Vuetify from "vuetify/lib"; Vue.use (Vuetify); export default new Vuetify({});

then inmain.jsfile, the Vuetify object is automatically added to the Vue app:

import Vue from "vue" import app from "./App.vue" import vuetify from "./plugins/vuetify"; Vue.config.productionTip = falsenew Vue({ vuetify, render: h => h(App)}) .$mount('#application')

Iview.config.js:

module.exports = { transpileDependencies: ["vuetify"]};

Project structure

Let's delete unnecessary folders and files and then create new ones as follows:

Let me explain briefly.

–Plugins/vuetify.jsImports the Vuetify library, initializes and exports the Vuetify object formain.js.
Thanks to the command, we don't have to do anything with these two filesAdd Vuetifythey helped us

–UploadFilesServiceProvides methods for storing files and retrieving files using Axios.
–Upload imageThe component contains a form for uploading images, a progress bar and a list of displayed images.
–app. vueis the container where we embed all Vue components.

–http-common.jsInitializes Axios with the base HTTP URL and headers.
- We configure dependencies and transpile ports for our application inview.config.js

Initialize Axios for the HTTP client to upload Vuetify images

Now let's add the Axios library with the command:Install npm axios.

Podsourcethe folder we createhttp-common.jsfile as follows:

import axios z „axios”;export default axios.create({ baseURL: „http://localhost:8080”, headers: { „Content-type“: „application/json“ }});

Remember to change thembaseURL, it depends on the REST API URL configured on the server.

Create an image upload service

This service uses Axios to send HTTP requests.
There are 2 functions:

• file upload): POST form data with a callback to track upload progress
• download files(): Get the image information list

Services/UploadFilesService.js

import http from "../http-common"; class UploadFilesService { upload(file, onUploadProgress) { let formData = new FormData(); formData.append("file", file); return http.post("/upload", formData, { headers: { "Content-Type": "multipart/form-data" }, onUploadProgress }); } getFiles() { return http.get("/files"); }} export default new service UploadFilesService();

– First we import Axios ashttpapart fromhttp-common.js.

–create datais a data structure that can be used to store key-value pairs. We use it to create an object corresponding to an HTML formto add()Method.

- We doonUploadProgressreveal the progress of events. These progress events are expensive (change detection for each event) so you should only use them if you want to monitor them.

- We call themPost()&receive()methodSharesto send an HTTP POST & Get request to the file upload server.

Create an image upload component

Let's create an image upload UI with progress bar, button and Vuetify notification. We also have groups of tab and list items for viewing uploaded files.

First, let's create a Vue component template and import itUploadFilesService:

ingredients/Upload an image. vue

Then we define some variables in itDane()

export default { name: "upload-image", data() { return { currentImage: undefined, thumbnail: undefined, progress: 0, message: "", imageInfos: [] }; },};

• Image informationis an array{Name, URL}objects. We will display his data in VuetifyV-sheetsIin-list-item-group.
• Progressis the percentage of image upload progress.

Next we defineselect photo()A method that will help us get the selected imagev input fileInsert the element later in the HTML template.

export default { name: "upload-image", ... Metody: { selectImage(image) { this.currentImage = image; this.previewImage = URL.createObjectURL(this.currentImage); ten.postęp = 0; ta.wiadomość = ""; }, }};

We access currentImage as an input parameterBild. Then we'll callUploadService.upload()method nacurrent photowith callback.

We also useURL.createObjectURL()static method to get image preview url asThumbnail. This method createsDOMStringincluding the URL describing the object provided in the parameter. The life of the URL is tied to the document in the window where it was created.

We also specifyupload()way as follows:

export default { name: "upload-image", ... Metody: { ... upload() { if (!this.currentImage) { this.message = "Proszę wybrać obraz!"; wracać; } ten.postęp = 0; UploadService.upload(this.currentImage, (event) => { this.progress = Math.round((100 * event.loaded) / event.total); }).then((response) => { this.message = Response.data.message; return UploadService.getFiles(); }).then((images) => { this.imageInfos = images.data; }).catch((err) => { this.progress = 0; this .message = „Nie można przesłać obrazu!” + err; this.currentImage = undefined; }); }, }, };

We check ifcurrent photois here or not. Then we'll callUploadService.upload()method nacurrent photowith callback.

TheProgressis calculated on this basisloaded eventIevent.total.
We'll call you when the transfer is completeUploadService.getFiles()to fetch information about the images and assign the resultImage informationArray.

We have to do this work toohandle()Method:

export default { name: "upload-image", ... mount() { UploadService.getFiles().then(response => { this.imageInfos = Response.data; }); }};

Now let's implement the UI HTML template to upload images using Vuetify. Add the following content: