Tengo este código en mi plantilla blade donde declaro dos div con distintos ids, para identificar cada uno con un dropzone.
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-6">
<div id="dropzoneEsp" class="col-md-6">
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload1' ]) !!}
{!! Form::close() !!}
</div>
<button type="submit" id="buttonImagenCat" class="btn btn-primary">Subir imagen (cat)</button>
</div>
<div class="col-xs-6 col-sm-6 col-md-6">
<div id="dropzoneCat" class="col-md-6">
{!! Form::open([ 'route' => [ 'dropzone.store' ], 'files' => true, 'enctype' => 'multipart/form-data', 'class' => 'dropzone', 'id' => 'image-upload2' ]) !!}
{!! Form::close() !!}
</div>
<button type="submit" id="buttonImagenEsp" class="btn btn-primary">Subir imagen (esp)</button>
</div>
</div>
Y luego con Jquery intento construir este código para darle una funcionalidad a cada uno, siguiendo este código
<script type="text/javascript">
var myDropzoneTheFirst = new Dropzone(
//id of drop zone element 1
'#dropzoneCat', {
url : "uploadUrl/1"
}
);
var myDropzoneTheSecond = new Dropzone(
//id of drop zone element 2
'#dropzoneEsp', {
url : "uploadUrl/2"
}
);
myDropzoneTheFirst.options.imageUpload = {
maxFiles: 1,
addRemoveLinks : true,
autoProcessQueue: false,
accept: function(file, done) {
console.log("uploaded");
done();
},
init: function() {
var myDropzoneESP = this;
this.on("maxfilesexceeded", function(file){
alert("No more files please!");
});
// Update selector to match your button
$("#buttonImagenEsp").click(function (e) {
e.preventDefault();
myDropzoneESP.processQueue();
});
this.on("addedfile", function (file) {
if (this.files[1] != null) {
//alert('add file');
this.removeFile(this.files[0]);
}
});
},
};
No se si lo planteo bien en el JavaScript, lo que intento hacer es definir dos objetos dropzone y luego intento asignarle a cada uno unas características.