Commit 8dc0161a

mo k <mo@mokhan.ca>
2012-10-25 12:41:11
use jquery file upload plugin.
1 parent e19d8fa
app/controllers/photos_controller.rb
@@ -1,26 +1,45 @@
 class PhotosController < ApplicationController
   before_filter :authenticate_user!
   before_filter :find_creation
-  before_filter :find_or_build_photo
+  #before_filter :find_or_build_photo
+
+  def index
+    @photos = @creation.photos
+    respond_to do |format|
+      format.html # index.html.erb
+      format.json { render json: @photos.map { |p| p.to_jq_upload } }
+    end
+  end
 
   def new
     @photo = Photo.new
-    @creation = Creation.find(params[:creation_id])
   end
 
   def create
+    p_attr = params[:photo]
+    p_attr[:image] = params[:photo][:image].first if params[:photo][:image].class == Array
+
+    @photo = @creation.photos.build(p_attr)
     if @photo.save
-      redirect_to new_creation_photo_url(@photo.creation, :notice => 'A new photo was added to the album.')
+      respond_to do |format|
+        format.html {
+          render :json => [@photo.to_jq_upload].to_json, :content_type => 'text/html', :layout => false
+        }
+        format.json {
+          render :json => [@photo.to_jq_upload].to_json
+        }
+      end
     else
-      flash[:error] = "could not upload photo"
+      render :json => [{:error => "custom_failure"}], :status => 304
     end
   end
 
   def destroy
+    @photo = @creation.photos.find(params[:id])
     if @photo.destroy
-      redirect_to(@creation, :notice => 'A new photo was added to the album.') 
+      render :json => [@photo.to_jq_upload].to_json
     else
-      flash[:error] = "photo could not be deleted"
+      render :json => [{:error => "could not remove the photo"}], :status => 304
     end
   end
 
@@ -30,7 +49,7 @@ class PhotosController < ApplicationController
     raise ActiveRecord::RecordNotFound unless @creation
   end
 
-  def find_or_build_photo
-    @photo = params[:id] ? @creation.photos.find(params[:id]) : @creation.photos.build(params[:photo])
-  end
+  #def find_or_build_photo
+    #@photo = params[:id] ? @creation.photos.find(params[:id]) : @creation.photos.build(params[:photo])
+  #end
 end
app/models/creation.rb
@@ -6,6 +6,8 @@ class Creation < ActiveRecord::Base
   has_and_belongs_to_many :categories, :join_table => 'creations_categories', :uniq => true, :autosave => true
   has_many :photos, :dependent => :destroy
   has_many :favorites, :dependent => :destroy
+
+  # to be removed after migration
   mount_uploader :image, ImageUploader
 
   default_scope order("created_at DESC")
app/models/photo.rb
@@ -5,11 +5,19 @@ class Photo < ActiveRecord::Base
   mount_uploader :image, PhotoUploader
   process_in_background :image
 
-  def watermark
-    creation.watermark
+  include Rails.application.routes.url_helpers
+  def to_jq_upload
+    {
+      "name" => read_attribute(:image),
+      "size" => image.size,
+      "url" => image.url,
+      "thumbnail_url" => image.thumb.url,
+      "delete_url" => id,
+      "delete_type" => "DELETE"
+    }
   end
 
-  def to_s
-    "#{id} #{image}"
+  def watermark
+    creation.watermark
   end
 end
app/views/photos/_form.html.erb
@@ -1,31 +1,99 @@
 <% content_for :javascript do %>
-  <script type="text/javascript" charset="utf-8">
-    $(function(){ });
-  </script>
+<script type="text/javascript" charset="utf-8">
+  $(function () {
+    $('#fileupload').fileupload();
+    $('#fileupload').fileupload( 'option', 'redirect', window.location.href.replace( /\/[^\/]*$/, '/cors/result.html?%s'));
+    $('#fileupload').each(function () {
+      var that = this;
+      $.getJSON(this.action, function (result) {
+        if (result && result.length) {
+          $(that).fileupload('option', 'done').call(that, null, {result: result});
+        }
+      });
+    });
+  });
+</script>
 <% end %>
 
