Upload files with form using dropzone

Phoenix Forum Questions / Help
,
1

There’s an interesting project that was done by Etsy to do post-mortem’s for issues that arise in production environments. I’m trying to convert to Elixir/Phoenix but having trouble with integrating dropzone.js with Phoenix form to do file attachments. trying to follow this: https://gitlab.com/meno/dropzone/wikis/combine-normal-form-with-dropzone but my form submission is called as soon as I drag files to the dropzone. Here’s my template: https://gist.github.com/fmcgeough/9617d651339d6925b677af8279b46fb9

has someone done something like this already? Any hints on what it is I’m possibly doing wrong?

1 Like
2

What are the parameters that you get from the submission? Is it just the file?

Usually, the file uploads are submitted as soon as they are uploaded into the browser to avoid uploading all of them at once on form submission which can be perceived as a lag by the end user.

3

In this case I want the submission of files to be tied to use clicking Submit. What happens now is as soon as files ar dragged the form submission occurs.

4

When instantiating your dropzone instance you can pass callback definitions along with the options, one of those is the accept callback in which you can have logic (for instance retrieve a S3 signature key from your back-end) and prevent the upload from starting by simply returning without calling done() (if I’m not mistaken, check their docs)

5

thank you. yes. I’ve puzzled it out. I’ll hopefully do a small github project that demos a couple of different approaches.

1 Like
6

hello, any news on a demo ?

7

thanks for reminding me about this @niccolox — I dropped the ball on getting this together. I’ll hopefully get back to it soon.

1 Like
8

This is my “me too” post…

9

I hear ya. I’m putting a project together now that demonstrates a few examples. I’ll post here when the repo is up on github.

1 Like
10

Cool, I’m putting something together myself with Arc, ex_aws and a basic form upload. So far so good.

2 Likes
11

Had you any issues with browser compatibility? If you could write a quick guide on how to achieve a basic setup with arc, ex_aws and dropzone that would be great for the community.

12

I gave up on phoenix for this particular task and decided to have a separate vue.js SPA instead(which isn’t done yet).