Implement directory uploads with jQuery File Upload and Rails

Hi its very easy to use blueimp file upload in rails. Simply you can install gems available for blueimp file upload.Famous are Carrierwave gem & Dragonfly gem. If you have one of this gems , you can use following steps to work on blueimp

Prerequisites

have jQuery setup in your appcopy jQuery File Upload files in the proper directories of your Rails app

ModelsFor use with the Carrierwave gem

We'll use basic Carrierwave uploader:

class AvatarUploader < CarrierWave::Uploader::Base  storage :file  def store_dir    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"  endend

Let's set up a Picture model

class Picture < ActiveRecord::Base  include Rails.application.routes.url_helpers  mount_uploader :avatar, AvatarUploader  #one convenient method to pass jq_upload the necessary information  def to_jq_upload    {      "name" => read_attribute(:avatar),      "size" => avatar.size,      "url" => avatar.url,      "thumbnail_url" => avatar.thumb.url,      "delete_url" => picture_path(:id => id),      "delete_type" => "DELETE"     }  endend

For use with the Dragonfly gem

set up a Picture model (make sure you have both avatar_uid and avatar_name columns in your database)

class Picture < ActiveRecord::Base  include Rails.application.routes.url_helpers  image_accessor :avatar  #one convenient method to pass jq_upload the necessary information  def to_jq_upload    {      "name" => read_attribute(:avatar_name),      "size" => avatar.size,      "url" => avatar.url,      "thumbnail_url" => avatar.thumb('80x80#').url,      "delete_url" => picture_path(:id => id),      "delete_type" => "DELETE"     }  endend

Controller

First one controller to handle the downloads: (html response is for browsers using iframe sollution)

class PicturesController < ApplicationController  def index    @pictures = Picture.all    render :json => @pictures.collect { |p| p.to_jq_upload }.to_json  end  def create    @picture = Picture.new(params[:picture])    if @picture.save      respond_to do |format|        format.html {            render :json => [@picture.to_jq_upload].to_json,           :content_type => 'text/html',          :layout => false        }        format.json {            render :json => [@picture.to_jq_upload].to_json                   }      end    else       render :json => [{:error => "custom_failure"}], :status => 304    end  end  def destroy    @picture = Picture.find(params[:id])    @picture.destroy    render :json => true  endend

And it's routes:

resources :pictures, :only => [:index, :create, :destroy]

Let's play

In whatever view file you want, copy paste this code and enjoy.

