Upload Files Directly To S3 Using Paperclip And Dropzone.js

It’s usually the small time-consuming tasks that frustrate us the most. Such as uploading a file to S3; the requirement is pretty simple but the method chosen to upload the file will decide the efficiency of the task. As uploading files is a feature that most applications require, RailsCarma has compiled a brief tutorial on one of the best methods of getting this task done efficiently: using Paperclip and Dropzone.js.

• Paperclip is a popular choice for uploading images and files as it offers great features to handle the attachments; ‘paperclip’ gem is the go-to option. Paperclip allows you to upload multiple images and files, generate thumbnails and even automatically resize the images. It boasts of a large and active community making it the top choice of most developers.
• Dropzone.js is an open source library with file drag & drop (with image preview) features.
• Amazon S3 is a simple storage device for data storage. We can use it to retrieve images and all type of files.

Why Paperclip?

Paperclip is a popular file uploading tool for the following reasons:

• Supports File Caching:
  If a form fails to validate, we don’t want the user to pick his file again and re-upload it. Therefore, file caching is necessary from a UX standpoint. And it also conserves the bandwidth.

• Processes Images
  Paperclip is able to resize and crop images to several different formats thus allowing the developer to choose the library.

• Simplifies The Task!
  Paperclip gem does not pollute your code and is easy to test!

• Allows File Processing
  Paperclip allows file processing for EXIF data extraction and thumbnail creation of uploaded PDFs, PSDs, DOCs, XLSXs.

• Provides CDN & Storage-Service Support 
  This is a big plus as we want to keep the bandwidth to our servers as low as possible and avoid possible data loss due to server failure.

• Offers On-The-Fly Processing
  Paperclip processes images and files on a per-request basis. This is an innovative feature that enables developers to create custom content that adapts best to different situations.

What Are The Dropzone Asynchronous Events?

• addedfile:  When a file is added to the list.
• removedfile: Used whenever a file is removed from the list. You can listen to this and delete the file from your server if you want to.
• thumbnail: When the thumbnail has been generated. It receives the data URL as second parameter.
• error: An error occurred receives the error message as the second parameter. And if the error was due to xmlhttprequest, the xhr object is received as the third parameter.
• processing: When a file is processed (since there is a queue, not all files are processed immediately). This event was previously called processingfile.
• drop: The user dropped something onto the drop zone.

How Can We Configure Paperclip In Our Application?

• has_attached _file: asset
• :storage => :s3
• :S3_host_name => ENV[“S3_HOST_NAME”]
• :S3_region => ENV[“S3_REGION”]
• :S3_protocol => ENV[“S3_PROTOCOL”]
• :path => “:account_id/:class/:source_id/:attachment/:file_name”,:s3_headers => {‘ContentDisposition’ => ‘attachment’, ‘content-type’ =>‘application/octet_stream’},
  :bucket => ENV[“S3_BUCKET”],
  :s3_credentials => Proc.new{|a| a.instance.s3_credentials}
• Do_not_validate_attachment_file_type :asset
• def s3_credentials
  {:access_key_id => ENV[“S3_ACCESS_KEY_ID”], :secret_access_key => ENV[“S3_SECRET_ACCESS_KEY”]}

end

How Can We Handle Custom Paths In Our Application?

Paperclip.interpolates :attachment do |attachment, style|Image_extension = [“jpg”, “jpeg”, “gif”, “png”, “PNG”, “GIF”, “JPEG”, “JPG”]
extname = File.extname(attachment.instance.asset_file_name).downcase.gsub(/\./, ‘’)
if img_extension.include? (extname)
return “images”
else
return extname
end
end
Paperclip.interpolates :file_name do |attachment, style|file_name = attachment.instance.asset_file_name
End

The data in the S3 bucket can be retrieved whenever required. But it does have one limitation: handling custom paths for different directory structure can be quite cumbersome. Paperclip can be useful in such situations. It is a great tool for uploading and storing images in S3 bucket using AWS.

At Railscarma, we develop and provide cutting edge web application services using ruby’s frameworks for our clients all over the globe.
Want innovative solutions for any other rails development related problem? Get in touch with us now!