Laravel 5 AJAX Image Upload Example

Laravel 5 AJAX Image Upload Example. This is how you can setup upload an image using Laravel 5, jQuery AJAX, Dropzone.js and Bootstrap in a few minutes.

The Process:

  1. User clicks Upload Picture
  2. JS triggers dropzone click and user selects image
  3. Image gets sent to back-end using AJAX (CSRF token automatically added to request in Laravel 5)
  4. Back-end stores the file in a temp directory and returns the path
  5. Front-end displays the thumbnail of the image
This is what the output looks like (excuse the image used!):
Laravel 5 AJAX Image Upload Example
Response contains the path to the uploaded file.
Response contains the path to the uploaded file.
It requires changes to the following files:
  • Laravel Routes
  • Laravel Controller

Laravel Routes

Protected so only admins can upload (auth optional)

Laravel Controller

 Uploads a file to a temporary location and return the file path.




I’ll create a demo for this when I get the chance.

Sam Deering

Sam Deering is a web developer from England (currently living in Australia). In his spare time he enjoys coding, playing chess, reading and investing.

8 thoughts on “Laravel 5 AJAX Image Upload Example

  1. Hi there!

    Thanks a lot for the tutorial. I’ve been trying Laravel5 + Dropzone with no luck… until I found your post.

    Thanks again!

    1. Im in the same situation. I dont know what you are using to pull the path of the image because we cant see your Helper function :(. I have a good feeling about this tutorial but I cant get past this part. Please help!

    2. Just take some default avatar on google, ande put it in yout public/img/avatar… or whatever yout want and replace the Helper part to {{ asser(‘img/avatar/youravatar.jpg’) }}.

  2. Hi, ho can i do to have image preview and other field like text in the form please ?
    Like for an article you have a form with title, body, and image…

Leave a Reply

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