waynehoover / s3_direct_upload

Direct Upload to Amazon S3 With CORS

S3DirectUpload

Easily upload files directly to Amazon S3. Multi file uploading supported by jquery-fileupload.

Code extracted from Ryan Bates' gallery-jquery-fileupload.

Installation

Add this line to your application's Gemfile:

gem 's3_direct_upload'

Then add a new initalizer with your AWS credentials:

config/initializers/s3_direct_upload.rb

S3DirectUpload.config do |c|
  c.access_key_id = ""       # your access key id
  c.secret_access_key = ""   # your secret access key
  c.bucket = ""              # your bucket name
  c.region = nil             # region prefix of your bucket url. This is _required_ for the non-default AWS region, eg. "s3-eu-west-1"
  c.url = nil                # S3 API endpoint (optional), eg. "https://#{c.bucket}.s3.amazonaws.com/"
end

Make sure your AWS S3 CORS settings for your bucket look something like this:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>http://0.0.0.0:3000</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

In production the AllowedOrigin key should be your domain.

Add the following js and css to your asset pipeline:

application.js.coffee

#= require s3_direct_upload

application.css

//= require s3_direct_upload_progress_bars

Usage

Use the s3_uploader_form helper to add an s3 upload file field to your view:

<%= s3_uploader_form callback_url: model_url, callback_param: "model[image_url]", id: "s3-uploader" do %>
  <%= file_field_tag :file, multiple: true, data: { url: s3_uploader_url } %>
<% end %>

• It is required that the file_field_tag is named 'file'.
• A unique :id should be added to file_field_tag if there is many 's3_uploader_form' in the page

Then in your application.js.coffee, call the S3Uploader jQuery plugin on the element you created above:

jQuery ->
  $("#s3-uploader").S3Uploader()

Optionally, you can also place this template in the same view for the progress bars:

<script id="template-upload" type="text/x-tmpl">
<div id="file-{%=o.unique_id%}" class="upload">
  {%=o.name%}
  <div class="progress"><div class="bar" style="width: 0%"></div></div>
</div>
</script>

Options for form helper

• callback_url: No default. The url that is POST'd to after file is uploaded to S3. If you don't specify this option, no callback to the server will be made after the file has uploaded to S3.
• callback_method: Defaults to POST. Use PUT and remove the multiple option from your file field to update a model.
• callback_param: Defaults to file. Parameter key for the POST to callback_url the value will be the full s3 url of the file. If for example this is set to "model[image_url]" then the data posted would be model[image_url] : http://bucketname.s3.amazonws.com/filename.ext
• server_side_encryption: Default to nothing. Specifies whether Server-Side encryption should be used to secure uploaded file. See
• key: Defaults to uploads/{timestamp}-{unique_id}-#{SecureRandom.hex}/${filename}. It is the key, or filename used on s3. {timestamp}, {unique_id}, {extension} and {cleaned_filename} are special substitution strings that will be populated by javascript with values for the current upload. {cleaned_filename} is the original filename with special characters removed. ${filename} is a special s3 string that will be populated with the original uploaded file name. Needs to be at least "${filename}" or "${cleaned_filename}". It is highly recommended to use both {unique_id}, which will prevent collisions when uploading files with the same name (such as from a mobile device, where every photo is named image.jpg), and a server-generated random value such as #{SecureRandom.hex}, which adds further collision protection with other uploaders.
• key_starts_with: Defaults to uploads/. Constraint on the key on s3. if you change the key option, make sure this starts with what you put there. If you set this as a blank string the upload path to s3 can be anything - not recommended!
• acl: Defaults to public-read. The AWS acl for files uploaded to s3.
• max_file_size: Defaults to 500.megabytes. Maximum file size allowed.
• id: Optional html id for the form, its recommended that you give the form an id so you can reference with the jQuery plugin.
• class: Optional html class for the form.
• data: Optional html data attribute hash.
• bucket: Optional (defaults to bucket used in config).

Example with all options

<%= s3_uploader_form callback_url: model_url,
                     callback_method: "POST",
                     callback_param: "model[image_url]",
                     key: "files/{timestamp}-{unique_id}-#{SecureRandom.hex}/${filename}",
                     key_starts_with: "files/",
                     acl: "public-read",
                     max_file_size: 50.megabytes,
                     id: "s3-uploader",
                     class: "upload-form",
                     data: {:key => :val} do %>
  <%= file_field_tag :file, multiple: true, data: { url: s3_uploader_url } %>
