dropzone replace added files

179
June 25, 2018, at 12:30 PM

How can replace added file in dropzone by click replace button.

Codepen

this is my codepen that i handle dropzone with jquery sortable. i want to add a button named replace to every file added to dropzone for replacing them with another file.

Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(".upload", {
url: "/file/post",
addRemoveLinks: true,                      
autoProcessQueue: false,
maxFiles: 5,
parallelUploads: 5,
previewTemplate : $('.preview').html(),
init: function() {
  this.on('completemultiple', function(file, json) {
       $('.upload').sortable('enable');
       $(".dz-preview").each( function() {
            var indexes = $(this).index();
            $(this).attr('id', "index-" + indexes);
            $(this).find('.dz-index').text(indexes);
        })
      });
    this.on("addedfile", function (file) {
        if (myDropzone.getQueuedFiles().length > 0) {
             var length = myDropzone.getQueuedFiles().length;
             length2 = length+1;
             console.log('q:' + length2);
        }
        $(".dz-preview").each( function() {
            var indexes = $(this).index();
            $(this).attr('id', "index-" + indexes);
            $(this).find('.dz-index').text(indexes);
        });
        $('.dz-preview').data('file', file);

    });
    this.on("removedfile", function (file) {
        console.log('test');
        $(".dz-preview").each( function() {
            var indexes = $(this).index();
            $(this).attr('id', "index-" + indexes);
            $(this).find('.dz-index').text(indexes);
        })
        if (myDropzone.getQueuedFiles().length > 0) {
             console.log(myDropzone.getQueuedFiles().length);
        }

    });
    this.on('drop', function(file) {
        console.log('File',file)
      }); 
},
success: function (file, response) {
    console.log(response);
    file.previewElement.id = response.id;
  }
});

 $('#uploadFiles').on('click', function () {
    myDropzone.processQueue();
});

$(document).ready(function(){
 $('.upload').sortable({
    stop: function () {
        $(".dz-preview").each( function() {
                var indexes = $(this).index();
                $(this).attr('id', "index-" + indexes);
                $(this).find('.dz-index').text(indexes);
            });
            //var queueArray = myDropzone.getQueuedFiles();
            // Reorder files within the array
            //myDropzone.removeAllFiles();
            // Loop and add your files again
            //myDropzone.addFile(file);

    }
 });
});

});

and second feature that i want is show full size image when click on preview added file in dropzone.

1- replace button on added file

2- show full size image on click added file

codepen

Rent Charter Buses Company
READ ALSO
Copiar imagem para área de transferência em javascript?

Copiar imagem para área de transferência em javascript?

Preciso copiar uma imagem para área de transferência como objeto e não como url, seria como clicar em uma imagem e copiar

131
Ruby on Rails — AJAX Pagination with helper methods

Ruby on Rails — AJAX Pagination with helper methods

So due to the features I had to use the helper instead of the actual controller to fetch the teacherposts: pages controller:

126
Prepend on click event only showing for a few seconds

Prepend on click event only showing for a few seconds

I am trying to validate whatever the user inputs and (if imputed incorrectly) display an error messagehowever, the error message only displays for a few seconds before disappearing

174
jQuery: Tabs switch to drop-down options on mobile

jQuery: Tabs switch to drop-down options on mobile

My issue is thisI'd like to have 4 tabs that when clicked show different content

139