We Keep Coding

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();
}

After image uploaded through dropzone, access parent div

I am confuse i dont know how to access parent div. Let me summarize it!
Actually i have multiple dropzone which i initialize using class '.abc'
above each dropzone there is input where i put image name for uploading. here is my code
$('.kt_dropzone_1').dropzone({
url: base_url + 'product/uploadPic', // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the
maxFiles: 1,
maxFilesize: 5, // MB
addRemoveLinks: true,
accept: function (file, done) {
done();
},
success: function (file, response) {
alert($(this).attr('data-abc')); // undefined
alert($(this).parent().parent.html()); // undefined
},
});
here is html this is in looop so consider it multiple
<input type="hidden" class="img-upload" name="old" value=""/>
<div class="col-md-12 pull-left">
<div class="dropzone dropzone-default kt_dropzone_1">
<div class="dropzone-msg dz-message needsclick">
<h3 class="dropzone-msg-title">Drop files here or click to upload.</h3>
<span class="dropzone-msg-desc">This is just a demo
dropzone. Selected files are <strong>not</strong>
actually uploaded.</span>
</div>
</div>
</div>
i try use custom attribute to pass input id dynamic still not work
i dont know how to get current div object to access parent html or input or div

I could suggest you small changes for this. Move input type hidden inside of
and just above the dropzone div.
Now to refer the correct dropzone please give a try to following updated code.
$('.kt_dropzone_1').dropzone({
var this_dropzone = $(this);
url: base_url + 'product/uploadPic', // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the
maxFiles: 1,
maxFilesize: 5, // MB
addRemoveLinks: true,
accept: function (file, done) {
done();
},
success: function (file, response) {
this_dropzone.closest("div").find(".img-upload").attr('data-abe', 'value to be set');
this_dropzone.closest("div").find(".img-upload").val('you can set anyvalue here');
},
});
This should work as you want!

FF file type blank if you drag files in a folder - DropzoneJs

I am using dropzonejs/react-dropzone and I want to take a folder and drag it in. It should extract the files out, but in FF the file.type is blank and thus all the files get rejected.
I have the basic setup
const config = this.componentConfig;
const djsConfig = this.djsConfig;
const eventHandlers = {
init: dz => this.dropzone = dz,
addedfile: this.handleFileAdded.bind(this),
sending: this.sending.bind(this),
processing: this.processing.bind(this),
maxfilesexceeded: this.maxfilesexceeded.bind(this),
maxfilesreached: this.maxfilesreached.bind(this),
success: this.success.bind(this)
}
this.djsConfig = {
addRemoveLinks: true,
acceptedFiles: "image/jpeg,image/png,image/gif"
autoProcessQueue: true,
maxFiles: 500
};
this.componentConfig = {
iconFiletypes: ['.jpg', '.png', '.gif'],
showFiletypeIcon: true,
postUrl: ''
};
this.dropzone = null;
<DropzoneComponent config={config} eventHandlers={eventHandlers} djsConfig={djsConfig}>

Dropzone js using new function dropzone renameFIle

I am using dropzone.js for my website and try to rename Files before uploading.
Recently dropzone added the new function renameFile, which I can't get to work.
Is this a bug or do I understand the function wrong ?
console.log() is not called.
Dropzone.myDropzone = false;
var size = 1;
Dropzone.options.myDropzone = {
maxFilesize: size,
renameFile: function(file){
console.log("I was called");
return "newname.pdf";
},
paramName: "pdffile",
url: "UploadServlet",
acceptedFiles: "application/pdf",
dictDefaultMessage: "Ziehe Dateien hierhin zum Hochladen",
dictFallbackMessage: "Dieser Browser wird leider nicht unterstützt",
dictFileTooBig: "Die Datei ist leider zu groß. Erlaubtes Maximum sind " +size +" MB",
dictInvalidFileType: "Dies ist leider der falsche Dateityp. Es werden nur PDF-Dateien unterstützt",
sending: function (file,xhr,formData){
formData.append("dateiname",file.name);
}
}

Here's my code I just got working. Currently the documentation is in no way correct. file.upload.filename just throws errors constantly. It says the old methods are depreciated as well.
my whole block:
<form id="my-dropzone" action="upload.php" class="dropzone"></form>
<script src="/sci/dropzone.js"></script>
<script>
Dropzone.options.myDropzone = {
chunkSize: 5000000,
retryChunks: true,
retryChunksLimit: 2,
chunking: true,
timeout: 60000,
maxFilesize: 1000,
dictDefaultMessage: "Click or Drag/Drop files here to upload",
renameFile: function(file) {
return file.name = "NAME-PREFIX_" + file.name;
},
init: function() {
this.on("uploadprogress", function(file, progress) {
console.log("File progress", progress);
});
this.on("success", function(file) {
console.log(file["name"]);
});
}
}
</script>
Notice I put a prefix. In my code I add the days date (through PHP since it doesn't rely on the client having correct time)
renameFile: function(file) {
return file.name = "NAME-PREFIX_" + file.name;
},
Say your file is "me.jpg" you'll get "NAME-PREFIX_me.jpg"

Dropzone remove all file except first file

Just simple ask, I have code like this on JavaScript on dropzone
addRemoveLinks: true,
maxFiles: 1,
init: function() {
this.on("maxfilesexceeded", function(file) {
swal("Error", "U just can upload 1 file", "warning");
});
}
Well is kind a work the file not upload if I have a file, but that file (not first one) still show even they not uploaded, I need to remove all file (not first one) automatic if they didn't upload or get alert. How can I did that???

You can call the removeFile() method, also if you want the thumbnail to show for a moment with the message you can add a timeout:
Dropzone.options.myAwesomeDropzone = {
maxFiles: 1,
dictMaxFilesExceeded: "U just can upload 1 file",
init: function () {
var myDropzone = this;
this.on("maxfilesexceeded", function(file) {
setTimeout(function() {
myDropzone.removeFile(file);
}, 3000);
});
},
};