<% end %>

Example to persist the S3 url in your rails app

It is recommended that you persist the url that is sent via the POST request (to the url given to the callback_url option and as the key given in the callback_param option).

One way to do this is to make sure you have resources model in your routes file, and add a s3_url (or something similar) attribute to your model. Then make sure you have the create action in your controller for that model that saves the url from the callback_param.

You could then have your create action render a javascript file like this: create.js.erb

<% if @model.new_record? %>
  alert("Failed to upload model: <%= j @model.errors.full_messages.join(', ').html_safe %>");
<% else %>
  $("#container").append("<%= j render(@model) %>");
<% end %>

So that javascript code would be executed after the model instance is created, without a page refresh. See @rbates's gallery-jquery-fileupload) for an example of that method.

Note: the POST request to the rails app also includes the following parameters filesize, filetype, filename and filepath.

Advanced Customizations

Feel free to override the styling for the progress bars in s3_direct_upload_progress_bars.css, look at the source for inspiration.

Also feel free to write your own js to interface with jquery-file-upload. You might want to do this to do custom validations on the files before it is sent to S3 for example. To do this remove s3_direct_upload from your application.js and include the necessary jquery-file-upload scripts in your asset pipeline (they are included in this gem automatically):

#= require jquery-fileupload/basic
#= require jquery-fileupload/vendor/tmpl

Use the javascript in s3_direct_upload as a guide.

Options for S3Upload jQuery Plugin

• path: manual path for the files on your s3 bucket. Example: path/to/my/files/on/s3 Note: Your path MUST start with the option you put in your form builder for key_starts_with, or else you will get S3 permission errors. The file path in your s3 bucket will be path + key.
• additional_data: You can send additional data to your rails app in the persistence POST request. This would be accessible in your params hash as params[:key][:value] Example: {key: value}
• remove_completed_progress_bar: By default, the progress bar will be removed once the file has been successfully uploaded. You can set this to false if you want to keep the progress bar.
• remove_failed_progress_bar: By default, the progress bar will not be removed when uploads fail. You can set this to true if you want to remove the progress bar.
• before_add: Callback function that executes before a file is added to the queue. It is passed file object and expects true or false to be returned. This could be useful if you would like to validate the filenames of files to be uploaded for example. If true is returned file will be uploaded as normal, false will cancel the upload.
• progress_bar_target: The jQuery selector for the element where you want the progress bars to be appended to. Default is the form element.
• click_submit_target: The jQuery selector for the element you wish to add a click handler to do the submitting instead of submiting on file open.

Example with all options

jQuery ->
  $("#myS3Uploader").S3Uploader
    path: 'path/to/my/files/on/s3'
    additional_data: {key: 'value'}
    remove_completed_progress_bar: false
    before_add: myCallBackFunction # must return true or false if set
    progress_bar_target: $('.js-progress-bars')
    click_submit_target: $('.submit-target')

Example with single file upload bar without script template

This demonstrates how to use progress_bar_target and allow_multiple_files (only works with false option - single file) to show only one progress bar without script template.

jQuery ->
  $("#myS3Uploader").S3Uploader
    progress_bar_target: $('.js-progress-bars')
    allow_multiple_files: false

Target for progress bar

<div class="upload js-progress-bars">
  <div class="progress">
    <div class="bar"> </div>
  </div>
</div>

Public methods

You can change the settings on your form later on by accessing the jQuery instance:

jQuery ->
  v = $("#myS3Uploader").S3Uploader()
  ...
  v.path("new/path/") #only works when the key_starts_with option is blank. Not recommended.
  v.additional_data("newdata")

Javascript Events Hooks

First upload started

s3_uploads_start is fired once when any batch of uploads is starting.

$('#myS3Uploader').bind 's3_uploads_start', (e) ->
  alert("Uploads have started")

Successful upload

When a file has been successfully uploaded to S3, the s3_upload_complete is triggered on the form. A content object is passed along with the following attributes :

• url The full URL to the uploaded file on S3.
• filename The original name of the uploaded file.
• filepath The path to the file (without the filename or domain)
• filesize The size of the uploaded file.
• filetype The type of the uploaded file.

