Jquery Direct File Upload to S3 using Paperclip

Question

I am trying to upload book pages directly to AmazonS3 using Paperclip, Jquery, and Rails 3.0 using this Tutorial.

So far, I've set up the database, my config/initializers files, & CORS. I am also using these gems:

gem 'aws-sdk'
gem 'paperclip' 
gem 's3_direct_upload'

For some reason, after I upload a Books Page, I get this error:

ERROR

NoMethodError (undefined method `[]' for nil:NilClass):

I am not sure why this keeps happening. let me know if you need me to post anything else.

JS.COFFEE

jQuery ->
  $('#new_book_page').fileupload
    dataType: "script"
    add: (e, data) ->
      types = /(\.|\/)(gif|jpe?g|png)$/i
      file = data.files[0]
      if types.test(file.type) || types.test(file.name)
        data.context = $(tmpl("template-upload", file))
        $('#new_book_page').append(data.context)
        data.submit()
      else
        alert("#{file.name} is not a gif, jpeg, or png image file")
    progress: (e, data) ->
      if data.context
        progress = parseInt(data.loaded / data.total * 100, 10)
        data.context.find('.bar').css('width', progress + '%')

$ ->
  $("#s3_uploader").S3Uploader
    remove_completed_progress_bar: false
    progress_bar_target: $("#uploads_container")

  $("#s3_uploader").bind "s3_upload_failed", (e, content) ->
    alert content.filename + " failed to upload. Error: " + content.error_thrown

  return

MODELS

class BookPage < ActiveRecord::Base
  attr_accessible :caption, :book_id, :page, :direct_upload_url, :page_file_path,
              :page_content_type, :page_file_size, :page_file_name, :page_updated_at

  DIRECT_UPLOAD_URL_FORMAT = %r{\Ahttps:\/\/s3\.amazonaws\.com\/bucketname#{!Rails.env.production? ? "\\-#{Rails.env}" : ''}\/(?<path>pages\/.+\/(?<filename>.+))\z}.freeze

  belongs_to :books

  has_attached_file :page, 
                :styles => { :small => "200x200>" },
                :storage => :s3,
                :bucket => 'bucketname',
                :s3_credentials => {
                  :access_key_id => 'XXXXXX',
                  :secret_access_key => 'XXXXXX',
                }

  before_create :set_page_attributes

  def direct_upload_url=(escaped_url)
    write_attribute(:direct_upload_url, (CGI.unescape(escaped_url) rescue nil))
  end

  def post_process_required?
    %r{^(image|(x-)?application)/(bmp|gif|jpeg|jpg|pjpeg|png|x-png)$}.match(page_content_type).present?
  end

  protected

  def set_page_attributes
    tries ||= 5
    direct_upload_url_data = DIRECT_UPLOAD_URL_FORMAT.match(direct_upload_url)
    s3 = AWS::S3.new

    ###THE ERROR IS GENERATED HERE
    direct_upload_head = s3.buckets[Rails.configuration.aws[:bucket]].objects[direct_upload_url_data[:path]].head

    self.page_file_name     = direct_upload_url_data[:filename]
    self.page_file_size     = direct_upload_head.content_length
    self.page_content_type  = direct_upload_head.content_type
    self.page_updated_at    = direct_upload_head.last_modified
  rescue AWS::S3::Errors::NoSuchKey => e
    tries -= 1
    if tries > 0
      sleep(3)
      retry
    else
      false
    end
  end

ends

VIEWS

###When I submit this I get my COFFEE error
<%= s3_uploader_form callback_url:([book_book_pages_url]),
  id: "s3_uploader",
  acl: "private",
  callback_param: " book_page[direct_upload_url]" do %>
  <%= file_field_tag :page, multiple: false %>
<% end %>

###If I submit here, I can see my LOGS which state the error above
<%= form_for ([@book, BookPage.new]) do |f| %>

    <%= render 'shared/error_messages', object: f.object %>

    <%= f.file_field :page, multiple: true %>

    <%= f.hidden_field :direct_upload_url %>

    <%= f.hidden_field :page_file_name %>
    <%= f.hidden_field :page_file_size %>
    <%= f.hidden_field :page_content_type %>

    <%= f.hidden_field :page_file_path %>

    <%= f.submit "Upload" %>
<% end %>

<div id="uploads_container"></div>

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

ROUTES

resources :books do
  resources :book_pages
end

LOGS

Started POST "/books/1732/book_pages" for 127.0.0.1 at 2014-06-20 19:38:31 -0700

Processing by BookPagesController#create as JS

  Parameters: {"utf8"=>"✓", "authenticity_token"=>"2pzDw3HYOg+pkc6Q8vPHwnAzVsX1dcNNf9COD6x0aI8=", 
    "book_page"=>{"direct_upload_url"=>"", "page_file_name"=>"", "page_file_size"=>"", 
    "page_content_type"=>"", "page_file_path"=>"", 
    "page"=>[#<ActionDispatch::Http::UploadedFile:0x007ffa70e77490 
    @original_filename="Ultimate.jpg", @content_type="image/jpeg", 
    @headers="Content-Disposition: form-data; name=\"book_page[page][]\";
    filename=\"Ultimate.jpg\"\r\nContent-Type: image/jpeg\r\n", 
    @tempfile=#<File:/var/folders/11/4mfc2tgd32bdq1t3y_sq_q580000gq/T/
    RackMultipart20140620-67389-dcy9nj>>]}, "book_id"=>"1732"}

Completed 500 Internal Server Error in 19ms

Answer 1

I know this is a little dated, and I'm sure you've solved this, but right off the bat, I'm seeing you're using write_attribute(:direct_upload_url, (CGI.unescape(escaped_url) rescue nil)) to set an attr_accessor :direct_upload_url .

You should do: @direct_upload_url = (CGI.unescape(escaped_url) rescue nil)

My guess is the missing array is because write_attribute is equivalent to self["attribute"] = "some value" , and there is no column mapping for direct_upload_url .

However, you should probably make direct_upload_url an actual column on that table, because it will not persist through multiple requests. While that may not be necessary, it's also a good indicator inside of views that, if that value is present, it has not been uploaded and processed yet.