-
Notifications
You must be signed in to change notification settings - Fork 70
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Nesting dropzone in existing form? #14
Comments
Thanks, this is a very helpful feature, I will try to implement it this week. |
It seems that there isn't a perfect way to handle this problem. As far as I know, the following thing is easy:
But the problem is, Dropzone.js use AJAX to send files, so we can't merge the files with the normal POST request that created when you click the submit button. The most of the methods in the SO question you posted is append the form data into the AJAX request that created by Dropzone.js, but then it will be hard to get the error messages from server-side when validation fails. |
An alternative method is to send uploads and other form data to different view functions, for example:
However, I can't make the form submit after file upload complete: document.getElementById("submit").addEventListener("click", function(e) {
// prevent submit form first
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue(); // upload files
document.getElementById("submit").click(); // submit other fields --> not work
}); Any idea? |
I finally make the alternative method worked, you can try the demo application in here. |
Trying the demo. Get errors |
@gyrcom Thanks for the feedback! It should be work with the code on master branch, you can install it on local with:
then run the demo with:
|
Thank You |
i tried the code and received this output from server when submitting the form Traceback (most recent call last): wasnt able to upload files i solved it putting items() instead of iteritems() in python3 |
@gabrielggg Yes, you are right, I forgot to add a comment to address this. |
Both python 2 and 3 have a dict.items. There's really no memory or performance benefit to not just using items in both python 2 and 3. |
Hmm, sticky. Assuming we need the files and form data in one function in order to create a database record or something, I can think of three options:
|
Technically, use As for nesting form issue, thanks for your thoughful analysis. I actually trid to implement |
|
I've created a pull request addressing ps. not sure how link the the PR. haven't done this on github before pps. |
You can just type # with the number to link an issue or PR. I agree, it is almost no different for small dict. |
My take was similiar to @Permafacture I was considering generating a random UUID. The images would upload instantly to a '/temp/string:UUID' folder using handle_images_uploads(). The form would submit with UUID to handle_form() and check if there were any images added to the folder. If my understanding's correct though - I don't seem to be able to send the CSRF token twice. So it adds vulnerability to the app. |
I'm also not sure if anyone's seen this |
@harry-wright The current implementation was just inspired by the link you posted. |
Back to this again, the examples work very well, I am trying however, to get in-form working with csrf. |
I've spent a fair lot of time trying lots of options. In-form works well until I try to get csrf working. I do not have the necessary javascript skills to debug this. Has anyone gotten in-form and csrf working together? |
Well I've spent some more time on this. The problem stems from not being able to use the csrf token more than once. My work around has been to start a javascript popup window to implement the dropzone, and when finished, use queuecomplete to then close the popup. I do not think there is any easy answer to integrating dropzone, forms, and csrf. |
Hello Greyli I too spent a lot of time researching this
I have not researched it but the answer seemed to lie in a multi-part form.
I.e. can we use FormData.append() in Flask-wtf? It may be possible to
submit it with the multi-part form (containings strings and images) and
submit it all using ONE csrf token.
Sorry I can't be of more help.
Kind regards
…On Mon, 10 Jun 2019 at 01:39, gyrcom ***@***.***> wrote:
Well I've spent some more time on this. The problem stems from not being
able to use the csrf token more than once. My work around has been to start
a javascript popup window to implement the dropzone, and when finished, use
queuecomplete to then close the popup. I do not think there is any easy
answer to integrating dropzone, forms, and csrf.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#14>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AEH6CQ3IDMNCAIASZB5IOH3PZWPEPANCNFSM4FHCIXOQ>
.
|
@harry-wright Thanks for the tip, I'll have a look at this when I have free time. |
I have a form for posting blog entries. I want to be able to submit multiple fields at once. Instead of designating the class of the form as 'dropzone' is it possible to be able to have a dropzone div nested in my current form so one button will submit all my fields, including multiple image upload, at once?
Something like this stackoverflow question, but with flask-dropzone. Thanx in advance for any assistance!
My form:
The text was updated successfully, but these errors were encountered: