Laravel 5.2 and Dropzone.js Part 2: Displaying already uploaded images

In first part Laravel 5.2 and Dropzone.js auto image uploads with removal links  I talked about basic configuration options and server side functions. Many comments were related to displaying images uploaded in previous sessions, thus I decided to expand the project and implement that feature.

Dropzone Configuration

Dropzone expects 3 things to build preview thumbnail: filename, size and server path. In first tutorial I am saving original and server filenames in the database, for size I will calculate that in foreach loop.

Best part to insert already uploaded previews is in Dropzone's init function. I don't want to mess up first part code so I will create new file dropzone-config-2.js from dropzone-config.js and store it in the same directory.

var photo_counter = 0;
Dropzone.options.realDropzone = {

    uploadMultiple: false,
    parallelUploads: 100,
    maxFilesize: 8,
    previewsContainer: '#dropzonePreview',
    previewTemplate: document.querySelector('#preview-template').innerHTML,
    addRemoveLinks: true,
    dictRemoveFile: 'Remove',
    dictFileTooBig: 'Image is bigger than 8MB',

    // The setting up of the dropzone
    init:function() {

        // Add server images
        var myDropzone = this;

        $.get('/server-images', function(data) {

            $.each(data.images, function (key, value) {

                var file = {name: value.original, size: value.size};
                myDropzone.options.addedfile.call(myDropzone, file);
                myDropzone.options.thumbnail.call(myDropzone, file, 'images/icon_size/' + value.server);
                myDropzone.emit("complete", file);
                photo_counter++;
                $("#photoCounter").text( "(" + photo_counter + ")");
            });
        });

        this.on("removedfile", function(file) {

            $.ajax({
                type: 'POST',
                url: 'upload/delete',
                data: {id: file.name, _token: $('#csrf-token').val()},
                dataType: 'html',
                success: function(data){
                    var rep = JSON.parse(data);
                    if(rep.code == 200)
                    {
                        photo_counter--;
                        $("#photoCounter").text( "(" + photo_counter + ")");
                    }

                }
            });

        } );
    },
    error: function(file, response) {
        if($.type(response) === "string")
            var message = response; //dropzone sends it's own error messages in string
        else
            var message = response.message;
        file.previewElement.classList.add("dz-error");
        _ref = file.previewElement.querySelectorAll("[data-dz-errormessage]");
        _results = [];
        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
            node = _ref[_i];
            _results.push(node.textContent = message);
        }
        return _results;
    },
    success: function(file,done) {
        photo_counter++;
        $("#photoCounter").text( "(" + photo_counter + ")");
    }
}



 

In this file only new thing is AJAX loading of server images at the top of init function. AJAX callback passes data to loop which goes through each array element of the data.images. First line of loop callback is constructing file object which consists of file name and size value for display. Next 2 lines are adding files to Dropzone queue and attacing thumbnail to preview board. 4th line is emitting complete event, so Dropzone can remove upload progress bars from thumbnails. Last 2 lines are updating image counter.

Backend code

In routes.php file I will add 2 new routes, one for displaying upload view and other for returning uploaded images.

/**
 * Part 2 - Display already uploaded images in Dropzone
 */
Route::get('example-2', ['as' => 'upload-2', 'uses' => [email protected]']);
Route::get('server-images', ['as' => 'server-images', 'uses' => [email protected]']);

 Now I'll edit ImageController and add missing methods. 

    /**
     * Part 2 - Display already uploaded images in Dropzone
     */

    public function getServerImagesPage()
    {
        return view('pages.upload-2');
    }

    public function getServerImages()
    {
        $images = Image::get(['original_name', 'filename']);

        $imageAnswer = [];

        foreach ($images as $image) {
            $imageAnswer[] = [
                'original' => $image->original_name,
                'server' => $image->filename,
                'size' => File::size(public_path('images/full_size/' . $image->filename))
            ];
        }

        return response()->json([
            'images' => $imageAnswer
        ]);
    }

This new view upload-2.blade.php in getServerPage method is almost same as upload.blade.php from first tutorial but instead of including old dropzone config file it is now including /assets/js/dropzone-config-2.js

After this when you visit this-project-url.dev/example-2 you will see already uploaded images. You can refresh the page and thumbnails will remain in the preview section. 

Method getServerImages is returning all images from the database, but you can create custom logic and return only certain images (authenticated user images).

Let me know what else would you like to learn about Dropzone and Laravel.

 

You can find entire code used in this tutorial on Github.

 

Online computer science courses to jumpstart your future.
WP Engine Managed WordPress Hosting

Trending

Newsletter

Subscribe to our newsletter for good news, sent out every month.

Tags