/ code

Preload Images into Dropzone.js In Laravel 5.4

I tried a few solutions i found online but they did not seem to work well for me. For this example i will get all images for a product page.

I modified dropzone-config and added the code below just under init.


//get the product id from the end of the last slash(/) in the url
var str = window.location.href;
var n = str.lastIndexOf('/');
var result = str.substring(n + 1);

//getJSON will get the response and then it will loop through it.    $.getJSON('/prepop/'+result, function(data) {
 var mockFile = { name: val.original, size: val.size };
    thisDropzone.options.addedfile.call(thisDropzone, mockFile);
    thisDropzone.options.thumbnail.call(thisDropzone, mockFile, "" + val.file);

The prepop route:

Route::get('prepop/{id}', ['as' => 'prepop', 'uses' => 'HomeController@getImages']);

The code below is what i used in my home controller.

public function getImages($id){ 

//get file details from database.

  $get_images = uploadimages::select('id','file_name','file_size', prodcut_id)
              ->where('id', $id)

//Add file location, size for each image to the array
   foreach ($get_images as $image) {
      $images[] = [
          'file' => "uploads/".$image->file_name,
          'size' =>  $image->file_size

//return response
        return response()->json([
            'images' => $images

For me this seemed the best way for me to preload images into dropzone.js in laravel.