Rails Amazon S3 direct upload with JQuery File Uploader

Question

I have spent days now trying to make this work. I am getting this error

OPTIONS https://bucketname.s3.oregon.amazonaws.com/ net::ERR_NAME_RESOLUTION_FAILED

I am using Version 43.0.2357.130 Ubuntu 14.04 (64-bit)

Gemfile:

gem "jquery-fileupload-rails"
gem 'aws-sdk'

application.js (after jquery):

//= require jquery-fileupload/basic

application.css:

 *= require jquery.fileupload
 *= require jquery.fileupload-ui

I have a model called uploads that I have generated scaffolds for like this:

rails generate scaffold Upload upload_url:string

uploads_controller.rb:

def new
  @s3_direct_post = Aws::S3::PresignedPost.new(Aws::Credentials.new(ENV['AWS_S3_ACCESS_KEY_ID'], ENV['AWS_S3_SECRET_ACCESS_KEY']), 
                                                "Oregon", ENV['AWS_S3_BUCKET'], {
                                                key: '/uploads/object/test.test',
                                                content_length_range: 0..999999999,
                                                acl: 'public-read',
                                                success_action_status: "201",
                                              })
  @upload = Upload.new
end

_form.html.erb (for uploads):

<%= form_for(@upload, html: { class: "directUpload" }) do |f| %>
......
<div class="field">
  <%= f.label :upload_url %><br>
  <%= f.file_field :upload_url %>
</div>
......
<%= content_tag "div", id: "upload_data", data: {url: @s3_direct_post.url, form_data: @s3_direct_post.fields } do %>
<% end %>

application.js (in the end):

$( document ).ready(function() {
        $(function() {
      $('.directUpload').find("input:file").each(function(i, elem) {
        var fileInput    = $(elem);
        var form         = $(fileInput.parents('form:first'));
        var submitButton = form.find('input[type="submit"]');
        var progressBar  = $("<div class='bar'></div>");
        var barContainer = $("<div class='progress'></div>").append(progressBar);
        fileInput.after(barContainer);
        fileInput.fileupload({
          fileInput:       fileInput,
          url:             $('#upload_data').data('url'),
          type:            'POST',
          autoUpload:       true,
          formData:         $('#upload_data').data('form-data'),
          paramName:        'file', // S3 does not like nested name fields i.e. name="user[avatar_url]"
          dataType:         'XML',  // S3 returns XML if success_action_status is set to 201
          replaceFileInput: false,
          progressall: function (e, data) {
            var progress = parseInt(data.loaded / data.total * 100, 10);
            progressBar.css('width', progress + '%')
          },
          start: function (e) {
            submitButton.prop('disabled', true);

            progressBar.
              css('background', 'green').
              css('display', 'block').
              css('width', '0%').
              text("Loading...");
          },
          done: function(e, data) {
            submitButton.prop('disabled', false);
            progressBar.text("Uploading done");

            // extract key and generate URL from response
            var key   = $(data.jqXHR.responseXML).find("Key").text();

            // create hidden field
            var input = $("<input />", { type:'hidden', name: fileInput.attr('name'), value: url })
            form.append(input);
          },
          fail: function(e, data) {
            submitButton.prop('disabled', false);

            progressBar.
              css("background", "red").
              text("Failed");
          }
        });
      });
    });
    });

Seriously What can I do to fix this?

score 1 · Answer 1 · answered Aug 16 '15 at 23:51

My guess is that you have misconfigured your bucket name / route. The error comes from Amazon, warning you there is no DNS route to https://bucketname.s3.oregon.amazonaws.com/.

It seems to me you need to set the actual bucketname to your bucket name, and also drop oregon from the url. Given that your bucket is named aymansalah, the url will be: https://aymansalah.s3.amazonaws.com/

Review Aws::Credentials documentation and check your environment variables to achieve that URL.

score 1 · Accepted Answer · answered Aug 17 '15 at 01:29

I found the problem. Thanks a lot to felixbuenemann a collaborator in jquery-fileupload-rails

Although that is what I see in the properties (it says Region: Oregon), I have to use "us-west-2" according to this Amazon region documentation

uploads_controller.rb is now:

def new
  @s3_direct_post = Aws::S3::PresignedPost.new(Aws::Credentials.new(ENV['AWS_S3_ACCESS_KEY_ID'], ENV['AWS_S3_SECRET_ACCESS_KEY']), 
                                                "us-west-2", ENV['AWS_S3_BUCKET'], {
                                                key: '/uploads/object/test.test',
                                                content_length_range: 0..999999999,
                                                acl: 'public-read',
                                                success_action_status: "201",
                                              })
  @upload = Upload.new
end

Rails Amazon S3 direct upload with JQuery File Uploader

2 Answers2