<h2><%= t('photos.title') %></h2><%= form_for Picture.new, :html => { :multipart => true, :id => "fileupload"  } do |f| %>        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->        <div class="row fileupload-buttonbar">            <div class="span7">                <!-- The fileinput-button span is used to style the file input field as button -->                <span class="btn btn-success fileinput-button">                    <i class="icon-plus icon-white"></i>                    <span>Add files...</span>                    <%= f.file_field :avatar %>                </span>                <button type="submit" class="btn btn-primary start">                    <i class="icon-upload icon-white"></i>                    <span>Start upload</span>                </button>                <button type="reset" class="btn btn-warning cancel">                    <i class="icon-ban-circle icon-white"></i>                    <span>Cancel upload</span>                </button>                <button type="button" class="btn btn-danger delete">                    <i class="icon-trash icon-white"></i>                    <span>Delete</span>                </button>                <input type="checkbox" class="toggle">            </div>            <div class="span5">                <!-- The global progress bar -->                <div class="progress progress-success progress-striped active fade">                    <div class="bar" style="width:0%;"></div>                </div>            </div>        </div>        <!-- The loading indicator is shown during image processing -->        <div class="fileupload-loading"></div>        <br>        <!-- The table listing the files available for upload/download -->        <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>        </table>    <% end %><script>  var fileUploadErrors = {    maxFileSize: 'File is too big',    minFileSize: 'File is too small',    acceptFileTypes: 'Filetype not allowed',    maxNumberOfFiles: 'Max number of files exceeded',    uploadedBytes: 'Uploaded bytes exceed file size',    emptyResult: 'Empty file upload result'  };</script><!-- The template to display files available for upload --><script id="template-upload" type="text/x-tmpl">{% for (var i=0, file; file=o.files[i]; i++) { %}    <tr class="template-upload fade">        <td class="preview"><span class="fade"></span></td>        <td class="name"><span>{%=file.name%}</span></td>        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>        {% if (file.error) { %}            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>        {% } else if (o.files.valid && !i) { %}            <td>                <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>            </td>            <td class="start">{% if (!o.options.autoUpload) { %}                <button class="btn btn-primary">                    <i class="icon-upload icon-white"></i>                    <span>{%=locale.fileupload.start%}</span>                </button>            {% } %}</td>        {% } else { %}            <td colspan="2"></td>        {% } %}        <td class="cancel">{% if (!i) { %}            <button class="btn btn-warning">                <i class="icon-ban-circle icon-white"></i>                <span>{%=locale.fileupload.cancel%}</span>            </button>        {% } %}</td>    </tr>{% } %}</script><!-- The template to display files available for download --><script id="template-download" type="text/x-tmpl">{% for (var i=0, file; file=o.files[i]; i++) { %}    <tr class="template-download fade">        {% if (file.error) { %}            <td></td>            <td class="name"><span>{%=file.name%}</span></td>            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>            <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>        {% } else { %}            <td class="preview">{% if (file.thumbnail_url) { %}                <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>            {% } %}</td>            <td class="name">                <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>            </td>            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>            <td colspan="2"></td>        {% } %}        <td class="delete">            <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">                <i class="icon-trash icon-white"></i>                <span>{%=locale.fileupload.destroy%}</span>            </button>            <input type="checkbox" name="delete" value="1">        </td>    </tr>{% } %}</script><!-- The jQuery UI widget factory, can be omitted if jQuery UI is already included --><%= javascript_include_tag 'jquery.ui.widget.js' %><!-- The Templates and Load Image plugins are included for the FileUpload user interface --><script src="https://blueimp.github.com/JavaScript-Templates/tmpl.min.js"></script><script src="https://blueimp.github.com/JavaScript-Load-Image/load-image.all.min.js"></script><!-- The Iframe Transport is required for browsers without support for XHR file uploads --><%= javascript_include_tag 'jquery.iframe-transport.js' %><%= javascript_include_tag 'jquery.fileupload.js' %><%= javascript_include_tag 'jquery.fileupload-ui.js' %><!-- add include_tag js files to config.assets.precompile in ...environments/production.rb if you have it in vendor/ assets --><script type="text/javascript" charset="utf-8">    $(function () {        // Initialize the jQuery File Upload widget:        $('#fileupload').fileupload();        //         // Load existing files:        $.getJSON($('#fileupload').prop('action'), function (files) {          var fu = $('#fileupload').data('blueimp-fileupload'),             template;          fu._adjustMaxNumberOfFiles(-files.length);          template = fu._renderDownload(files)            .appendTo($('#fileupload .files'));          // Force reflow:          fu._reflow = fu._transition && template.length &&            template[0].offsetWidth;          template.addClass('in');          $('#loading').remove();        });    });</script>

Using jQuery File Upload (UI version) with a custom server-side upload handler

1. Implement a file upload handler on your platform (Ruby, Python, Java, etc.) that handles normal form based file uploads and upload it to your server. See also the Server-side specific tutorials on the Documentation Homepage.
2. Download and extract the plugin archive.
3. Edit main.js and adjust the url option to the URL of your custom file upload handler. Alternatively you can remove the url option and edit index.html and adjust the action attribute of the HTML form element to the URL of your custom file upload handler. If your upload handler requires another parameter name for the file uploads than files[], you also have to adjust the file input name attribute or set the paramName option (see Options documentation).
4. Upload the jQuery-File-Upload folder to your website.
5. Extend your custom server-side upload handler to return a JSON response akin to the following output:

You can see the Output format by going to https://github.com/blueimp/jQuery-File-Upload/wiki/Setup