简体   繁体   中英

Sorting Dropzone.js

I'm using Dropzone.js with Spring boot.

Everything works fine except, when I upload image it goes on the bottom of gallery.

How can I make it so that the image which is uploaded shows first (on the top of gallery). Does Dropzone have some built in methods that I could use?

var extraImageDropzone = new Dropzone('#extraImagesDropzone', {
        url: "/uploads/upload",
        maxFiles: 25,
        acceptedFiles: 'image/*',
        autoQueue: true,
        addRemoveLinks: false,
        parallelUploads: 1,
        createImageThumbnails: false,
        createImageData:false,
        previewsContainer: null,
        previewTemplate: '<li style="diplay:none"></li>',
        hiddenInputContainer: "#extraImagesDropzoneToggle",
        clickable: "#extraImagesDropzoneToggle",
        //  thumbnailWidth: 100,
        thumbnailHeight: 100,
        thumbnailMethod: `contain`,
        complete: function(file, response) {
            console.log('completed');
        },
        success: function(f, response) {
            if (response.id) {
                console.log('File uploaded' + response.URL);
                $(".image-picker").data('picker').append_one(response.id, response.URL);

            } else {
                alert('Error while uploading');
                this.removeFile(f);
            }

        }
    });

Added prepend_one method to Image-picker lib and now works fine.

     ImagePicker.prototype.prepend_one = function (val, image_src) {
        var option = jQuery('<option>').val(val).attr('data-img-src', image_src);
        this.select.prepend(option);
        var picker_option = new ImagePickerOption(option[0], this, this.opts);
        this.picker_options.push(picker_option);
        this.picker.prepend(picker_option.node);
    };

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM