Users can now upload files by dragging and dropping them to Mockr

app/controllers/home_controller.rb

@@ -1,5 +1,13 @@
 class HomeController < ApplicationController
-  def index; end
+  def index
+    if params[:uploaded]
+      if params[:uploaded].to_i == 1
+        flash.now[:notice] = "Mocks uploaded!"
+      else
+        flash.now[:notice] = "Ruh roh, your mock couldn't be uploaded."
+      end
+    end
+  end
 
   def mock_set
     render :partial => "recent_mock_set", :locals => {:page => params[:page]}

app/controllers/mocks_controller.rb

@@ -6,25 +6,20 @@ def new
   end
 
   def create
-    mock = Mock.new(params[:mock])
-    if params[:project]
-      if params[:project][:id].blank?
-        project_id = Project.create_new_untitled_project!.id
-      else
-        project_id = params[:project][:id].to_i
-      end
-      mock.attach_mock_list_if_necessary!(project_id, params[:mock][:title])
+    mocks = params[:images].map do |image|
+      Mock.new(params[:mock].merge(:image => image))
     end
-    begin
+    project_id = params[:project_id].blank? ?
+      Project.create_new_untitled_project!.id : params[:project_id]
+    mocks.each_with_index do |mock, i|
+      title = File.basename(mock.image_file_name, File.extname(mock.image_file_name))
+      title = title.titleize
+      mock.attach_mock_list_if_necessary!(project_id, title)
       mock.save!
-      mock.deliver(params[:email]) if params[:send_email].to_i == 1
-      flash[:notice] = "Mock created!"
-      url = mock_url(mock)
-      Campfire.notify_mock_created(mock, url)
-      redirect_to url
-    rescue ActiveRecord::RecordInvalid
-      render :action => :new
     end
+    url = mock_url(mocks.first)
+    Campfire.notify_mocks_created(mocks, url)
+    render :json => {:success => true}
   end
 
   def show

app/models/campfire.rb

@@ -1,10 +1,12 @@
 class Campfire
   KEYS = ["campfire_subdomain", "campfire_token", "campfire_room"]
 
-  def self.notify_mock_created(mock, url)
+  def self.notify_mocks_created(mocks, url)
     room = find_room
     if use? && room
-      room.speak "#{mock.author.name} posted a new mock:"
+      mock = mocks.first
+      mocks_text = mocks.size == 1 ? "a new mock" : "#{mocks.size} new mocks"
+      room.speak "#{mock.author.name} posted #{mocks_text}:"
       room.speak mock.image.url
       room.speak url
     end

app/views/mocks/new.html.erb

@@ -1,61 +1,32 @@
-<% @title = "Add a Mock" %>
+<% @title = "Upload Mocks" %>
 
-<%= stylesheet_link_tag "shared/form" %>
-<%= stylesheet_link_tag "mocks/new" %>
+<% content_for :head do %>
+  <%= stylesheet_link_tag "shared/form",
+                          "mocks/new" %>
+  <%= javascript_include_tag "plugins/jquery.ui.widget",
+  			          		   	   "plugins/jquery.iframe-transport",
+  						               "plugins/jquery.fileupload",
+                             "mocks/new" %>
+<% end %>
 
 <div class="form_holder debossed">
-  <% form_for :mock, :url => mocks_path, :html => {:multipart => true} do |f| %>
+  <% form_for :mock, :url => mocks_path, :html => {:multipart => true,
+      :id => "mock_creation_form"} do |f| %>
     <%= f.hidden_field :path, :value => "" %>
     <%= f.hidden_field :author_id, :value => viewer.id %>
