file upload laravel ajax

Laravel AJAX File Upload with BlueImp JQuery Library

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.

laravel file upload ajax

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.


Step 1. Database structure

Here’s how our migration files will look:

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.


Step 2. Routes and MVC

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:


Step 3. Building the form

Our resources/views/upload_form.blade.php will look like this:


Step 4. Processing the upload and submit

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:

And that’s it – we get the success message!

Here’s a quick video demo of the final result:

Of course, it’s a really simple example, but it gets the main job done.
How you can expand it:

  • Add more validation or Auth to the Requests;
  • Store more fields to the files like original filename, size, extension etc.
  • Not only uploading the files but deleting them in the same form
  • Deleting unsaved files from the server if the submit wasn’t clicked
  • Add progress bar for uploading bigger files
  • etc.

For that you may want to read the documentation of jQuery-File-Upload library and the examples there.

Also related: Laravel Filesystem documentation

Want to generate Laravel adminpanel online?
You don't need any packages to do that!

4 thoughts on “Laravel AJAX File Upload with BlueImp JQuery Library

  1. I had to setup my jQuery to send the csrf token with ajax requests.

    $.ajaxSetup({
    headers: {
    ‘X-CSRF-TOKEN’: $(‘meta[name=”csrf-token”]’).attr(‘content’)
    }
    });

Leave a Reply

Your email address will not be published. Required fields are marked *