This hook could be used for example to fill a form hidden field with the returned S3 url :

$('#myS3Uploader').bind "s3_upload_complete", (e, content) ->
  $('#someHiddenField').val(content.url)

Failed upload

When an error occured during the transferm the s3_upload_failed is triggered on the form with the same content object is passed for the successful upload with the addition of the error_thrown attribute. The most basic way to handle this error would be to display an alert message to the user in case the upload fails :

$('#myS3Uploader').bind "s3_upload_failed", (e, content) ->
  alert("#{content.filename} failed to upload : #{content.error_thrown}")

All uploads completed

When all uploads finish in a batch an s3_uploads_complete event will be triggered on document, so you could do something like:

$(document).bind 's3_uploads_complete', ->
    alert("All Uploads completed")

Rails AJAX Callbacks

In addition, the regular rails ajax callbacks will trigger on the form with regards to the POST to the server.

$('#myS3Uploader').bind "ajax:success", (e, data) ->
  alert("server was notified of new file on S3; responded with '#{data}")

Cleaning old uploads on S3

You may be processing the files upon upload and reuploading them to another bucket or directory. If so you can remove the originali files by running a rake task.

First, add the fog gem to your Gemfile and run bundle:

  gem 'fog'

Then, run the rake task to delete uploads older than 2 days:

  $ rake s3_direct_upload:clean_remote_uploads
  Deleted file with key: "uploads/20121210T2139Z_03846cb0329b6a8eba481ec689135701/06 - PCR_RYA014-25.jpg"
  Deleted file with key: "uploads/20121210T2139Z_03846cb0329b6a8eba481ec689135701/05 - PCR_RYA014-24.jpg"
  $

