Ink file picker

gistfile1.txt

require "open-uri"
  class PhotosController < ApplicationController
    def update
      photo = Photo.find(params[:id])
    
      # Open the url that's been returned by Filepicker.
      # Then remove the pic from params so it doesn't get updated 
      # via update_attributes, which will cause a validation error
      if params[:photo][:pic_selected] == "true" && params[:photo][:pic] != '/default_images/original/missing.png'
        url = params[:photo][:pic]
        original_filename = params[:photo][:pic_original_filename]
        photo.pic = open(url)
        photo.pic.instance_write(:file_name, original_filename)
      end
      params[:photo].delete :pic
    
      # Proceed to update the object accordingly
      photo.update_attributes(params[:photo])

      redirect_to edit_article_path(params[:id])
    end
  end
end

gistfile2.txt

<div id="pic">                        
  <div class="display">
    <% if !@photo.pic.blank? %>
      <%= image_tag @photo.pic.url(:thumb) %>
    <% end %>
  </div>
  
  <%= f.hidden_field :pic, :id => "pic-hidden-field" %>
  <%= f.hidden_field :pic_selected, :id => "pic-selected-field", :value => "false" %>
  <%= f.hidden_field :pic_original_filename, :id => "pic-original-filename-hidden-field" %>

  <input type="filepicker" 
    name="temp_pic" 
    class="button" 
    data-fp-apikey="<%= Settings.filepicker.api_key %>" 
    data-fp-button-text="Select <% if !@photo.pic.blank? %>a different <% end %>image" 
    data-fp-extensions=".png,.jpg,.jpeg,.gif" 
    data-fp-multiple="false" 
    onchange="$('#pic-hidden-field').val(event.fpfile.url); $('#photo-selected-field').val('true'); $('#pic-original-filename-hidden-field').val(event.fpfile.filename); $('#pic .display').html('<img src=\'' + event.fpfile.url + '/convert?w=320&h=180\' />');" 
  />
  
</div>