We Keep Coding

How to display uploaded document inside a dropzone form in an edit modal?

I am using the same dropzone form to upload different documents. After upload I need to open a modal for each one document to give the possibility to modify, so i show document uploaded inside the dropzone when i open the modal with this code
$("#mydropzone").dropzone({
acceptedFiles: ".pdf,.tiff,.png,.jpeg,.jpg,.bmp",
dictDefaultMessage: "Drop files or click here to upload a new DICOM series ...",
uploadMultiple: true,
parallelUploads: 10,
paramName: "file",
autoProcessQueue: false,
clickable:'#dropzoneModal',
previewTemplate: document.querySelector('#preview_template').innerHTML,
init : function() {
modalDropzone = this;
fatturaId = thisId-1;
for(var i=0;i<dropzones[fatturaId].files.length;i++){
var mockFile = {
name: dropzones[fatturaId].files[i].name,
size: dropzones[fatturaId].files[i].size,
status: Dropzone.ADDED,
accepted: true
};
modalDropzone.emit("addedfile", mockFile);
modalDropzone.files.push(mockFile);
modalDropzone.createThumbnailFromUrl(mockFile, opts.imageURL, function() {
modalDropzone.emit("complete", mockFile);
})
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
The documents uploaded are saved in dropzones[fatturaId].files, that why i iterate it
The first time the file shows correctly when i open the edit modal, while the second time the dropzone shows empty without any document in it, showing an error in console:
Uncaught Error: Dropzone already attached.

Can't implement dropzone.js to an existing form

I'm trying to implement the dropzone.js to my existing form, which has a lot of input fields, select options, etc. I tried to follow this answer: https://stackoverflow.com/a/35275260/13695248 but all I earned is if I press the send button, literally nothing happens. No error or anything, it just doesn't do anything. I've got a lot of help from #Swati so I have some extra functions in the dropzone options, but I don't think it causes the problem.
This is how the html looks like:
<form action="upload.php" method="post" enctype='multipart/form-data' id="add">
<div class="dropzone" id="uploader"></div>
<input type="text" id="mainimage" name="mainimage">
<!-- lot of input fields here -->
<input type="submit" class="btn btn-primary btn-xl" id="sendButton" name="upload" value="Send" />
</form>
and the JS part:
Dropzone.options.uploader = {
url: 'upload.php',
autoProcessQueue: false,
uploadMultiple: true,
paramName: "images", // The name that will be used to transfer the file
maxFilesize: 2, // MB
maxFiles: 5,
addRemoveLinks: true,
acceptedFiles: 'image/*',
accept: function(file) {
let fileReader = new FileReader();
fileReader.readAsDataURL(file);
fileReader.onloadend = function() {
$('<a>', {
class: 'primary',
text: "Legyen ez a fő kép",
href: "#"
}).appendTo(file.previewElement)
//file.previewElement.append($textContainer)
console.log(file.previewElement)
file.previewElement.classList.add("dz-success");
if (($(".dz-success.dz-complete").length > 0) && ($(".main").length == 0)) {
$(".dz-success.dz-complete:first .primary").text("Fő kép")
//add class to first one
$(".dz-success.dz-complete:first").addClass("main")
$("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input
}
}
file.previewElement.classList.add("dz-complete");
},
"error": function(file, message, xhr) {
if (xhr == null) this.removeFile(file);
alert(message);
},
removedfile: function(file) {
var is_there = file.previewElement.classList.contains("main");
console.log(is_there)
file.previewElement.remove();
if (is_there && $(".dz-success.dz-complete").length > 0) {
$(".dz-success.dz-complete .primary").text("Legyen ez a fő kép")
$(".dz-success.dz-complete:first .primary").text("Fő kép")
$(".dz-success.dz-complete:first").addClass("main")
$("#mainimage").val($(".dz-success.dz-complete:first").find(".dz-filename span").text()) //add default name to imgs input
}
if ($(".dz-success.dz-complete").length == 0) {
$("#mainimage").val("")
}
},
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("sendButton").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
$(":input[name]", $("form")).each(function() {
formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val());
});
});
},
dictDefaultMessage: 'Kérjük húzza ide a képeket vagy kattintson a tallózáshoz!',
dictFallbackMessage: 'Böngészője nem támogatja a kép előnézetet!',
dictFallbackText: 'Kérjük használja a tallózást a képek kiválasztásához!',
dictFileTooBig: 'A fájl mérete túl nagy. ({{filesize}}MiB). Maximum {{maxFilesize}}MiB lehet!',
dictInvalidFileType: 'A kiválasztott fájl kiterjesztése nem megfelelő!',
dictResponseError: 'A szerver {{statusCode}} kóddal válaszolt. Kérjük próbálja meg később!',
dictCancelUpload: 'Feltöltés visszavonása',
dictUploadCanceled: 'feltöltés visszavonva!',
dictCancelUploadConfirmation: 'Biztosan visszavonja a feltöltést?',
dictRemoveFile: 'Kép törlése',
dictMaxFilesExceeded: 'Elérte a maximálisan feltölthető képek számát!'
};
$(document).on("click", ".primary", function() {
$(".dz-success.dz-complete.main .primary").text("Legyen ez a fő kép")
$(this).text("Fő kép")
$(".dz-success.dz-complete").removeClass("main")
$(this).closest(".dz-success.dz-complete").addClass("main")
$("#mainimage").val($(this).closest(".dz-success.dz-complete").find(".dz-filename span").text())
})
I think this init function ruins it, because if I delete it, the button works fine but the data doesn't go to the database
init: function() {
dzClosure = this; // Makes sure that 'this' is understood inside the functions below.
// for Dropzone to process the queue (instead of default form behavior):
document.getElementById("sendButton").addEventListener("click", function(e) {
// Make sure that the form isn't actually being sent.
e.preventDefault();
e.stopPropagation();
dzClosure.processQueue();
});
//send all the form data along with the files:
this.on("sendingmultiple", function(data, xhr, formData) {
$(":input[name]", $("form")).each(function() {
formData.append(this.name, $(':input[name=' + this.name + ']', $("form")).val());
});
});
}

I had to add 'done' to the accept function:
accept: function(file, done) {
.
.
done();
}

Dropzone check if files names exists before processing queue

I am using dropzone for uploading files which I save with some meta data in a database in the backend.
When a user tries to upload a bulk of files I want to check if he has already uploaded a file with this name and warn him with an alert with an option to continue ot stop.
So I disabled the autoProcessQueue.
I am also listening for addedfile event, I get the name, I perform an ajax to check if it exists in the database and return true or false, good.
Let's say the user tries to upload 40 files which all already exist, I don't want 40 warnings that this file already exists, I want one notification printing all 40 filenames.
I was looking for addedfile but for multiple files, I didn't found a solution.
Here is my code for now
This is where I'm stuck
How can I know when I've checked every file ?
$(document).ready(function() {
#if(isset($checkRoute))
function filenameExists(name) {
$.ajax({
type: 'GET',
url: '{{ $checkRoute }}',
data: {
name: name
}
})
.done(function(res) {
// returns true or false
return res
})
.fail(function(err) {
console.log(err)
})
}
#endif
let existingFilenames = []
let fileCount = 0
$('#{{ $element_id }}').dropzone({
url: "{{ $upload }}", // Set the url for your upload script location
paramName: "documents", // The name that will be used to transfer the file
maxFiles: 100,
maxFilesize: 100, // MB
parallelUploads: 100,
timeout: 240000,
addRemoveLinks: true,
acceptedFiles: "application/msword, application/vnd.ms-excel, application/pdf, image/*, application/vnd.openxmlformats-officedocument.wordprocessingml.document, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, image/*",
uploadMultiple: true,
headers: {
'X-CSRF-TOKEN': "{{ csrf_token() }}"
},
init: function() {
#if(isset($checkRoute))
this.on('addedfile', function(file) {
console.log(this.getAcceptedFiles())
fileCount++
if (filenameExists(file.name)) {
console.log(file.name)
existingFilenames.push(file.name)
}
})
#endif
},
autoProcessQueue: false,
sendingmultiple: function (files) {
// Begin loading
KTApp.blockPage({
overlayColor: '#000000',
type: 'v2',
state: 'success',
message: '{{ __('documents_uploading') }}'
});
},
queuecomplete: function () {
// End loading
KTApp.unblockPage();
$.notify({
// options
message: '{{ __('documents_upload_success') }}'
}, {
// settings
type: 'success',
placement: {
from: "top",
align: "center"
},
animate: {
enter: 'animated fadeInDown',
exit: 'animated fadeOutUp'
},
});
window.location.replace("{{ $redirect }}");
}
});
});
Another thing that concerns me is how will I process the queue at the press of the button in the notification.

I had a similar problem as i wanted to provide the user with a dropdown of different upload directories on the server.
As each directory has a different ruleset of acceptedFiles, the static option acceptedFiles was out of the question.
Instead i used a combination of listening to the drop event on dropzone init and to "extend" the accept function:
The drop event gets the total number of files dropped and stores it in droppedFilesCounter. It also initializes/resets a global Object dzCustomFeedback and clears the "feedback" area from prior feedback.
The extended accept function, which is called for by each dropped file checks which upload directory is currently selected and compares the current file extension against the configured accepted ones.
If there is a match the done() function "bubbles" an "all clear".
Otherwise the file is removed from the preview list (or actually never makes it into it) and the global dzCustomFeedback Object cumulates error-messages of the type invalidFileTypes for all files accordingly.
Once all files have been run through the accept function (droppedFilesCounter == 0) and some feedback messages have been prepared the prepareFeedback function is called, which basically populates a jQuery <div> container with the cumulated content of dzCustomFeedback.
init: function() {
var myDropzone = this;
myDropzone.on("drop", function(event) {
if(typeof event.dataTransfer.files == 'object')
{
droppedFilesCounter = event.dataTransfer.files.length;
}
dzCustomFeedback = {};
jQuery('#dz-feedback').empty();
});
},
accept: function(file, done) {
/ * Erweiterung der vordefinierten accept Function * /
customTypeSelector = document.getElementById("selectUploadFolder");
var currentAcceptedFiles = customTypeAcceptedFiles[customTypeSelector.options[customTypeSelector.selectedIndex].value]
var currentFileExtension = file.name.split(".").pop()
droppedFilesCounter--;
if (typeof customTypeAcceptedFiles[customTypeSelector.options[customTypeSelector.selectedIndex].value] == "object"
&&
jQuery.inArray(currentFileExtension, currentAcceptedFiles["extensions"] ) >= 0) {
//accepted file
done();
}
else {
//Unaccepted file revert
this.removeFile(file);
if(typeof dzCustomFeedback["invalidFileTypes"] == "undefined")
{
dzCustomFeedback["invalidFileTypes"] = {
"msg": [
uploadDndConf["textElements"]["invalidFileTypesUploadFolder"].replace("{{uploadFolder}}", currentAcceptedFiles["label"])
, currentAcceptedFiles["extensions"].join()
]
, "type": "error"
, "filesIgnored": {} };
}
dzCustomFeedback["invalidFileTypes"]["filesIgnored"][file.name] = file;
done(this.options.dictInvalidFileType);
}
if(droppedFilesCounter == 0 && !jQuery.isEmptyObject(dzCustomFeedback))
{
prepareFeedback(dzCustomFeedback);
}
},

Remove all files dropzoneJs only image upload

How I can remove images after sendingmultiple without removing other params? I tried this but it does not work:
init: function () {
this.on('sendingmultiple', function(file, xhr, formData){
formData.append('ids', $("#ids").val());
});
},
init: function () {
this.on("completemultiple", function (file) {
this.removeAllFiles();
});
},
I do not want to delete this id, just images

In drop zone above the following function use
function isImage($img){
return (bool)getimagesize($img);
}
if(isImage($_FILES['file']['tmp_name'])){
if(move_uploaded_file($_FILES['file']['tmp_name'],$targetFile))

filter files in Blueimp/ jQuery-File-Upload

I am trying to use Blueimp / jQuery-File-Upload my project and I want to test the file extension because I only want to download photos
someone show me where and how I should configure blueimp / jQuery-File-Upload so I can do this

As stated in the documentation you can simply set the options to a regex for the file type like that:
$('#fileupload').fileupload('option', {
url: '//localhost/',
maxFileSize: 5000000,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
process: [
{
action: 'load',
fileTypes: /^image\/(gif|jpeg|png)$/,
maxFileSize: 20000000 // 20MB
},
{
action: 'resize',
maxWidth: 1440,
maxHeight: 900
},
{
action: 'save'
}
]
});

I found this add method
So, here is my code for .gpx files:
$('#fileupload').fileupload({
// your fileupload options
add:function(e,data){
data.files.map(function(i){
if(i.type!='application/gpx+xml'){
alert('please upload only .gpx files');
}else{
data.submit();
}
}),
process: function(e,data){/* your process actions here */}
});

Your can use the method add for filter files:
var $input = $('#upload_input');
$input.fileupload({
fileInput: $input,
url: 'YOU_URL',
// Other options...
start: function(e, data) {
// Before start upload... Please wait...
},
add: function(e, data) {
types = /(\.|\/)(gif|jpe?g|png)$/i;
file = data.files[0]
if (types.test(file.type) || types.test(file.name)) {
data.submit();
} else {
// alert('Unfortunately, we don’t support that file type. Try again with a PNG, GIF, JPG');
return;
}
},
done: function(e, data) {
// After upload... alert('Done');
},
fail: function(e, data) {
// Error. Please try again later...
}
});