REMOTIPART WIP

Gemfile

@@ -17,6 +17,7 @@ gem 'rack-cors', '~> 0.2.4', :require => 'rack/cors'
 gem 'devise', '1.5.3'
 gem 'jwt'
 gem 'oauth2-provider', '0.0.19'
+gem 'remotipart', '~> 1.0'
 
 gem 'omniauth', '1.0.1'
 gem 'omniauth-facebook'

Gemfile.lock

@@ -162,7 +162,7 @@ GEM
     fixture_builder (0.3.1)
       activerecord (>= 2)
       activesupport (>= 2)
-    fog (1.2.0)
+    fog (1.3.0)
       builder
       excon (~> 0.12.0)
       formatador (~> 0.2.0)
@@ -341,6 +341,7 @@ GEM
     redis (2.2.2)
     redis-namespace (1.0.3)
       redis (< 3.0.0)
+    remotipart (1.0.2)
     resque (1.20.0)
       multi_json (~> 1.0)
       redis-namespace (~> 1.0.2)
@@ -513,6 +514,7 @@ DEPENDENCIES
   rails-i18n
   rails_autolink
   redcarpet (= 2.0.1)
+  remotipart (~> 1.0)
   resque (= 1.20.0)
   resque-timeout (= 1.0.0)
   rest-client (= 1.6.7)

app/controllers/photos_controller.rb

@@ -41,21 +41,23 @@ class PhotosController < ApplicationController
   end
 
   def create
-    begin
-      raise unless params[:photo][:aspect_ids]
-
-      if params[:photo][:aspect_ids] == "all"
-        params[:photo][:aspect_ids] = current_user.aspects.collect{|x| x.id}
-      elsif params[:photo][:aspect_ids].is_a?(Hash)
-        params[:photo][:aspect_ids] = params[:photo][:aspect_ids].values
-      end
+    rescuing_photo_errors do |p|
+      if remotipart_submitted?
+         @photo = current_user.build_post(:photo, params[:photo])
+      else
+        raise "not remotipart" unless params[:photo][:aspect_ids]
 
-      params[:photo][:user_file] = file_handler(params)
+        if params[:photo][:aspect_ids] == "all"
+          params[:photo][:aspect_ids] = current_user.aspects.collect { |x| x.id }
+        elsif params[:photo][:aspect_ids].is_a?(Hash)
+          params[:photo][:aspect_ids] = params[:photo][:aspect_ids].values
+        end
 
-      @photo = current_user.build_post(:photo, params[:photo])
+        params[:photo][:user_file] = file_handler(params)
 
-      if @photo.save
+        @photo = current_user.build_post(:photo, params[:photo])
 
+        if @photo.save
         aspects = current_user.aspects_from_ids(params[:photo][:aspect_ids])
 
         unless @photo.pending
@@ -65,11 +67,14 @@ class PhotosController < ApplicationController
 
         if params[:photo][:set_profile_photo]
           profile_params = {:image_url => @photo.url(:thumb_large),
-                           :image_url_medium => @photo.url(:thumb_medium),
-                           :image_url_small => @photo.url(:thumb_small)}
+                            :image_url_medium => @photo.url(:thumb_medium),
+                            :image_url_small => @photo.url(:thumb_small)}
           current_user.update_profile(profile_params)
         end
+        end
+      end
 
+      if @photo.save
         respond_to do |format|
           format.json{ render(:layout => false , :json => {"success" => true, "data" => @photo}.to_json )}
           format.html{ render(:layout => false , :json => {"success" => true, "data" => @photo}.to_json )}
@@ -77,19 +82,6 @@ class PhotosController < ApplicationController
       else
         respond_with @photo, :location => photos_path, :error => message
       end
-
-    rescue TypeError
-      message = I18n.t 'photos.create.type_error'
-      respond_with @photo, :location => photos_path, :error => message
-
-    rescue CarrierWave::IntegrityError
-      message = I18n.t 'photos.create.integrity_error'
-      respond_with @photo, :location => photos_path, :error => message
-
-    rescue RuntimeError => e
-      message = I18n.t 'photos.create.runtime_error'
-      respond_with @photo, :location => photos_path, :error => message
-      raise e
     end
   end
 
@@ -200,4 +192,23 @@ class PhotosController < ApplicationController
       file
     end
   end
+
+
+  def rescuing_photo_errors
+    begin
+      yield
+    rescue TypeError
+      message = I18n.t 'photos.create.type_error'
+      respond_with @photo, :location => photos_path, :error => message
+
+    rescue CarrierWave::IntegrityError
+      message = I18n.t 'photos.create.integrity_error'
+      respond_with @photo, :location => photos_path, :error => message
+
+    rescue RuntimeError => e
+      message = I18n.t 'photos.create.runtime_error'
+      respond_with @photo, :location => photos_path, :error => message
+      raise e
+    end
+  end
 end

