Non-ajax post using Dropzone.js
No. You cannot manually set the value of a <input type='file'>
for security reasons. When you use Javascript drag and drop features you're surpassing the file input altogether. Once a file is fetched from the user's computer the only way to submit the file to the server is via AJAX.
Workarounds: You could instead serialize the file or otherwise stringify it and append it to the form as a string, and then unserialize it on the server side.
var base64Image;
var reader = new FileReader();
reader.addEventListener("load", function () {
base64Image = reader.result;
// append the base64 encoded image to a form and submit
}, false);
reader.readAsDataURL(file);
Perhaps you're using dropzone.js because file inputs are ugly and hard to style? If that is the case, this Dropzone.js alternative may work for you. It allows you to create custom styled inputs that can be submitted with a form. It supports drag and drop too, but with drag and drop you cannot submit the form the way you want. Disclaimer: I am author of aforementioned library.
Related videos on Youtube
Comments
-
MZAweb about 2 years
I'm wondering if there's any way to make Dropzone.js (http://dropzonejs.com) work with a standard browser POST instead of AJAX.
Some way to inject the inputs type=file in the DOM right before submit maybe?
-
Mada Aryakusumah over 9 yearsi think the answer from @amandasantnanti is close. But did you try like github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone ? This is gist from my current work before gist.github.com/madaarya/cb4196c25a0ede2b607b17aaef6b930c
-
Suma over 7 yearsWhile interesting, this does not seem to stop the Ajax call. I also want the form to submit data for another page to process.
-
Mada Aryakusumah over 7 yearshi @Suma , i have create gist what i did same like your expectation on gist.github.com/madaarya/cb4196c25a0ede2b607b17aaef6b930c . This is still trigger ajax call but with all value on your form too. Hope it help :)
-
-
MZAweb about 10 yearsThis doesn't seem to be stopping the ajax call... what is your use case for this?
-
amandasantanati about 10 yearsIt will not stop the ajax call but you can add others input=file fields to go with your dropzone form if you want. My case was that I needed to send PDF's files through input=file (not using dropzone) and Images though dropzone (which could be sent or not). If my user didn't sent any images my form would be sent normally though POST but if it was added any image it would be sent via AJAX which didn't allowed to send the PDF's files. So I had to do that. I thought it would be you case.
-
MZAweb about 10 yearsI see. That's not what I need. I want to use dropzone for the UI, but actually submit the form as it if were using input=file for the images, instead of having dropzone make an ajax call.
-
GrégoireC almost 10 years@MZAweb , did you find a solution ?
-
Chronix3 almost 10 years@MZAweb I too am interested in knowing if you did?
-
Asme Just about 9 years@MZAweb I too am interested , did you find a solution about this?
-
MZAweb almost 9 yearsNo, I did not. I just changed my approach to make it work with an AJAX call. Sill would love to find a solution.
-
Suma over 7 yearsThis looks very promissing, however when I try it, the inputs added into
attachmentsInputContainer
seem to be removed from it while processingsetupHiddenFileInput
function. -
I wrestled a bear once. over 7 yearsi think the point of this was to upload the files with ajax and then send the filename in a regular form.. if that's what this is, cool, but that's not what the question is asking. the op want to append file to form, which is just not possible.