I'm using dropzone for single upload. I would like to disable dropzone while uploading. I tried to set clickable property to false on addedfile event and then set it back to true on success, but dropzone doesn't update with changes. How exactly can I change clickable property dynamically?
Thanks.
I had similar problem, the dropzone itself has disable() and enable(). Try the code below
init: function() {
myDropzone = this;
},
addedfile: function() {
myDropzone.disable()
},
success:function(file, response) {
myDropzone.enable()
....
}
Depends on your needs you can replace
addedfile: function() {
myDropzone.disable()
},
with the code below
sending: function() {
myDropzone.disable()
},
Related
This is how I initiate them:
var myDropzone = new Dropzone("#galleryUploadDropzone", Dropzone.options.myAwesomeDropzone)
var myDropzone = new Dropzone("#galleryUploadDropzone2", Dropzone.options.myAwesomeDropzone2)
Dropzone.options.myAwesomeDropzone and Dropzone.options.myAwesomeDropzone2 are used to initiate them.
Both dropzone initiate correctly with no errors, however when I upload something in the second dropzone upload of it gets displayed in the first dropzone and not the second.
this is how options objects look:
Dropzone.options.myAwesomeDropzone = {
// Dropzone configuration
autoProcessQueue: true,
addRemoveLinks: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 20,
previewsContainer: '#dropzone-previews',
// clickable:'#dropzone-previews',
acceptedFiles: ".jpeg,.jpg,.png,.gif,.bmp",
maxFilesize: 2,
// The setting up of the dropzone
init: function() {
myDropzone = this;
myDropzone.on("addedfile", function(file) {
$( '#uploadMsg' ).hide();
});
myDropzone.on("maxfilesexceeded", function(file) {
$( '#uploadMsg' ).append('<h4>Max amount of files exceeded. Only '+maxFiles+' files can be uploaded at once.</h4>');
});
// First change the button to actually tell Dropzone to process the queue.
$("#sbmtbtn").on('click',function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
console.log('sendingmultiple')
});
this.on("successmultiple", function(files, response) {
console.log('successmultiple')
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
setTimeout(removeFiles, 500)
console.log('removeFiles should be called soon')
freshLibraryImages = response.images
});
this.on("errormultiple", function(files, response) {
// alert('error');
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
}
and the second
Dropzone.options.myAwesomeDropzone2 = {
// Dropzone configuration
autoProcessQueue: true,
addRemoveLinks: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 20,
previewsContainer: '#dropzone-previews',
// clickable:'#dropzone-previews',
acceptedFiles: ".jpeg,.jpg,.png,.gif,.bmp",
maxFilesize: 2,
// The setting up of the dropzone
init: function() {
myDropzone2 = this;
myDropzone2.on("addedfile", function(file) {
$( '#uploadMsg' ).hide();
});
myDropzone2.on("maxfilesexceeded", function(file) {
$( '#uploadMsg' ).append('<h4>Max amount of files exceeded. Only '+maxFiles+' files can be uploaded at once.</h4>');
});
// First change the button to actually tell Dropzone to process the queue.
$("#sbmtbtn").on('click',function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone2.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
console.log('sendingmultiple')
});
this.on("successmultiple", function(files, response) {
console.log('successmultiple')
// Gets triggered when the files have successfully been sent.
// Redirect user or notify of success.
setTimeout(removeFiles, 500)
console.log('removeFiles should be called soon')
freshLibraryImages = response.images
});
this.on("errormultiple", function(files, response) {
// alert('error');
// Gets triggered when there was an error sending the files.
// Maybe show form again, and notify user of error
});
}
what am I doing wrong here?
Instantiate the second dropzone to a different variable
var myDropzoneA = new ...
var myDropzoneB = new ...
and refer to them as such
I've successfully integrated dropzone.js inside an existing form. This form posts the attachments and other inputs like checkboxes, etc.
When I submit the form with attachments, all the inputs post properly. However, I want to make it possible for the user to submit the form without any attachments. Dropzone doesn't allow the form submission unless there is an attachment.
Does anybody know how I can override this default behavior and submit the dropzone.js form without any attachments? Thank you!
$( document ).ready(function () {
Dropzone.options.fileUpload = { // The camelized version of the ID of the form element
// The configuration we've talked about above
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 50,
maxFiles: 50,
addRemoveLinks: true,
clickable: "#clickable",
previewsContainer: ".dropzone-previews",
acceptedFiles: "image/*,application/pdf, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.openxmlformats-officedocument.spreadsheetml.template, application/vnd.openxmlformats-officedocument.presentationml.template, application/vnd.openxmlformats-officedocument.presentationml.slideshow, application/vnd.openxmlformats-officedocument.presentationml.presentation, application/vnd.openxmlformats-officedocument.presentationml.slide, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.wordprocessingml.template, application/vnd.ms-excel.addin.macroEnabled.12, application/vnd.ms-excel.sheet.binary.macroEnabled.12,text/rtf,text/plain,audio/*,video/*,.csv,.doc,.xls,.ppt,application/vnd.ms-powerpoint,.pptx",
// The setting up of the dropzone
init: function() {
var myDropzone = this;
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
// Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
// of the sending event because uploadMultiple is set to true.
this.on("sendingmultiple", function() {
// Gets triggered when the form is actually being sent.
// Hide the success button or the complete form.
});
this.on("successmultiple", function(files, response) {
window.location.replace(response.redirect);
exit();
});
this.on("errormultiple", function(files, response) {
$("#notifications").before('<div class="alert alert-error" id="alert-error"><button type="button" class="close" data-dismiss="alert">×</button><i class="icon-exclamation-sign"></i> There is a problem with the files being uploaded. Please check the form below.</div>');
exit();
});
}
}
});
Use the following:
$('input[type="submit"]').on("click", function (e) {
e.preventDefault();
e.stopPropagation();
var form = $(this).closest('#dropzone-form');
if (form.valid() == true) {
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([]); //send empty
}
}
});
Reference: https://github.com/enyo/dropzone/issues/418
You should check if there are files in the queue. If the queue is empty call directly dropzone.uploadFile(). This method requires you to pass in a file. As stated on [caniuse][1], the File constructor isn't supported on IE/Edge, so just use Blob API, as File API is based on that.
The formData.append() method used in dropzone.uploadFile() requires you to pass an object which implements the Blob interface. That's the reason why you cannot pass in a normal object.
dropzone version 5.2.0 requires the upload.chunked option
if (this.dropzone.getQueuedFiles().length === 0) {
var blob = new Blob();
blob.upload = { 'chunked': this.dropzone.defaultOptions.chunking };
this.dropzone.uploadFile(blob);
} else {
this.dropzone.processQueue();
}
Depending on your situation you could simply submit the form:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
$("#my_form").submit();
}
The first approach is kind of too expensive for me, I would not like to dive into the source code and modify it,
If you happen to be like me , use this.
function submitMyFormWithData(url)
{
formData = new FormData();
//formData.append('nameOfInputField', $('input[name="nameOfInputField"]').val() );
$.ajax({
url: url,
data: formData,
processData: false,
contentType: false,
type: 'POST',
success: function(data){
alert(data);
}
});
}
And in your dropzone script
$("#submit").on("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
if (myDropzone.getQueuedFiles().length > 0)
{
myDropzone.processQueue();
} else {
submitMyFormWithData(ajaxURL);
}
});
I tried Matija Grcic's answer and I got the following error:
Uncaught TypeError: Cannot read property 'name' of undefined
And I didn't want to modify the dropzone source code, so I did the following:
if (myDropzone.getQueuedFiles().length > 0) {
myDropzone.processQueue();
} else {
myDropzone.uploadFiles([{name:'nofiles'}]); //send empty
}
Note: I'm passing an object inside the array to the uploadFiles function.
Then I check server-side, if name != 'nofiles' do upload stuff.
Pretty simple, you stop the propagation ONLY if you have files to be submitted via Dropzone:
// First change the button to actually tell Dropzone to process the queue.
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
// Stop the propagation ONLY if you have files to be submitted via Dropzone
if (myDropzone.getQueuedFiles().length > 0) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
}
});
I have successfully used :
submitButton.addEventListener("click", function () {
if(wrapperThis.files.length){
error = `Please select a file`;
} else {
wrapperThis.processQueue();
}
});
My answer is based on the fact that the other answers don't allow for an Ajax based solution where an actual HTML form isn't actually being used. Additionally you may want the full form contents submitted when sending the Files for upload as well.
As you'll see, my form occurs in a modal outside of any form tag. On completion, the modal is triggered to close.
(FYI getForm returns the form as an object and not directly related to the answer. Also assumes use of jQuery)
init: function() {
var dzClosure = this;
// When saving what are we doing?
$('.saveBtn').off('click').on('click',function(e){
e.preventDefault();
e.stopPropagation();
if (dzClosure.getQueuedFiles().length > 0) {
dzClosure.processQueue();
dzClosure.on('queuecomplete',function(){
$('.modal:visible').modal('hide');
})
} else {
var params = getForm();
$.post(dzClosure.options.url,params,function(){
$('.modal:visible').modal('hide');
})
}
});
dzClosure.on('sending', function (data, xhr, formData) {
var extra = getForm();
for (key in extra){
formData.append(key,extra[key]);
}
});
I've got a problem with the JQuery events in one of my Backbone.Marionette Views. I have defined some click and keyboard events. But some of them are not working. For example I want that the fetch-function is called every time the keyup event is triggered.
So here is the code:
return Backbone.Marionette.ItemView.extend({
tagName: 'div',
template: Template,
events:{
'click .yes': 'yes',
'click .no': 'no',
'keyup #citySearch': 'fetch'
},
yes : function() {
this.close();
},
no : function() {
this.close();
},
initialize: function(){
this.collection = new AreaCollection();
this.collection.on('sync', this.onShow, this);
this.sourceArr = [];
},
onShow: function() {
var that = this;
$('#citySearch').typeahead({
source: that.sourceArr
});
},
fetch: function(ev) {
var that = this;
that.collection.fetch({
data : {
query : $(ev.currentTarget).val(),
type : 'cities'
},
success: function(response) {
for (var i = 0; i < response.length; i++) {
that.sourceArr.push(response.models[i].get('name'));
}
}
});
}
});
But the keyup-Event is never fired. I also tried it with the "change"-event, which is also not working. When i use "keydown" or "keypress" instead then everything is fine and the fetch-function is called correctly.
I also tried to bind the event to that input-field manually in the initialize-function with
$('input#citySearch').bind('keyup',function() {
console.log('keyup');
});
But this is also not working. It only works if I bind the event to the input field within my underscore-Template file. But that couldn't be the solution.
Does anybody have an idea what the problem could be?
I can think of only one reason for this. And that is:
input#citySearch is not part of your itemView. This means you are NOT binding your fetch function to keyup event inside the container element of your view.
If you want to bind to something outside your view, you can trigger an event to the View in which the element resides.
I have the following code working nicely:
$field2.on("change", "#selector", function(){
$field2.load("./index.php?show-options=true", { value: $(this).val() }, function() {
$("#options").buttonset();
});
});
It loads the #options div and applies button to anchor tags within it.
Is there a way to declare
$("#options").buttonset();
BEFORE the #options div is loaded?
I looked through jQuery docs with no success, and also found this answer:
Apply jQuery UI widgets to ajax loaded elements
which I think might be on track, but haven't understood it fully nor managed to implement.
Help appreciated, thanks.
Doing the following:
$field2.on("change", "#selector", function(){
$field2.load("./index.php?show-options=true", { value: $(this).val() }, function() {
$field2.find("#options").buttonset();
});
});
Will make all option elements within $field2 into a button set (once the content has been updated).
Or alternatively you could make the button set on dom ready:
$(function() { $("#options").buttonset(); });
Update
jQuery selectors work on elements in the DOM (unless given a context), if the element is not in the DOM then unfortunately jQuery will not be able to affect it directly. If the load then call to buttonset is causing a FOUC (flash of unstyled content), you could try the following:
$field2.on("change", "#selector", function() {
$field2.empty();
$.get("./index.php?show-options=true", { value: $(this).val() }, function(data) {
var newContent = $(data);
$("#options", newContent).buttonset();
$field2.empty().append(newContent);
});
});
I have the following code snippet:
$(document).ready(function () {
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
// validate the #regFormBody form when it is submitted
$("#regFormBody").validate({
submitHandler: function(form) {
alert('form is submitted');
},
rules: {
...
},
messages: {
...
}
});
}
The problem is that after I add the
// bind 'regFormBody' and provide a simple callback function
$('#regFormBody').ajaxForm(function() {
alert("Thank you for your comment!");
});
The form validation doesn't work at all. I always see the message alert('form is submitted') even without entering any information to form.
May you tell me how to solve this problem?
Thank you
You can expand your options object for .ajaxForm(), like this:
$('#regFormBody').ajaxForm({
beforeSubmit: function() {
return $('#regFormBody').valid();
},
success: function() {
alert('Thanks for your comment!');
}
});
This will kick off validation before submitting, and if it's not .valid() it'll stop the submit from happening like you want.