app/controllers/posts_controller.rb

@@ -16,7 +16,7 @@ class PostsController < ApplicationController
              :xml
 
   def new
-    render :text => "", :layout => true
+
   end
 
   def show
@@ -40,7 +40,7 @@ class PostsController < ApplicationController
         format.xml{ render :xml => @post.to_diaspora_xml }
         format.mobile{render 'posts/show.mobile.haml'}
         format.json{ render :json => PostPresenter.new(@post, current_user).to_json }
-        format.any{render 'posts/show.html.haml'}
+         format.any{render 'posts/show.html.haml'}
       end
 
     else

app/controllers/status_messages_controller.rb

@@ -53,7 +53,8 @@ class StatusMessagesController < ApplicationController
       receiving_services = Service.titles(services)
 
       current_user.dispatch_post(@status_message, :url => short_post_url(@status_message.guid), :service_types => receiving_services)
-      
+
+      #this is done implicitly, somewhere else, apparently, says max. :'(
       # @status_message.photos.each do |photo|
       #   current_user.dispatch_post(photo)
       # end

app/views/photos/_new_photo.haml

@@ -83,4 +83,4 @@
    });
  }
 
- createUploader();
+ createUploader();
\ No newline at end of file

app/views/posts/new.html.haml

+= form_for Photo.new, :html => { :multipart => true }, :remote => true do |f|
+  = f.label :user_file
+  = f.file_field :user_file
+  = f.submit
+
+:javascript
+  $(function(){
+    console.log($('#new_photo'))
+    $('#new_photo').bind('ajax:success', function(event, data) {
+      alert("happy day")
+      console.log(data)
+      console.log(new Backbone.Model(data)); // Your newly created Backbone.js model
+
+    });
+  });
\ No newline at end of file

config/assets.yml

@@ -25,6 +25,8 @@ javascripts:
     - public/javascripts/vendor/timeago.js
     - public/javascripts/vendor/facebox.js
     - public/javascripts/vendor/underscore.js
+    - public/javascripts/vendor/jquery.iframe-transport.js
+    - public/javascripts/vendor/jquery.remotipart.js
     - public/javascripts/vendor/jquery.events.input.js
     - public/javascripts/vendor/jquery.elastic.js
     - public/javascripts/vendor/jquery.mentionsInput.js

public/javascripts/vendor/jquery.iframe-transport.js

+// This [jQuery](http://jquery.com/) plugin implements an `<iframe>`
+// [transport](http://api.jquery.com/extending-ajax/#Transports) so that
+// `$.ajax()` calls support the uploading of files using standard HTML file
+// input fields. This is done by switching the exchange from `XMLHttpRequest` to
+// a hidden `iframe` element containing a form that is submitted.
+
+// The [source for the plugin](http://github.com/cmlenz/jquery-iframe-transport)
+// is available on [Github](http://github.com/) and dual licensed under the MIT
+// or GPL Version 2 licenses.
+
+// ## Usage
+
+// To use this plugin, you simply add a `iframe` option with the value `true`
+// to the Ajax settings an `$.ajax()` call, and specify the file fields to
+// include in the submssion using the `files` option, which can be a selector,
+// jQuery object, or a list of DOM elements containing one or more
+// `<input type="file">` elements:
+
+//     $("#myform").submit(function() {
+//         $.ajax(this.action, {
+//             files: $(":file", this),
+//             iframe: true
+//         }).complete(function(data) {
+//             console.log(data);
+//         });
+//     });
+
+// The plugin will construct a hidden `<iframe>` element containing a copy of
+// the form the file field belongs to, will disable any form fields not
+// explicitly included, submit that form, and process the response.
+
+// If you want to include other form fields in the form submission, include them
+// in the `data` option, and set the `processData` option to `false`:
+
+//     $("#myform").submit(function() {
+//         $.ajax(this.action, {
+//             data: $(":text", this).serializeArray(),
+//             files: $(":file", this),
+//             iframe: true,
+//             processData: false
+//         }).complete(function(data) {
+//             console.log(data);
+//         });
+//     });
+
+// ### The Server Side
+
+// If the response is not HTML or XML, you (unfortunately) need to apply some
+// trickery on the server side. To send back a JSON payload, send back an HTML
+// `<textarea>` element with a `data-type` attribute that contains the MIME
+// type, and put the actual payload in the textarea:
+
+//     <textarea data-type="application/json">
+//       {"ok": true, "message": "Thanks so much"}
+//     </textarea>
+
+// The iframe transport plugin will detect this and attempt to apply the same
+// conversions that jQuery applies to regular responses. That means for the
+// example above you should get a Javascript object as the `data` parameter of
+// the `complete` callback, with the properties `ok: true` and
+// `message: "Thanks so much"`.
+
+// ### Compatibility
+
+// This plugin has primarily been tested on Safari 5, Firefox 4, and Internet
+// Explorer all the way back to version 6. While I haven't found any issues with
+// it so far, I'm fairly sure it still doesn't work around all the quirks in all
+// different browsers. But the code is still pretty simple overall, so you
+// should be able to fix it and contribute a patch :)
+
+// ## Annotated Source
+
+(function($, undefined) {
+
+  // Register a prefilter that checks whether the `iframe` option is set, and
+  // switches to the iframe transport if it is `true`.
+  $.ajaxPrefilter(function(options, origOptions, jqXHR) {
+    if (options.iframe) {
+      return "iframe";
+    }
+  });
+
+  // Register an iframe transport, independent of requested data type. It will
+  // only activate when the "files" option has been set to a non-empty list of
+  // enabled file inputs.
+  $.ajaxTransport("iframe", function(options, origOptions, jqXHR) {
+    var form = null,
+        iframe = null,
+        origAction = null,
+        origTarget = null,
+        origEnctype = null,
+        addedFields = [],
+        disabledFields = [],
+        files = $(options.files).filter(":file:enabled");
+
+    // This function gets called after a successful submission or an abortion
+    // and should revert all changes made to the page to enable the
+    // submission via this transport.
+    function cleanUp() {
+      $(addedFields).each(function() {
+        this.remove();
+      });
+      $(disabledFields).each(function() {
+        this.disabled = false;
+      });
+      form.attr("action", origAction || "")
+          .attr("target", origTarget || "")
+          .attr("enctype", origEnctype || "");
+      iframe.attr("src", "javascript:false;").remove();
+    }
+
+    // Remove "iframe" from the data types list so that further processing is
+    // based on the content type returned by the server, without attempting an
+    // (unsupported) conversion from "iframe" to the actual type.
+    options.dataTypes.shift();
+
+    if (files.length) {
+      // Determine the form the file fields belong to, and make sure they all
+      // actually belong to the same form.
+      files.each(function() {
+        if (form !== null && this.form !== form) {
+          jQuery.error("All file fields must belong to the same form");
+        }
+        form = this.form;
+      });
+      form = $(form);
+
+      // Store the original form attributes that we'll be replacing temporarily.
+      origAction = form.attr("action");
+      origTarget = form.attr("target");
+      origEnctype = form.attr("enctype");
+
+      // We need to disable all other inputs in the form so that they don't get
+      // included in the submitted data unexpectedly.
+      form.find(":input:not(:submit)").each(function() {
+        if (!this.disabled && (this.type != "file" || files.index(this) < 0)) {
+          this.disabled = true;
+          disabledFields.push(this);
+        }
+      });
+
+      // If there is any additional data specified via the `data` option,
+      // we add it as hidden fields to the form. This (currently) requires
+      // the `processData` option to be set to false so that the data doesn't
+      // get serialized to a string.
+      if (typeof(options.data) === "string" && options.data.length > 0) {
+        jQuery.error("data must not be serialized");
+      }
+      $.each(options.data || {}, function(name, value) {
+        if ($.isPlainObject(value)) {
+          name = value.name;
+          value = value.value;
+        }
+        addedFields.push($("<input type='hidden'>").attr("name", name)
+          .attr("value", value).appendTo(form));
+      });
+
+      // Add a hidden `X-Requested-With` field with the value `IFrame` to the
+      // field, to help server-side code to determine that the upload happened
+      // through this transport.
+      addedFields.push($("<input type='hidden' name='X-Requested-With'>")
+        .attr("value", "IFrame").appendTo(form));
+
+      // Borrowed straight from the JQuery source
+      // Provides a way of specifying the accepted data type similar to HTTP_ACCEPTS
+      accepts = options.dataTypes[ 0 ] && options.accepts[ options.dataTypes[0] ] ?
+        options.accepts[ options.dataTypes[0] ] + ( options.dataTypes[ 0 ] !== "*" ? ", */*; q=0.01" : "" ) :
+        options.accepts[ "*" ]
+
+      addedFields.push($("<input type='hidden' name='X-Http-Accept'>")
+        .attr("value", accepts).appendTo(form));
+
+      return {
+
+        // The `send` function is called by jQuery when the request should be
+        // sent.
+        send: function(headers, completeCallback) {
+          iframe = $("<iframe src='javascript:false;' name='iframe-" + $.now()
+            + "' style='display:none'></iframe>");
+
+          // The first load event gets fired after the iframe has been injected
+          // into the DOM, and is used to prepare the actual submission.
+          iframe.bind("load", function() {
+
+            // The second load event gets fired when the response to the form
+            // submission is received. The implementation detects whether the
+            // actual payload is embedded in a `<textarea>` element, and
+            // prepares the required conversions to be made in that case.
+            iframe.unbind("load").bind("load", function() {
+
+              var doc = this.contentWindow ? this.contentWindow.document :
+                (this.contentDocument ? this.contentDocument : this.document),
+                root = doc.documentElement ? doc.documentElement : doc.body,
+                textarea = root.getElementsByTagName("textarea")[0],
+                type = textarea ? textarea.getAttribute("data-type") : null;
+
+              var status = textarea ? parseInt(textarea.getAttribute("response-code")) : 200,
+                statusText = "OK",
+                responses = { text: type ? textarea.value : root ? root.innerHTML : null },
+                headers = "Content-Type: " + (type || "text/html")
+
+              completeCallback(status, statusText, responses, headers);
+
+              setTimeout(cleanUp, 50);
+            });
+
+            // Now that the load handler has been set up, reconfigure and
+            // submit the form.
+            form.attr("action", options.url)
+              .attr("target", iframe.attr("name"))
+              .attr("enctype", "multipart/form-data")
+              .get(0).submit();
+          });
+
+          // After everything has been set up correctly, the iframe gets
+          // injected into the DOM so that the submission can be initiated.
+          iframe.insertAfter(form);
+        },
+
+        // The `abort` function is called by jQuery when the request should be
+        // aborted.
+        abort: function() {
+          if (iframe !== null) {
+            iframe.unbind("load").attr("src", "javascript:false;");
+            cleanUp();
+          }
+        }
+
+      };
+    }
+  });
+
+})(jQuery);

public/javascripts/vendor/jquery.remotipart.js

+//= require jquery.iframe-transport.js
+//= require_self
+
+(function($) {
+
+  var remotipart;
+
+  $.remotipart = remotipart = {
+
+    setup: function(form) {
+      form
+        // Allow setup part of $.rails.handleRemote to setup remote settings before canceling default remote handler
+        // This is required in order to change the remote settings using the form details
+        .one('ajax:beforeSend.remotipart', function(e, xhr, settings){
+          // Delete the beforeSend bindings, since we're about to re-submit via ajaxSubmit with the beforeSubmit
+          // hook that was just setup and triggered via the default `$.rails.handleRemote`
+          // delete settings.beforeSend;
+          delete settings.beforeSend;
+
+          settings.iframe      = true;
+          settings.files       = $($.rails.fileInputSelector, form);
+          settings.data        = form.serializeArray();
+          settings.processData = false;
+
+          // Modify some settings to integrate JS request with rails helpers and middleware
+          if (settings.dataType === undefined) { settings.dataType = 'script *'; }
+          settings.data.push({name: 'remotipart_submitted', value: true});
+
+          // Allow remotipartSubmit to be cancelled if needed
+          if ($.rails.fire(form, 'ajax:remotipartSubmit', [xhr, settings])) {
+            // Second verse, same as the first
+            $.rails.ajax(settings);
+          }
+
+          //Run cleanup
+          remotipart.teardown(form);
+
+          // Cancel the jQuery UJS request
+          return false;
+        })
+
+        // Keep track that we just set this particular form with Remotipart bindings
+        // Note: The `true` value will get over-written with the `settings.dataType` from the `ajax:beforeSend` handler
+        .data('remotipartSubmitted', true);
+    },
+
+    teardown: function(form) {
+      form
+        .unbind('ajax:beforeSend.remotipart')
+        .removeData('remotipartSubmitted')
+    }
+  };
+
+  $('form').live('ajax:aborted:file', function(){
+    var form = $(this);
+
+    remotipart.setup(form);
+
+    // If browser does not support submit bubbling, then this live-binding will be called before direct
+    // bindings. Therefore, we should directly call any direct bindings before remotely submitting form.
+    if (!$.support.submitBubbles && $().jquery < '1.7' && $.rails.callFormSubmitBindings(form) === false) return $.rails.stopEverything(e);
+
+    // Manually call jquery-ujs remote call so that it can setup form and settings as usual,
+    // and trigger the `ajax:beforeSend` callback to which remotipart binds functionality.
+    $.rails.handleRemote(form);
+    return false;
+  });
+
+})(jQuery);