When I first started using VueJs, it was a nightmare to find a decent tutorial on how to upload a single file using Ajax, let alone a tutorial explaining how to manage multiple files.
I have been dealing a couple of years with file management, mostly using VueJs and Laravel, so I thought writing a tutorial like this could help a lot of developers implement one of the coolest things in applications, which is real-time asset management.
First off, you will find many solutions online that are good but those who are early beginners will definitely struggle.
What I will cover here is writing your frontend and backend code that will allow you to upload multiple files. Additionally, I will give you a few tricks on how to apply this stuff to different situations.
This article will introduce a basic ability to pass multiple files from the UI to your backend. Once you have passed the attachments, they will automatically become UploadedFile object in PHP which are described in Laravel documentation.
You can check my complete Laravel project at https://github.com/asabanovic/file-management-vuejs
I have pushed my code to github.
Download it, run it, play with it.
If you have come up to this point of the article, please clap and comment if you would like to see new sequels of the article such as:
1. Properly storing files on disk and database
2. Building a data library (pulling already saved attachments before uploading new ones)
3. Ability to delete old and new attachments
4. Separating attachments among different users so you can only see your uploaded files
5. Setting up file size limitations per user
6. Limiting to specific file formats
7. Uploading and previewing images
8. And more …
Don’t forget to clone your Github https://github.com/asabanovic/file-management-vuejs !