-    <div class="field_row">
-      <%= f.label :image %><br />
-      <%= f.file_field :image %>
-    </div>
-    <% if params[:mock_list_id].blank? %>
-      <div class="field_row">
-        <%= f.label :title %><br />
-        <%= f.text_field :title %>
-      </div>
-    <% end %>
-    <div class="field_row">
-      <%= f.label :description %><br />
-      <%= f.text_area :description %>
-    </div>
-    <% if params[:mock_list_id].blank? %>
-      <div class="field_row">
-        <% fields_for :project do |g| %>
-          <%= g.label :id, "Add to Project:" %>
-          <%= g.select :id, Project.form_options,
-            {:selected => params[:project_id].to_i,
-             :disabled => Project::DISABLED_PROJECT_FORM_VALUE} %>
-        <% end %>
-      </div>
-    <% else %>
-      <%= f.hidden_field :mock_list_id, :value => params[:mock_list_id] %>    
-    <% end %>
-
-      <%= check_box_tag :send_email %>
-    <% if Setting[:notification_email] %>
-      Send email to
-      <span id="default_email">
-        <strong><%= Setting[:notification_email] %></strong>      
-        <%= link_to_function "change",
-          "$('#email').show().select(); $('#default_email').hide()" %>
-      </span>
-      <%= text_field_tag :email, Setting[:notification_email],
-        :style => "display: none" %>
-    <% else %>
-      <%= label_tag :send_email, "Send email to" %>
-      <%= text_field_tag :email %>
-    <% end %>
-
-    <div class="submit_bar">
-      <% if params[:project_id] %>
-        <%= link_to "Cancel", project_path(params[:project_id]) %>
-      <% else %>
-        <%= link_to "Cancel", home_path %>
-      <% end %>
-      or <%= f.submit "Create Mock" %>
-    </div>
+    <input type="file" name="images[]" id='file' multiple
+      style="display: none" />
+    <%= f.hidden_field :mock_list_id, :value => params[:mock_list_id] %>
+    <%= hidden_field_tag :project_id, params[:project_id] %>
+    <div class="instructions">Drag &amp; Drop Your Files to Upload</div>
+    <div class="loading rounded"></div>
   <% end %>
 </div>
+
+<p class="cancel_bar">
+	<% if params[:project_id] %>
+    <%= link_to "Back to Project", project_path(params[:project_id]) %>
+	<% else %>
+		<%= link_to "Back to Home", home_path %>
+	<% end %>
+</p>

public/javascripts/mocks/new.js

@@ -0,0 +1,22 @@
+$(function() {
+    $('#mock_creation_form').fileupload({
+        dataType: 'json',
+        url: '/mocks',
+        singleFileUploads: false,
+        done: function (e, data) {
+          window.location = '/?uploaded=1';
+        },
+        start: function (e) {
+          $(this).addClass('submitted');
+        },
+        fail: function (e, data) {
+          window.location = '/?uploaded=0';
+        },
+        dragover: function(e, data) {
+          $(document.body).addClass("dragging");
+        }
+    });
+    $(document.body).bind('dragleave', function() {
+      $(document.body).removeClass("dragging");
+    });
+});

public/stylesheets/mocks/new.css

@@ -1,13 +1,30 @@
-.submit_bar {
-  border-top: 1px solid #666;
-  margin-top: 20px;
-  padding-top: 20px;
-}
-#default_email a {
-  font-size: 11px;
-}
-#email {
-  font-size: 13px;
-  margin: 0;
-  width: 250px;
+.cancel_bar {
+  margin-top: 40px;
+	text-align: center;
+}
+.form_holder {
+  padding: 180px 80px;
+}
+.dragging .form_holder {
+  background: #111;
+}
+.loading {
+  display: none;
+  height: 22px;
+  line-height: 22px;
+  background: url('../../images/progressbar.gif') repeat-x;
+}
+.instructions {
+  background: url('../../images/upload-files.png') no-repeat center top;
+  color: #ccc;
+  font-size: 20px;
+  font-weight: bold;
+  padding-top: 120px;
+  text-align: center;
+}
+.submitted * {
+  display: none;
+}
+.submitted .loading {
+  display: block;
 }

public/stylesheets/shared/form.css

@@ -25,7 +25,7 @@ textarea {
   margin-bottom: 20px;
 }
 .form_holder {
-  padding: 50px 80px 35px;
+  padding: 50px 80px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
 }