CODEWITHSUNDEEP
jqueryruby-on-railsamazon-s3
sks
sks

Reputation: 934

Uploading directly to Amazon S3 with jQuery fileupload plugin

I'm using https://github.com/blueimp/jQuery-File-Upload to upload files to S3 on my Rails app (Installed this gem: https://github.com/tors/jquery-fileupload-rails).

This is my form. As I just need the file uploaded and create the document later, it is not a form_for.

  <%= form_tag 'Bucket URL SNIP', :multipart => true, :id => "fileupload" do %>
  <%= hidden_field_tag 'key', @token %>
  <%= hidden_field_tag 'AWSAccessKeyId', ACCESSKEYSNIP %>
  <%= hidden_field_tag 'acl', 'public-read' %>
  <%= hidden_field_tag 'success_action_status', '200' %>
  <%= hidden_field_tag 'policy', controller.s3_policy_document %>
  <%= hidden_field_tag 'signature', controller.signature %>
  <% end %>

And the jQuery uploader is initialized like this:

  $(function () {

      $('#fileupload').fileupload({

        forceIframeTransport: true

      });

  });

Everything works, I see the UI, but when the file's progress bar finishes, it gives me an error and the file doesn't actually get uploaded.

TypeError: iframe is undefined. (Firefox) TypeError: TypeError: Cannot read property '0' of undefined (Chrome)

What could be the problem?

EDIT:

Looking at the Javascript console, I get an error like this (replaced the real addresses):

Unsafe JavaScript attempt to access frame with URL BUCKETURL from frame with URL SERVERURL. Domains, protocols and ports must match.

Upvotes: 1

Views: 8482

Answers (2)

pjam
pjam

Reputation: 6356

I recently wrote a short tutorial about how to upload directly files to s3, hopefully it'll help you :

http://pjambet.github.com/blog/direct-upload-to-s3/

Upvotes: 7

DavidRH
DavidRH

Reputation: 819

Amazon AWS recently announced support for CORS. This means you don't have to use the iframe method for direct upload to S3. Now you can use HTML5 without worries.

It will also allow you to use features such as drag and drop.

To enable direct HTML5 upload, you just have to adjust your bucket CORS setting in the bucket properties.

Upvotes: 4

Related Questions