Reinitialize / Reset dropzone after form submit
I am using dropzone.js to load a ruby ββon rails image. Here is my HTML code
<div class="row">
<div class="col-md-12" id="drop-zone-container">
<%= form_tag '/settlement_proofs', method: :post, class: 'dropzone form', id: 'media-dropzone' do %>
<div class="fallback">
<%= file_field_tag 'attachment', multiple: true%>
</div>
<% end %>
</div>
</div>
and i have initialized dropzone as
$("#media-dropzone").dropzone({
acceptedFiles: pg.constants.ACCEPTED_FORMAT,
maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB
maxFiles: pg.constants.ATTACHMENT_MAX_SIZE,
addRemoveLinks: true,
removedfile: function (file) {
if (file.xhr.responseText.length > 0) {
var fileId = JSON.parse(file.xhr.responseText).id;
$.ajax({
url: pg.constants.url.SETTLEMENT_BASE_URL + fileId,
method: 'DELETE',
dataType: "json",
success: function (result) {
$('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', ""));
$('#settlement_proof_status span').fadeOut(0);
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
error: function () {
$('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn();
}
});
}
},
init: function () {
this.on("success", function (file, message) {
debugger;
appendContent(message.attachment.url, message.id);
});
this.on("error", function (file, message) {
$('#settlement_proof_status span').text(message).fadeIn();
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
});
$('#settlement_invoice_submit_btn').click(function () {
$("#new_settlement_invoice").submit();
});
$('#uploaded_attachment').change(function () {
if (this.value.length == 0) {
this.removeAllFiles();
}
});
}
});
After submitting the form via AJAX, I need the dropzone field to reset with the default image.
source to share
Finally, I solved this problem myself. First, I remove the form from my parent. It deleted the existing dropzone instance. Then I create the form using jQuery and initialize the dropzone again. Here is my complete code
// To reset dropzone before popup load
var resetDropzone = function () {
$('#drop-zone-container').empty();
var $form = makeElement('form', {
action: window.pg.constants.url.SETTLEMENT_BASE_URL,
method: 'post',
id: 'settlement-proof-form',
class: 'dropzone'
});
$('#drop-zone-container').append($form);
var settlmentProofDropZone;
$("#settlement-proof-form").dropzone({
acceptedFiles: pg.constants.ACCEPTED_FORMAT,
maxFilesize: pg.constants.ATTACHMENT_MAX_FILE_SIZE, //In MB
maxFiles: pg.constants.ATTACHMENT_MAX_SIZE,
addRemoveLinks: true,
removedfile: function (file) {
if (file.xhr.responseText.length > 0) {
var fileId = JSON.parse(file.xhr.responseText).id;
$.ajax({
url: pg.constants.url.SETTLEMENT_BASE_URL + fileId,
method: 'DELETE',
dataType: "json",
success: function (result) {
$('#uploaded_attachment').val($("#uploaded_attachment").val().replace(result.id + ',', ""));
$('#settlement_proof_status span').fadeOut(0);
var _ref;
return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
},
error: function () {
$('#settlement_proof_status').text(I18n.t('attachment_deletion_error')).fadeIn();
}
});
}
},
init: function () {
settlmentProofDropZone = this;
this.on("success", function (file, message) {
appendContent(message.attachment.url, message.id);
});
}
});
};
function makeElement(element, options) {
var $formField = document.createElement(element);
$.each(options, function (key, value) {
if (key === 'innerHTML') {
$formField.innerHTML = value;
}
else {
$formField.setAttribute(key, value);
}
});
return $formField;
}
});
source to share
Try the following:
//DropZone Initiation Section
init: function() {
this.on('success', function(file, json) {
});
this.on('addedfile', function(file) {
});
this.on('drop', function(file) {
});
this.on('removedfile', function(file) {
});
this.on('complete', function(file) {
});
this.on('error', function(file) {
});
this.on('resetFiles', function() {
if(this.files.length != 0){
for(i=0; i<this.files.length; i++){
this.files[i].previewElement.remove();
}
this.files.length = 0;
}
});
}
function JS_ClearDropZone() {
//DropZone Object Get
var objDZ = Dropzone.forElement("div#objDropzone");
//"resetFiles" Event Call
objDZ.emit("resetFiles");
}
source to share
Every answer here is incredibly complex. I have a dropzone in modal with some ajax to draw the uploaded / complete file on the page. If the user adds an ANOTHER image to the gallery, I wanted to reset the dropzone in this modal mode without refreshing the page. Answer? See my solution here fooobar.com/questions/1184895 / ...
source to share
Simple script based solution. For version 5.4.0
- Add this to your script to include dropzone.js
$('button#submit_button').click(function() { $('.dz-preview').empty(); $('.dz-message').show(); });
-
And in dropzone.js add the line >>> $ ('. Dz-message'). Hide ();
before returning _this3.updateTotalUploadProgress (); (line 1277)
this.on("uploadprogress", function() { $('.dz-message').hide(); return _this3.updateTotalUploadProgress(); });
source to share