Before creating our own file upload component from scratch, I think it is worth mentioning that a lot of the UI libraries out there for Vue already have just such a component built right in. So if you're using a UI library, simply check their documentation to see if something is already available. And if so, it'll probably just be a matter of hooking it up to your backend API endpoints. For example, One of my favorite UI libraries is ShadCN View.
It has this nice file upload component. It doesn't quite have the drag and drop style that I would like, but it has the functionality already baked in. Prime View has a robust file upload component with a lot of different options available, including a uploader UI here with drag and drop files or buttons to upload files. NuxtUI supports the file type on its UInput component.
It doesn't look that great in terms of a drag-and-drop input, but it will certainly get the job done. Vuitify also has a FileUpload component. It currently is in the Vuitify Labs, meaning it's experimental, but soon enough this will probably land in a stable version of Vuitify. Quasar also has several file picker options available.
Element Plus comes in with what I think is one of the most beautiful looking file upload components with different options. Things like a drag to upload, a file list with just the names, or a file list with thumbnails, or even this cool photo wall version for images. Finally, Flow Byte View 3. which is built to work very well with Toll and CSS as a nice click to upload or drag and drop file upload drop zone available.
If none of these options fit your needs, you're keen on having complete control over your file upload component, or you're just really curious about how file uploads work under the hood, then keep watching. Before creating our own file upload component from scratch, I think it is worth mentioning that a lot of the UI libraries out there for Vue already have just such a component built right in. So if you're using a UI library, simply check their documentation to see if something is already available. And if so, it'll probably just be a matter of hooking it up to your backend API endpoints.
For example, One of my favorite UI libraries is ShadCN View. It has this nice file upload component. It doesn't quite have the drag and drop style that I would like, but it has the functionality already baked in. Prime View has a robust file upload component with a lot of different options available, including a uploader UI here with drag and drop files or buttons to upload files.
NuxtUI supports the file type on its UInput component. It doesn't look that great in terms of a drag-and-drop input, but it will certainly get the job done. Vuitify also has a FileUpload component. It currently is in the Vuitify Labs, meaning it's experimental, but soon enough this will probably land in a stable version of Vuitify.
Quasar also has several file picker options available. Element Plus comes in with what I think is one of the most beautiful looking file upload components with different options. Things like a drag to upload, a file list with just the names, or a file list with thumbnails, or even this cool photo wall version for images. Finally, Flow Byte View 3.
which is built to work very well with Toll and CSS as a nice click to upload or drag and drop file upload drop zone available. If none of these options fit your needs, you're keen on having complete control over your file upload component, or you're just really curious about how file uploads work under the hood, then keep watching.