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?

dgilperez · Accepted Answer · 2015-08-16 23:51:02Z

1

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.

answered Aug 16, 2015 at 23:51

dgilperez

10.8k8 gold badges72 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ayman Salah · Accepted Answer · 2015-08-17 01:29:06Z

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

Collectives™ on Stack Overflow

Rails Amazon S3 direct upload with JQuery File Uploader

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related