How to upload files using Vuetify's File input component

  • last month
In this video I'm showing how I'm uploading an image using Vuetify's File input component and Axios. I'm showing only the frontend part for file uploading. In the next video I will show how the image is processed on the server side.
Transcript
00:00In this video, I will show how I'm uploading images using VT5 file input.
00:17In my code I'm using this VFileInput component,
00:26which is used to select an image with these formats.
00:39And here I have a listener for the changes.
00:45When I'm selecting an image, it will notify this function.
00:56This function receives as parameter the selected image.
01:07Then I'm adding the selected image to the FormData object.
01:16And here I'm using Axios to send the FormData with image to the server.
01:27Finally, I'm showing success or error message if the image was not uploaded.
01:36In the next video, I will show how the image is saved on the server.

Recommended

5:24
I
Up next
How to create cache for dynamic posts displayed by page using Django
InterTuts
6:46
Vue.js & Django Social Scheduler: posts list
InterTuts
3:44
How to open a popup using JavaScript
InterTuts
4:53
How to load an image in Vuetify
InterTuts
4:54
How to upload images on Imgur through API using Angular and Django
InterTuts
4:36
How to upload images in Angular
InterTuts
2:35
Vue.js & Django Social Scheduler: connect Facebook Pages with API url
InterTuts
2:53
How to create a cache for database requests in Django REST Framework
InterTuts
1:36
Vue.js & Django Authentication: how to create a logout link
InterTuts
3:21
How to test Vuetify forms inputs with Vitest
InterTuts
4:16
Vue.js & Django Authentication: Vuetify Installation and Configuration
InterTuts
2:33
Vue.js & Django Authentication: login with Vue, Vuetify and Vuelidate
InterTuts
2:37
How to use cards in Vuetify
InterTuts
1:24
How to test Vuelidate inputs validation with Vitest
InterTuts
1:31
Vue.js & Django Authentication: how to set up title and description for pages in Vue.js 3
InterTuts
1:50
Vue.js & Django Authentication: how to customize the Vuelidate's messages
InterTuts
2:33
How to test in Next.js if an image is rendered correctly using Jest
InterTuts
1:53
Vue.js & Django Authentication: how to reset password in Vue.js
InterTuts
2:45
Vue.js & Django Authentication: Vue.js installation
InterTuts
1:12
Vue.js & Django Authentication: Introduction
InterTuts
1:37
How to use .env files in Next.js
InterTuts
3:02
How to test Axios requests in Vue.js using Vitest
InterTuts
2:53
How to create a custom checkbox with HTML elements in Vuetify
InterTuts
4:11
React & Node.js Authentication: create a simple submit animation with Redux Toolkit
InterTuts
1:53
How to use the Vuetify's menu popover(a practical example)
InterTuts