S3 Direct Upload + Rails + Dropzone.js

Question

For the past two days i've been trying to create an uploader inside a form using dropzone.js that uploads directly to S3.

Without Dropzone it works fine (followed this tutorial: http://www.blitztheory.com/direct-upload-with-s3_direct_upload/)

The issue is that throughout my platform Dropzone is used extensively and would love to keep the format.

The error that amazon is returning is the following:

<?xml version="1.0" encoding="UTF-8"?> <Error><Code>InvalidArgument</Code><Message>POST requires exactly one file upload per request.</Message><ArgumentValue>2</ArgumentValue><ArgumentName>file</ArgumentName><RequestId>0B044292C584D2F3</RequestId><HostId>X6S+LR28zGb7wftDgG3gKYCWC8SlHI/sr0PN7ICR2oohtFe5BEib9O2+d7n0b9azPEMTA2USlng=</HostId></Error>

Form:

<%= s3_uploader_form callback_url: raffles_url,
  id: "s3_uploader",
  acl: "private",
  callback_param: "direct_upload_url",
  max_file_size: 40.megabytes, class: "dropzone" do %>
  <%= hidden_field_tag  "Content-Type", "" %>
  <%= hidden_field_tag :file, multiple: false %>
<% end %>
<br/>
 
 
<script>
Dropzone.options.myAwesomeDropzone = {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 2, // MB
  uploadMultiple: false
};
</script>

Hope anyone can help

Struggling right now!

All the best Tiago

Answer 1

The reason for this error is, we have two file params, so amazon s3 thinks we trying to send 2 files in the same request.

<%= file_field_tag :file, multiple: false%> 

in the form adding a file param, and dropzone adding another file param, There is two solutions for this.

1. Quick fix - just simply delete the file_field in the form and everything will just works fine.
2. Solution - add a fallback class as below, so that dropzone.js will mute it automatically.

//Like this,

<%= content_tag :div, class: "fallback" do %>
<%= file_field_tag :file, multiple: false%>
<% end %>

When javascript is disabled or not supported, normal input file will show this way.