-<div class="row">
-  <div class="span12">
-    <ul class="thumbnails">
-      <li class="span6"><a class="thumbnail gallery" href="<%= @primary_photo.image.large.url %>"><img src="<%= @primary_photo.image.large.url %>" alt="<%= @creation.name %>" /></a></li>
-      <% @creation.photos.each do |photo| %>
-      <li class="span3"><img src="<%= photo.image.thumb.url.to_s %>" alt="<%= @creation.name %>" class="thumbnail" /></li>
-      <% end %>
-    </ul>
-  </div>
-</div>
-
-<%= form_for([@creation, @photo], :html => {:multipart => true, :class => "form-horizontal"}) do |f| %>
-  <fieldset>
-    <div class="control-group">
-      <%= f.label :image, "Upload Main Image", :class => "control-label" %>
-      <div class="controls">
-        <%= f.file_field :image, :class => "input-file" %>
+<div>
+  <h2>Upload file</h2>
+  <%= form_for [@creation, @photo], :html => { :multipart => true, :id => "fileupload"  } do |f| %>
+    <div class="row fileupload-buttonbar">
+      <div class="span7">
+        <span class="btn btn-success fileinput-button"><i class="icon-plus icon-white"></i><span>Add files...</span><%= f.file_field :image %></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">
+        <div class="progress progress-success progress-striped active fade"><div class="bar" style="width:0%;"></div></div>
       </div>
     </div>
-    <div class="form-actions">
-      <button type="submit" class="btn btn-primary">Save changes</button>
-      <a href="<%= url_for @creation %>" class="btn">Cancel</a>
-    </div>
-  </fieldset>
-<% end %>
+    <div class="fileupload-loading"></div>
+    <br>
+    <table class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
+  <% end %>
+</div>
+
+<!-- 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">Error</span> {%=file.error%}</td>
+        {% } else if (o.files.valid && !i) { %}
+            <td>
+                <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><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>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>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">Error</span> {%=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>Delete</span>
+            </button>
+            <input type="checkbox" name="delete" value="1">
+        </td>
+    </tr>
+{% } %}
+</script>
+
app/views/photos/new.html.erb
@@ -3,28 +3,7 @@
   <h1>Share a new creation</h1>
 <% end -%>
 <div class="row">
-  <div class="span3">
-    <div class="thumbnail">
-      <%= avatar_for(current_user) %>
-      <div class="caption">
-        <h5><%= current_user.name %></h5>
-      </div>
-    </div>
-    <div style="padding: 8px 0;" class="well">
-      <ul class="nav nav-list">
-        <li class="nav-header">Creations</li>
-        <li><a href="<%= url_for root_path %>"><i class="icon-white icon-home"></i> Home</a></li>
-        <li><a href="<%= url_for profiles_favorites_path -%>"><i class="icon-book"></i> My Favorites</a></li>
-        <li class="active"><a href="<%= new_creation_path %>"><i class="icon-pencil"></i> Add Creation</a></li>
-        <li class="nav-header">Account</li>
-        <li><a href="<%= url_for profiles_mine_path %>"><i class="icon-user"></i> Profile</a></li>
-        <li><a href="<%= url_for edit_user_registration_path %>"><i class="icon-cog"></i> Settings</a></li>
-        <li class="divider"></li>
-        <li><a href="http://cakeside.uservoice.com/"><i class="icon-flag"></i> Help</a></li>
-      </ul>
-    </div>
-  </div>
-  <div class="span6">
+  <div class="span12">
     <%= render 'form' %>
   </div>
 </div>
config/routes.rb
@@ -13,7 +13,7 @@ Cake::Application.routes.draw do
 
   # /creations
   resources :creations do
-    resources :photos, :only => [:new, :create, :destroy]
+    resources :photos, :only => [:index, :new, :create, :destroy]
     resources :favorites, :only => [:index, :create]
     resources :comments, :only => [:index, :new, :create]
   end