You know some birds are not meant to be caged, their feathers are just too bright.
File uploads is one of the most important functions on the internet, and we have bigger files nowadays, which means it’s not enough to have simple input fields – we need AJAX and processing file upload “in the background”. Here I will show you a simple example of that in Laravel 5.
Let’s say, we have a simple form to upload the product and many photos for it.
And we want to upload photos and see upload progress immediately, only then submitting the form. For that we will use a jQuery-File-Upload library.
And then we have two simple models – app/Product.php and app/ProductPhoto.php.
As you can see, field
product_photos.product_id is nullable – which means we can upload photos without saving product with them yet. We’ll show later why.
First, let’s decide our URLs. In routes/web.php we will have this:
Basically, homepage for the form, then /upload for AJAX file submit, and /product for submitting the whole product with photos.
Then we have app/Http/Controllers/UploadController.php with these methods:
Our resources/views/upload_form.blade.php will look like this:
Now, let’s download jQuery-File-Upload library and put its /js contents into our /public/js. And then we can use it like this – in the end of our upload_form.blade.php:
To be honest, I’m not a strong front-ender, so the syntax was written according to jQuery-File-Upload library examples. But basically, it works like this:
- fileupload() method is attached to input field and takes two important parameters – name=”photos” data-url=”/upload”;
- Those parameters are passed via AJAX request to /upload URL – meaning UploadController and method uploadSubmit();
- uploadSubmit() physically uploads the file, stores information in the database but doesn’t store product_photos.product_id because we don’t have ID yet. After upload it returns JSON with array of file results;
- Those results are shown to the user in the file list (filename and size) and also in the hidden field file_ids which stores values from product_photos.id column;
We can upload more files like this, and our files list will grow bigger and bigger. As soon as we hit the main submit – the data will be posted and UploadController method postProduct() will save the data into products DB table, and also assign new product ID to product_photos entries: