Paperclip, valums’s file-uploader and middleware continued

So I thought I’d share how I got this nice mixture working. The first thing I did was contemplate what method I should use to intercept the incoming data. I could’ve put it all in the controller, however, I felt this would be bad use of the controller. Likewise I could’ve put it in the model, however, in the end I decided upon writing it as rack middleware and injecting it into the application.

First I created the view. I won’t go into detail, but basically it looks something like this:

<!-- contents above file-uploader -->
<div id="file-uploader">
  <noscript>
    <p>Please enable JavaScript to use file uploader.</p>
    <!-- or put a simple form for upload here -->
  </noscript>
</div>
<!-- contents below -->

I then implemented the JavaScript and put it in a seperate file I called upload.js – I load this file via a contents_for block in my view. The JavaScript requires jQuery, however thats easy enough to change. Make sure you change the action path to the path to your controller.

$(function() {
  function createUploader(){
    var uploader = new qq.FileUploader({
      element: $('#file-uploader')[0],
      action: '/photos',
      multiple: false,
      allowedExtensions: ['jpg', 'jpeg', 'png']
    });
  }

  createUploader();
});

Then in my controller, PhotosController, I have:

 
class PhotosController < ApplicationController
  def create
    @photo = current_user.photos.build(params[:photo])
    if @photo.save
      render :text => '{"success": true}', :content_type => "application/json"
    end
  end
end

In my model – I have a basic Paperclip setup:

class Photo < ActiveRecord::Base
  has_attached_file :image,
    :styles => {
      :large => "800x600>",
      :medium => "400x300>"
    }
end

Below is the code where the “magic” happens. I can’t claim credit for the code, as it’s largely inspired by the links you’ll see in the comments. I called the file raw_file_upload.rb, however, feel free to call it what you wish (as long as you rename the class as well). All it does is check if the incoming request is an Ajax request and whether certain conditions are met before sending it to the convert_and_call method. In the convert_and_call method it firstly creates a temporary file thats used to grab the input and store it on the server until it is processed by Paperclip. It then recreates the input so Rails is fooled into thinking this is a regular form. Notice in the multidimensional hash, I name it “image” (which corrosponds to the has_attachment :image, above). This way my controller logic requires very little differentiating between a regular upload request and a AJAX request. Afterwords it sets the environment variables and calls the application.

require 'mime/types'

#
# Built with massive inspiration (ok, more like following their lead) from the following:
# - https://github.com/JackDanger/file-uploader/commit/03ed9ba68d46805e22a0014ac0eee9ecbd5acd8d
# - https://github.com/newbamboo/example-html5-upload/blob/master/lib/rack/raw_upload.rb
#
class RawFileUpload
  def initialize(app)
    @app = app
  end

  def call(env)
    if raw_file_post?(env)
      convert_and_call(env)
    else
      @app.call(env)
    end
  end

private
  def raw_file_post?(env)
    env['HTTP_X_FILE_NAME'] &&
      env['CONTENT_TYPE'] == 'application/octet-stream' &&
      env['HTTP_X_REQUESTED_WITH'] == 'XMLHttpRequest'
  end

  def convert_and_call(env)
    tempfile = Tempfile.new('raw-upload.')
    env['rack.input'].each do |chunk|
      tempfile << chunk.force_encoding('UTF-8')
    end
    tempfile.flush
    tempfile.rewind

    multipart_hash = {
      :image => {
        :filename => env['HTTP_X_FILE_NAME'],
        :type => MIME::Types.type_for(env['HTTP_X_FILE_NAME']).first,
        :tempfile => tempfile
      }
    }

    env['rack.request.form_input'] = env['rack.input']

    env['rack.request.form_hash'] ||= {}
    env['rack.request.query_hash'] ||= {}

    env['rack.request.form_hash']['photo'] = multipart_hash
    env['rack.request.query_hash']['photo'] = multipart_hash

    @app.call(env)
  end
end

This code is setup as rack middleware, basically I created an initializer file in config/initializers/ and called it raw_upload_helper.rb. This file initializes the above file and inserts it as rack middleware.

Rails.application.config.middleware.use RawFileUpload

That should be it. Good luck, and comment if you have a problem

About these ads