Optionally customize the prefix used for cleaning (default is uploads/#{2.days.ago.strftime('%Y%m%d')}): config/initalizers/s3_direct_upload.rb

S3DirectUpload.config do |c|
  # ...
  c.prefix_to_clean = "my_path/#{1.week.ago.strftime('%y%m%d')}"
end

Alternately, if you'd prefer for S3 to delete your old uploads automatically, you can do so by setting your bucket's Lifecycle Configuration.

A note on IE support

IE file uploads are working but with a couple caveats.

• The before_add callback doesn't work.
• The progress bar doesn't work on IE.

But IE should still upload your files fine.

Contributing / TODO

This is just a simple gem that only really provides some javascript and a form helper. This gem could go all sorts of ways based on what people want and how people contribute. Ideas:

• More specs!
• More options to control file types, ability to batch upload.
• More convention over configuration on rails side
• Create generators.
• Model methods.
• Model method to delete files from s3

Credit

This gem is basically a small wrapper around code that Ryan Bates wrote for Railscast#383. Most of the code in this gem was extracted from gallery-jquery-fileupload.

Thank you Ryan Bates!

This code also uses the excellent jQuery-File-Upload, which is included in this gem by its rails counterpart jquery-fileupload-rails

s3_direct_upload's Issues

Form not posted

Hi,

I change my project to activate Assets and it works fine (css, js etc.)

But, when I try to post my form nothing happens !

The S3 form seems to be ok.

My template need JQuery 1.8.3 so I include it in my application.html.erb, is it a problem ? I don't know which version Rails use, but is it possible there is a conflict ?

Thanks for your help !

Difficult to override starts-with policy on key

A malicious user could alter the key field in the form to upload to an unexpected location within your bucket, even replacing an existing file.

Incompatible with JQuery 1.9

As per #46

Amazon returns a Forbidden 403 on posts following an update of the jquery-rails gem from 2.1.4 to 2.20, which upgrades JQuery from 1.8.3 to 1.9. Upon analyzing the request headers, it looks like the file data is not being correctly passed in 1.9.

Callback URL not taking place

my callback_url seems to work great in development mode, but when deploying nothing gets triggered. Any reason why this may happen?

Random string path should be regenerated by JavaScript for each file

I've run into an issue where uploads with the same file name are over writing each other, because the same server-generated path is being used for every file. This is particularly problematic for mobile uploads, where every photo from your camera roll gets named image.jpg by iOS.

A unique path should be generated for every upload:

key: "uploads/${JavaScript generated path}/${filename}"

Could we use the existing uniqueid js var? I'm currently looking into if it could be appended when generating the data path in the formData method.

MaxPostPreDataLengthExceeded

Just tried this gem for the first time and it doesn't work out of the box. I'm getting a bad request error back from amazon with the following error:

<?xml version="1.0" encoding="UTF-8"?>
<Error><Code>MaxPostPreDataLengthExceeded</Code><Message>Your POST request fields preceeding the upload file was too large.</Message><MaxPostPreDataLengthBytes>20480</MaxPostPreDataLengthBytes><RequestId>9D23B2C9005839DC</RequestId><HostId>tzLn4c+k9tWoF69pDLBmwDdkHHrHuMR/yNYXi0oeIjaqr72HUGUnPsvwjqnIuLbk</HostId></Error>

Put method ?

Is it possible to implement a PUT method as the post one.

My uploaded file_url is a part of a document containing some informations as "name", "description" etc.

I would like to be able to update the file_url for a specific document.

So I tried to use the code in my form :

<%= s3_uploader_form post: edit_medium_path(@Medium), as: "medium[file_url]", id: "myS3Uploader" do %>
<%= file_field_tag :file, multiple: false %>
<% end %>

But, it doesn't work cos update method need PUT not POST.

I tried to use the Create method passing the id with the data: option but I don't really understand how to use it and if it is possible.

Thanks for your help.

Stephane

can't convert Array into String

I'm probably missing something obvious but i'm getting this error when attempting to load the page.

It occurs on Line 17.

14:

15:
16:
17: <%= s3_uploader_form callback_url: photographs_url, callback_param: "photograph[image_url]", id: "myS3Uploader" do %>
18: <%= file_field_tag :file, multiple: true %>
19: <% end %>
20:

very strange behavior of access policy

I'm trying to implement this functionality in my application.

What I've got:

Request URL:http://s3.amazonaws.com/application/
Request Method:OPTIONS
Status Code:403 Forbidden

Accept:/
Accept-Encoding:gzip,deflate,sdch
Accept-Language:pl-PL,pl;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, origin, content-type
Access-Control-Request-Method:POST
Connection:keep-alive
Host:s3.amazonaws.com
Origin:http://application.dev
Referer:http://application.dev/lectures/51a3731d6206ad2f35000001

CORS setup:
{:id=>"application.dev", :allowed_methods=>["HEAD", "PUT", "POST", "GET", "DELETE"], :allowed_origins=>["htpp://application.dev"], :allowed_headers=>["*"], :max_age_seconds=>3600}

So It doesn't work but when I add button to form like this

= s3_uploader_form callback_url: lecture_url, callback_method: :put ,callback_param: "lecture[video]", id: "myS3Uploader", key: "uploads/lectures/#{SecureRandom.hex}/${filename}", ssl: false do
  = hidden_field_tag  "Content-Type", ""
  = file_field_tag :file
  %button.submit-target Submit

and file path is chosen (firefox) and click on button
it redirects me to my bucket on s3 with xml

  <PostResponse><Location>http://s3.amazonaws.com/application/uploads%2Flectures%2Fc582a31ffd7e4a419bdc6ce3ade99390%2Fsmall.mp4</Location><Bucket>application</Bucket><Key>uploads/lectures/c582a31ffd7e4a419bdc6ce3ade99390/small.mp4</Key><ETag>"a3ac7ddabb263c2d00b73e8177d15c8ad"</ETag></PostResponse>

and file is uploaded to AWS.

in js.coffee

$("#myS3Uploader").S3Uploader()

when i add option to js:

$("#myS3Uploader").S3Uploader()
  click_submit_target: $('.submit-target')

it gets 403 forbidden like original request.

What is going on?
It looks like OPTIONS is not allowed but it can send to bucket file from form with button without js.

So I can send file directly to AWS from form but I cannot with jQuery request.

Interrupt upload

Hi,
love this; we deal with large files a lot; is there any way to make the progress bars interruptible? i.e. they would have a link on them to stop the upload.
Not sure how difficult that would be. Any suggestions welcome.
thnx

Policy Condition failed: ["starts-with", "$Content-Type", ""] error

Any ideas why this would be happening?

AccessDenied Invalid according to Policy: Policy Condition failed: ["starts-with", "$Content-Type", ""] D7C6C1FE8775221F 5qRPVAAM/6iZF0w8vfOlrm67FXoCiDZyDeZklt/lL2ndLb4+/Cry4JclqN/Zsw7L

Managing uploads down the road

Hi folks. First off, cheers for putting the work into this gem. Please forgive this "issue" which is more of a question, but one that I haven't seen answered anywhere. My experience up until now has been with Paperclip, and the clear object/s3 upload relationship that exists:

photo.rb

class Photo < ActiveRecord::Base
has_attached_file :image

photo.create(:image => params[:file]) # => creates a photo object, uploads the image to s3, and sets metadata
photo.image # => returns image object
photo.image = nil # => deletes the image on s3
photo.destroy # deletes the photo object and deletes the image on s3

I'm wondering how you guys are handling callbacks, resizing, and such with direct upload methods like this gem. Also deleting s3 assets if the record is deleted.

Enlightenment appreciated.

Need to push latest version to rubygems.org?

Trying to use:

S3DirectUpload.config do |c|
  c.url = "https://test.bucket.com"
end 

Results in:

NoMethodError: undefined method `url=' for #<S3DirectUpload::Config:0x0000010352dd80>
~/Code/app/config/initializers/s3_direct_upload.rb:2:in `block in <top (required)>'
~/.rbenv/versions/1.9.3-p0/lib/ruby/gems/1.9.1/gems/s3_direct_upload-0.1.2/lib/s3_direct_upload/config_aws.rb:14:in `config'

Gemfile said I had the latest version, had to fix by adding the git repo to my gemfile.

gem 's3_direct_upload', :git => "https://github.com/waynehoover/s3_direct_upload.git"

content.url doesn't match S3 download link (encoding issue)

Hello,

Great gem you have over here, very helpful.

When I upload a file like chrome & canary + something.jpg, content.url returns the exact same thing, but the actual S3 link is chrome+%26+canary+%2B+something.jpg. If I try and visit what content.url returned, I get an access denied error from S3, but really that's because no file exists there.

I believe this has to do with escaping/encoding ampersands, pluses, and spaces.

Any ideas how to solve this? Thanks!

How to add additional S3 metadata?

I'd like to add Content-Disposition: attachment to all uploaded files so that if the download link is visited, browsers are forced to download the file.

For example if you hit the download URL for an mp3 without Content-Disposition: attachment, Chrome will just stream the mp3 in the browser. But if you set Content-Disposition: attachment, Chrome will download the file.

Thanks!

Need to be able to overwrite the form url

It seems that AWS S3 API has changed endpoint url to:
https://{bucket}.s3.amazonaws.com/
instead of
https://{region}.amazonaws.com/{bucket}/

It would be nice if we were able to overwrite the API url on the configuration.

Great job!

JS Hook: s3_uploads_start does not fire

complete and failed hooks worked except for start. I double-checked the spellings and to no avail.

file_path inconsistent

The file_path built in build_content_object is inconsitent between browsers like chrome and IE. In IE the bucket name and filename is not included but in chrome they are. Also in chrome the path is escaped, but not in IE:

Chrome:

/bucket/escaped_path/escaped_filename

IE:

unescaped_path

This causes issues later when working with the path serverside.

Better handling of errors

This is the fail function that is used right now when an upload doesn't complete :

fail: (e, data) ->
  alert("#{data.files[0].name} failed to upload.")
  console.log("Upload failed:")
  console.log(data)

We should be able to customize this part. I'm not sure what is the best way to to this. Should we remove the actual fail code and just trigger a failed event. Or should this be the default behaviour that can be optionally be overriden by an initialization parameter ?

Restrict certain file types

Has anyone successfully implemented the ability to restrict certain file types from being uploaded? I'm looking to prevent my users from uploading PDF's.

Customize Filenames

Need the ability to change the filename before it gets uploaded to S3.

For instance, the original filename is "picture.jpg" and need to rename it to "2012_01_31_picture.jpg".

Oversized files should be pre-empted prior to upload

I noticed during a rudimentary test today that the max_file_size param correctly limits uploads with s3, but an error is only thrown when s3 reaches its policy limit. Oversized files should not be addable in the first place, or should give an immediate error and be removed from the queue.

Missing s3_upload_complete upload complete trigger

There is no callback triggered for each individual file.

Nulogy has implemented a solution https://github.com/nulogy/s3_direct_upload

$uploadForm.trigger("s3_upload_complete", [content])

Syntax error from the progress bar template

I am getting this javascript error in the browser when I am trying to upload a file.

Uncaught Error: Syntax error, unrecognized expression: <div class='upload' id='file-jvrw6xn741i9hpvi'>
          june-12-chromatic_baba__95-nocal-1920x1200.jpg
          <div class='progress'>
            <div class='bar' style='width: 0%'></div>
          </div>
        </div> 

Am I missing something?

CORS troubles

Any idea whey I consistently get "Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin." error on s3?

I've tried several different projects to get this working including the Ryan Bates Screencast and this one: http://pjambet.github.com/blog/direct-upload-to-s3/. Always the same result. My app works fine with a standard carrierwave direct upload (so I know my bucket and credentials are ok). But once I introduce ajax into the mix 100% failure with the error above.

I saw this bug reported: http://code.google.com/p/chromium/issues/detail?id=67743 so I switched from chrome to safari and then firefox. Same result. I deleted my bucket and recreated and reset up CORS. I tried CORS with http://0.0.0.0:3000, http://localhost:3000, * for the allowed origin.

Any ideas? Driving me nuts.

Rake task doesn't load S3DirectUpload.config

I dropped my S3DirectUpload.config in an initializer, however this doesn't load when running

rake s3_direct_upload:clean_remote_uploads

saying that Missing required arguments: aws_access_key_id, aws_secret_access_key

Seems the rake task needs :environment.

task :clean_remote_uploads => :environment do

I forked and made the change locally without success, any thoughts? I think my local version of the gem may not have been loading, as that should be the fix (I think).

No Assets Pipeline

Hi,

I don't use the Assets Pipeline in my projet it was a bit hard for this first project to use it with the theme I use (many js and css), so, is there a way to use this gem with no assets pipeline ?

Thanks

c.url causes error

I followed the documentation and it resulted in the error below. Once c.url = "" was removed from the s3_direct_upload.rb file, the problem fixes.

14:39:13 web.1    | /home/9dosl/Project-X/config/initializers/s3_direct_upload.rb:8:in `block in <top (required)>': undefined method `url=' for #<S3DirectUpload::Config:0x007f9126c88fc0> (NoMethodError)
14:39:13 web.1    |     from /Users/hg/.rvm/gems/ruby-1.9.3-p392-railsexpress@px/gems/s3_direct_upload-0.1.2/lib/s3_direct_upload/config_aws.rb:14:in `config'
14:39:13 web.1    |     from /home/9dosl/Project-X/config/initializers/s3_direct_upload.rb:3:in `<top (required)>'

How to Add An Input to POST Form Specifying Content-Type

I'd like to limit my form to upload images only. I've written some javascript to check file formats, but I don't feel this is secure enough. There is no policy setting on S3 to have it deny unapproved file formats, but I've read that I can include an input in my POST form that will specify the file formats Amazon S3 should expect on POST. I'm not yet sure how this work, but I'm hoping it will result in not submitting files other than image types.

Here is the input I would like to include. Will this work as I expect? And how can I include it in the form?

Thanks & great gem!!!

Question: Working on Browsers not supporting XHR (IE) ?

Hi,

I am having a hard time to try to upload directly to S3 using JS. I want to be compatible with IE < 10 also and then have to forget about XHR requests...

I wonder if your plugin handle iFrame POST request or not ?

Thanks

js error

hi, i'm probably missing something very stupid, but I get this js error on page load:

Uncaught TypeError: Object function (b,c,d){var e=b.split(".")[0],f;b=b.split(".")[1],f=e+"-"+b,d||(d=c,c=a.Widget),a.expr[":"][f]=function(c){return!!a.data(c,b)},a[e]=a[e]||{},a[e][b]=function(a,b){arguments.length&&this._createWidget(a,b)};var g=new c;g.options=a.extend(!0,{},g.options),a[e][b].prototype=a.extend(!0,g,{namespace:e,widgetName:b,widgetEventPrefix:a[e][b].prototype.widgetEventPrefix||b,widgetBaseClass:f},d),a.widget.bridge(b,a[e][b])} has no method 'extend'

jquery.ui.widget.js:236

any input much appreciated

Error when trying to upload

I'm getting this error in the Chrome Inspector when selecting files to upload:

Uncaught Error: Syntax error, unrecognized expression: <div class="upload">
  Screen Shot 2013-01-21 at 2.41.58 PM.png
  <div class="progress"><div class="bar" style="width: 0%"></div></div>
</div> 

Any ideas what is happening? Here is my view:

<%= s3_uploader_form post: new_asset_url, as: "asset[asset]", id: "myS3Uploader" do %>
    <%= file_field_tag :asset, multiple: true %>
 <% end %>

Routes:

post "/assets/new" => "assets#create", :as => :new_asset

//= require jquery
//= require best_in_place
//= require jquery_ujs
//= require jquery.ui.all
//= require jquery-fileupload/basic
//= require jquery-fileupload/vendor/tmpl
//= require s3_direct_upload

Change bucket region for uploading

Hi,

May I know where to pass the options for the bucket region? Currently my bucket is located in the asia pacific region and requires a url like https://s3-ap-southeast-1.amazonaws.com but the upload is currently pointing to https://s3.amazonaws.com as the default. Am I able to set it in the initialiser file:

S3DirectUpload.config do |c|
c.access_key_id = CONFIG[:aws_access_key_id] # your access key id
c.secret_access_key = CONFIG[:aws_secret_access_key] # your secret access key
c.bucket = CONFIG[:aws_s3_bucket] # your bucket name
c.region = CONFIG[:aws_s3_region] # Is this possible?
end

Thanks!

File chunking (More of a question)

Hi Wayne,

Sorry to pollute your issue tracker with this but it is more of a question. I also posted it over the comment thread for the RailsCasts where I found the link to this gem.

Hopefully you may be able to shed some light, otherwise please disregard and delete.

Again sorry for polluting

Cheers

Luke

http://railscasts.com/episodes/383-uploading-to-amazon-s3?view=comments

File chunking.

maxChunkSize: 1000000

I am finding that this directive is working for me. However S3 is not merging the file back together at their end.

I am only getting the last chunked bit of the file appearing in the folder.

I have found this

http://aws.amazon.com/articles/1109?_encoding=UTF8&jiveRedirect=1#14

But am a little unsure what to make of it. Was wondering if anyone else has come across this issue as it is pretty cool feature jquery upload. I am uploading video files and so being able to do it in batches means that their is less chance of file failure.

Hope someone can shed some light.

Kind regards,

Luke

403 Forbidden issue

I was successful at using carrierwave_direct and decided to switch to jquery file upload.
The app throws these errors as I try to upload a test image file to AWS. Do you know what possibly causes the issues.

+++ OPTIONS https://test-bucket.s3.amazonaws.com/ 403 (Forbidden)

send jquery.js:8417
jQuery.extend.ajax jquery.js:7969
send jquery.fileupload.js:652
$.widget._onSend jquery.fileupload.js:714
newData.submit jquery.fileupload.js:753
$uploadForm.fileupload.add s3_direct_upload.js:31
$.Widget._trigger jquery.ui.widget.js:278
(anonymous function) jquery.fileupload.js:756
jQuery.extend.each jquery.js:612
$.widget._onAdd jquery.fileupload.js:746
(anonymous function) jquery.fileupload.js:883
fire jquery.js:975
self.add jquery.js:1019
promise.always jquery.js:1116
$.widget._onChange jquery.fileupload.js:877
jQuery.event.dispatch jquery.js:3064
elemData.handle.eventHandle

+++ XMLHttpRequest cannot load https://test-bucket.s3.amazonaws.com/. Origin http://localhost:3000 is not allowed by Access-Control-Allow-Origin.

IE8/9/10

Does this work with IE 8/9/10?

Other information in progress bar

This might not be the place to bring this up, as it relates more to jquery upload, or more specifically where it interfaces with S3, but....

Is it possible to have the progress bar display more info - speed, amount uploaded already, estimated time. Is there any more data on whatever object handles the upload available for display?

Resize image before upload

Hi,

Is there a way to resize images to a specific size before uploading to S3 ?

Thanks

S3 Url Format

This may be something that I can fix on the S3 side of things that I just currently don't know about, however the URL that this gem is requesting is https://s3.amazonaws.com/bucket/ is there no way to use https://bucket.s3.amazonaws.com ? That is what I have used with Carrierwave and every other gem out there using S3 as a storage system. Is there a setting in S3 I need to change, or could this become an option in the config?

Edit: This was a foolish typo error. Ignore this issue.

Question: Single uploads?

Hi all, sorry for asking a question in the issues section. Is there any way to use this gem for single uploads only?

I have this gem working great with multiple uploads, but on some pages I want to limit it to single uploads if possible (for example, uploading user avatars)

Many thanks!

UTF8 file name encoding problem with Chrome

I'm having a weird character encoding issue and I have been banging my head on the wall for most of the afternoon about this.

If I try to upload an image named léo.jpg, it will work fine with Firefox and but fails to render the uploaded image in Chrome. The problem seems to be that Chrome uses precomposed characters for the encoding the filename while Firefox uses combining characters.

At some point (not sure where yet), the filename gets converted to combining characters and that breaks Chrome rendering. I just tried the Railscasts demo to make sure it wasn't just my code and the same happens. Chrome uploads the image to S3 but fails to render it since it uses a different encoding to query S3 for the file (both are legal UTF-8).

I'm not sure if I'm being clear but can you confirm you get the same behaviour ?

Firebug XML Parsing Error

This is a minor annoyance but when I do an upload and take look at the XML response from S3 in Firebug, I have this error :

XML Parsing Error: no element found Location: moz-nullprincipal:{075407ee-9c00-d443-a2f1-6721c3327352}

I also tried with the Railscasts source example and get the same error. But the upload works fine with all the callbacks. The only problem seems to be that the progress bar never get to 100%. I don't see this error message in Chrome and the progress bar works fine all the way to 100%.

Can you confirm Firebug gives you the same error? I searched for an explanation and tried different things but couldn't get rid of it.

Image previews

I'd like to integrate some of the file preview functionality from jquery file upload.

Would that be useful as part of this project? I'm happy to provide a pull request, just need some guidance to find the right places to hook it up.

Routing Errors

Hi,

Sorry I'm a bit new in ROR world, so I probably miss something but, when I try to display the S3 Form I've a routing errors.

Form code :

<%= s3_uploader_form post: medium_url, as: "Medium[url]", id: "myS3Uploader" do %>
<%= file_field_tag :file, multiple: true %>
<% end %>

Error :

No route matches {:action=>"show", :controller=>"media"}

I don't really understand cos, the previous code is in my _form for a new medium not in the show.html.erb

I tried to add that kind of routes but it doesn't change anything :

post 'medium_url', to: 'medium#new', as: 'medium_url'

So, I want to display the S3 Upload Form in my media/new page, uploading the file on my S3 and recording the url in my Medium model (url field).

I miss understand something :(

Thanks for your help

Resource failing to load

Why am I running into:

OPTIONS https://.amazonaws.com/bucketname/ Resource failed to load

Thanks!

Issue with timestamp/unique_id

Since the most recent release added this designation, I've been seeing filenames like this end up in my uploads:

https://s3.amazonaws.com/assets.xxx.com/uploads/{timestamp}-{unique_id}-8df4a31f34296a8f05cf152164fa5967/1.jpg

It seems like in some cases, the browser is not correctly replacing the timestamp and unique_id variables on upload. Is there any way to troubleshoot this issue?

IE 8/9 compatibility

I'm testing this with IE and although the upload gets done to S3, the Done callback never seems to execute. Is this a known issue ?

IE10 Windows 8 access denied issue

Hello,

I am working on an issue in IE10. The uploads always seem to fail, the error thrown is: Error: access denied. This is only happening for IE10, is there something about the CORS file that could be off?

Thanks,
Cory

Invalid according to Policy: Extra input fields: content-type

Any ideas why I'm getting this 403 error?

AccessDenied
Invalid according to Policy: Extra input fields: content-type

It seems that the '$Content-type' part of the policy is ending up 'content-type', and S3 doesn't seem to like that very much.

Can't nest file upload form into another form

I am currently implementing a form to create and edit products. Apart from a title and price, the user should be able to upload a picture. As far as I see the picture upload have to be wrapped into its own form, am I right? Do you think it would be possible to refactor the (really great!) s3_direct_upload plugin so that it doesn't require a form but operates on a div instead (as discussed in blueimp/jQuery-File-Upload#76 , for example)? Or am I missing something?