Dropzone: Feature: Make the actual dropzone container configurable
Current situation:
Autodiscover on or programmatically creation on a form element
The whole form will become a dropzone. Additional input fields will be submitted with each uploaded file.
Programmatically creation on a div element
Only the div element will become a dropzone. The surrounding form will be ignored. No additional input fields will be submitted. The url has to be configured manually.
Feature request:
Option A: Make the actual dropzone container (the part that reacts to drop events) configurable similar to the preview container
Option B: If the dropbox is applied on a div (and not a form), it should be possible to specify a form that will submitted along the uploaded file (using action attribute and any additional fields).
The goal is to have a div that will react to drop events (instead of the whole form) and still use the form to upload the file with additional inputs.
What do you think?
rogamoore
All 19 comments
Sounds like a reasonable request :) :+1:
enyo
on 16 Oct 2013
Or allow the same for drop targets as you do for 'clickable' , a selector or even array for multiple drop targets if one chooses. Where drop targets is separately settable from form binding as clickable is.
tablatronix
on 25 Nov 2013
Well... The dropzone Itself is always the container where you can drop files. You can then specify different clickable and preview-elements containers. Isn't that enough?
I see what you mean now.
@tablatronix isn't that @rogamoore 's Option A?
The disadvantage with Option A is that it would make it impossible to have two Dropzones in the same form. But it would be more natural to use it like this...
enyo
on 15 Dec 2013
Thats is why i mentioned clickable it handles selectors and arrays of selectors.
tablatronix
on 15 Dec 2013
@tablatronix Yeah, but simply defining multiple "dropzones" wouldn't be enough. If you want multiple dropzones in a form, it's probably because you want it to be configured differently.
enyo
on 15 Dec 2013
I understand now, never considered that. I was thinking more along the lines of having just 1 config but more than 1 dropzone, say you want the upload button to be droppable as well as a large target, or maybe a persistent dropzone in a fixed menubar and the form, or various locations depending on what page or your app is in fullscreen, or some other responsive requirement.
It seems people are using this for much more advanced things than drop in form enhancement. I wound up using only the dropzone on elements themselves with no forms, which required some custom sending stuff of course. I want to make it part of an apps API so plugin authors can just add a dropzone to any element they want for example.
I have a feeling rogamoore is doing something similar.
tablatronix
on 15 Dec 2013
Right now I'm leaning towards changing Dropzone, so it recognises that it's contained in a form, and changes that form to be a "dropzone-form". Meaning: when the form is submitted, it will take all Dropzones it encapsules, and uploads the files together with the form data. I think this is what most of the users want.
enyo
on 15 Dec 2013
I am pretty sure that I'm going to implement something like this:
<form action="/target">
<div id="dropzone1" class="dropzone"></div>
<div id="dropzone2" class="dropzone"></div>
</form>
When a dropzone is found, that is not on a form element, but inside a form element, the encapsulating element becomes a _dropzone-form_, meaning that it will submit all it's data, along with the dropzone files when submitting. Every subsequent dropzone inside that form will just behave as additional dropzone.
- This is fully backwards compatible. Old browsers that don't support drag'n'drop will just view file input elements, and thus work out of the box
- After about a year of Dropzone being released and popular, I realise that this is the way most people actually want to use it.
enyo
on 16 Dec 2013
The question remains though: is there a need to define another form element?
enyo
on 16 Dec 2013
Programmatically, I would say yes. But thats me.
tablatronix
on 16 Dec 2013
@tablatronix What exactly is the use case you want to cover? I didn't fully get it yet.
enyo
on 16 Dec 2013
I will have to remember what i was trying to do, or rethink it now and see if there is a better way. It is not something I have implemented yet, so is out of my mind atm.
I think i was wanting to have 2 drop targets for the same dz instance, but I might have to consider having seperate dropzone instances.
I guess I can create a specific issue when I work on it again if I still find it not workable.
tablatronix
on 18 Dec 2013
Is there a way to reassign the dropzone after init?
danjger
on 16 Jan 2014
I'm looking to implement two different dropzones inside a form with additional input elements. The example you gave with two divs inside the form is what I'm looking to do. Is this possible with the current release of dropzone?
ronpeled
on 5 Jun 2014
I wanted to put a dropzone persistent on every page, some pages have a dedicated drop zone , all pages have a floating dropzone in a toolbar, so on some pages I would essentially have 2 targets on 1 page both tied to the same instance. I have not yet actually implemented this or attempted even.
tablatronix
on 5 Jun 2014
some news ?
patie
on 25 Jun 2014
@enyo
I'm looking to do the same thing as ronpeled, the method you described as:
<form action="/target">
<div id="dropzone1" class="dropzone"></div>
<div id="dropzone2" class="dropzone"></div>
</form>
_"I'm looking to implement two different dropzones inside a form with additional input elements. The example you gave with two divs inside the form is what I'm looking to do. Is this possible with the current release of dropzone?"_
Will this functionality be available soon?
trickpattyFH20
on 18 Sep 2014
Hey All,
I was eventually able to achieve this method with the current code by customizing some of the inner methods. I'm also interacting with an AJAX call who sorts the files out and temporarily stores them on the server, so when we hit the submit button, the files are already on the server and we are just passing their names and locations (and size, but that is a different issue). See code here:
<div class="formwrap">
<div class="sign-label"><?php echo $this->__('Images'); ?></div>
<div class="sign-field dropzone" id="images">
</div>
<script>
var uploadSizeMax = 50000000;
var uploadSizeTotal = 0;
Dropzone.options.images = {
//Configuration
maxThumbnailFilesize: 10,
acceptedFiles: ".jpg,.jpeg,.png",
autoProcessQueue: true,
uploadMultiple: false,
parallelUploads: 24,
maxFiles: 24,
addRemoveLinks: true,
dictRemoveFile: "x",
dictCancelUpload: "x",
dictDefaultMessage: "Drop image files here",
url: "<?php echo $this->getUrl('vendor/deal/filesDrop') ?>",
accept: function(file, done) {
var isOk = true;
if (!(file.type == "image/jpeg" || file.type == "image/png")) {
isOk = false;
alert("Error! We mostly accept JPG and PNG image files");
}
if (uploadSizeTotal + file.size > uploadSizeMax)
{
isOk = false;
alert("Sorry, you have reached the max size allowed to upload (50M)");
var _ref;
if ((_ref = file.previewElement) != null) {
_ref.parentNode.removeChild(file.previewElement);
}
return this._updateMaxFilesReachedClass();
}
if (isOk)
{
//Add file size
uploadSizeTotal += file.size;
done();
}
},
sending: function(file, xhr, formData) {
formData.append('form_key', '<?php echo Mage::getSingleton('core/session')->getFormKey() ?>');
formData.append('vendor_id', '<?php echo $this->getVendorId() ?>');
},
success: function(file, responseText) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'images[]';
input.value = responseText;
input.id = file.size;
var form = document.getElementById("newdeal");
form.appendChild(input);
file.previewElement.classList.add("dz-success");
},
removedfile: function(file) {
remove(file.size);
//Substract file size
uploadSizeTotal -= file.size;
var _ref;
if ((_ref = file.previewElement) != null) {
_ref.parentNode.removeChild(file.previewElement);
}
return this._updateMaxFilesReachedClass();
}
};
</script>
</div>
<div class="formwrap">
<div class="sign-label"><?php echo $this->__('Downloadable Files'); ?></div>
<div class="sign-field dropzone" id="downloadables">
</div>
<script>
Dropzone.options.downloadables = {
//Configuration
maxThumbnailFilesize: 10,
acceptedFiles: ".pdf,.doc,.dot,.docx,.dotx,.zip",
autoProcessQueue: true,
uploadMultiple: false,
parallelUploads: 24,
maxFiles: 24,
addRemoveLinks: true,
dictRemoveFile: "x",
dictCancelUpload: "x",
dictDefaultMessage: "Drop product files here",
url: "<?php echo $this->getUrl('vendor/deal/filesDrop') ?>",
accept: function(file, done) {
var isOk = true;
if (file.type != "application/pdf" &&
file.type != "application/msword" &&
file.type != "application/vnd.openxmlformats-officedocument.wordprocessingml.document" &&
file.type != "application/vnd.openxmlformats-officedocument.wordprocessingml.template" &&
file.type != "application/octet-stream" &&
file.type != "application/zip") {
isOk = false;
alert("Error! We mostly accept PDF and Word documents");
}
if (uploadSizeTotal + file.size > uploadSizeMax)
{
isOk = false;
alert("Sorry, you have reached the max size allowed to upload (50M)");
var _ref;
if ((_ref = file.previewElement) != null) {
_ref.parentNode.removeChild(file.previewElement);
}
return this._updateMaxFilesReachedClass();
}
if (isOk)
{
//Add file size
uploadSizeTotal += file.size;
done();
}
},
sending: function(file, xhr, formData) {
formData.append('form_key', '<?php echo Mage::getSingleton('core/session')->getFormKey() ?>');
formData.append('vendor_id', '<?php echo $this->getVendorId() ?>');
},
success: function(file, responseText) {
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'files[]';
input.value = responseText;
input.id = file.size;
var form = document.getElementById("newdeal");
form.appendChild(input);
file.previewElement.classList.add("dz-success");
},
removedfile: function(file) {
remove(file.size);
//Substract file size
uploadSizeTotal -= file.size;
var _ref;
if ((_ref = file.previewElement) != null) {
_ref.parentNode.removeChild(file.previewElement);
}
return this._updateMaxFilesReachedClass();
}
};
</script>
</div>
What's the status of this issue? In December of 2013 the comment was made that an implementation change was most likely agreeable:
<form action="/target">
<div id="dropzone1" class="dropzone"></div>
<div id="dropzone2" class="dropzone"></div>
</form>
Was this ever implemented?
robross0606
on 30 May 2015
Related issues
leighsmith
路
18Comments
luisyq
路
36Comments
claudiorivetti
路
25Comments
CallMeBruce
路
26Comments
lox
路
63Comments
Most helpful comment
What's the status of this issue? In December of 2013 the comment was made that an implementation change was most likely agreeable:
Was this ever implemented?