_work_image_fields.html.haml

.nested-fields
  = f.input :file, as: :image_preview, input_html: { 'data-url' => work_images_path, 'data-form-data' => "{\"token\":\"#{@work.token}\"}" }
  = f.input :caption
  = link_to_remove_association t('simple_form.cocoon.remove_link'), f, class: 'right'

application.js.coffee

ready = ->
  # jQuery-Fileupload
  $('input[type=file].image_preview').fileupload({
    success: (response, statusText, xhr) ->
      console.log ':success', response, statusText, xhr
    done: (event, data) ->
      imageData = data.response().result

      $item = $('<div>', {
        'data-work_image-id': imageData.id
      })
        .addClass('js-image')
      $('<img>', {
        alt: imageData.filename,
        height: imageData.height,
        src: imageData.src,
        width: imageData.width
      })
        .appendTo($item)
      $('<span>')
        .text(imageData.filename)
        .appendTo($item)
      $('<button>', { type:'button' })
        .addClass('js-remove')
        .text('写真を削除 ×')
        .appendTo($item)

      $item.appendTo('#images')

    error: (xhr, statusText) ->
      console.log ':error', xhr, statusText
    complete: (xhr, statusText) ->
      console.log ':complete', xhr, statusText
  })

  $('body.works').on 'click', '.js-image .js-remove', (event) ->
    $button = $(event.currentTarget)
    $image = $button.closest('.js-image')

    id = $image.attr('data-work_image-id')
    baseUrl = $('input[type=file].image_preview').attr('data-url')
    url = "#{baseUrl}/#{id}"

    $.ajax({
      url: url
      type: 'DELETE'
      success: (response, statusText, xhr) ->
        $image.remove()
    })

beforeChange = ->
  $('input[type=file].image_preview').fileupload('destroy')

$(document).ready(ready)
$(document).on('page:load', ready)
$(document).on('page:before-change', beforeChange)

images_controller.rb

class ImagesController < ApplicationController
  before_action :set_image, only: [:show, :edit, :update, :destroy]

  # GET /images
  # GET /images.json
  def index
    @images = Image.all
  end

  # GET /images/1
  # GET /images/1.json
  def show
  end

  # GET /images/new
  def new
    @image = Image.new
  end

  # GET /images/1/edit
  def edit
  end

  # POST /images
  # POST /images.json
  def create
    @image = Image.new(image_params)

    if @image.save
      json = @image.to_jq_upload
      # json[:html] = render_to_string('images/edit', layout: false)
      json[:html] = "<img src=\"#{@image.data.thumb.url}\" />"
      render json: json
    else
      render json: @image.errors, status: :unprocessable_entity
    end

#   respond_to do |format|
#     if @image.save
#       format.html { redirect_to @image, notice: 'Image was successfully created.' }
#       format.json { render action: 'show', status: :created, location: @image }
#     else
#       format.html { render action: 'new' }
#       format.json { render json: @image.errors, status: :unprocessable_entity }
#     end
#   end
  end

  # PATCH/PUT /images/1
  # PATCH/PUT /images/1.json
  def update
    respond_to do |format|
      if @image.update(image_params)
        format.html { redirect_to @image, notice: 'Image was successfully updated.' }
        format.json { head :no_content }
      else
        format.html { render action: 'edit' }
        format.json { render json: @image.errors, status: :unprocessable_entity }
      end
    end
  end

  # DELETE /images/1
  # DELETE /images/1.json
  def destroy
    @image.destroy
    respond_to do |format|
      format.html { redirect_to images_url }
      format.json { head :no_content }
    end
  end

  private
    # Use callbacks to share common setup or constraints between actions.
    def set_image
      @image = Image.find(params[:id])
    end

    # Never trust parameters from the scary internet, only allow the white list through.
    def image_params
      params.require(:image).permit(:data, :post_id, :post_token)
    end
end