Using jQuery file upload plugin in a nested form_for

Question

I have a create product page that has a nested create photo inside of it. Photos belong to product and product has many photos. I am using the jQuery file upload plugin but it requires you to hit save after uploading. This is a problem because it's in my product form and I can't save the photo without a product. So this is what happens when I hit save. "internal server error!" (above create product)

The error I see

And this is what gets output in console!

console error

 Started POST "/products" for 127.0.0.1 at 2013-07-02 15:01:38 -0400
Processing by ProductsController#create as JSON
Parameters: {"utf8"=>"✓", "authenticity_token"=>"z5BnHkHTqPZGKt+uWQs10wUEKkGlphXth0rqM82tjR0=", "product"=>{"name"=>"", "description"=>"", "condition"=>"", "quantity"=>"", "price"=>"", "ship_method"=>"", "ship_price"=>"", "photos_attributes"=>{"0"=>{"image"=>#<ActionDispatch::Http::UploadedFile:0x9699c3c @original_filename="eye.jpg", @content_type="image/jpeg", @headers="Content-Disposition: form-data; name=\"product[photos_attributes][0][image]\"; filename=\"eye.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/tmp/RackMultipart20130702-5814-cu2g3o>>}}}}
User Load (0.3ms)  SELECT "users".* FROM "users" WHERE "users"."auth_token" = 'eQOQkRRSnzfA51iiDQ-90w' LIMIT 1
Command :: identify -format '%wx%h,%[exif:orientation]' '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: identify -format %m '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: identify -format %m '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: identify -format %m '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: convert '/tmp/eye20130702-5814-12toyjt.jpg[0]' -auto-orient -resize "320x240>" '/tmp/eye20130702-5814-12toyjt20130702-5814-vpw0ed'
Command :: file -b --mime '/tmp/eye20130702-5814-12toyjt20130702-5814-vpw0ed'
Command :: identify -format '%wx%h,%[exif:orientation]' '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: identify -format %m '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: identify -format %m '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: identify -format %m '/tmp/eye20130702-5814-12toyjt.jpg[0]'
Command :: convert '/tmp/eye20130702-5814-12toyjt.jpg[0]' -auto-orient -resize "100x100>" '/tmp/eye20130702-5814-12toyjt20130702-5814-b835qy'
Command :: file -b --mime '/tmp/eye20130702-5814-12toyjt20130702-5814-b835qy'
 Rendered products/new.js.erb (5.2ms)
Completed 500 Internal Server Error in 806ms

AbstractController::DoubleRenderError (Render and/or redirect were called multiple times in this action. Please note that you may only call render OR redirect, and at most once per action. Also note that neither redirect nor render terminate execution of the action, so if you want to exit an action after redirecting, you need to do something like "redirect_to(...) and return".):
app/controllers/products_controller.rb:34:in `block (2 levels) in create'
app/controllers/products_controller.rb:32:in `create'


Rendered /home/alain/.rvm/gems/ruby-1.9.3-head/gems/actionpack-3.2.13/lib/action_dispatch/middleware/templates/rescues/_trace.erb (39.6ms)
Rendered /home/alain/.rvm/gems/ruby-1.9.3-head/gems/actionpack-3.2.13/lib/action_dispatch/middleware/templates/rescues/_request_and_response.erb (2.2ms)
Rendered /home/alain/.rvm/gems/ruby-1.9.3-head/gems/actionpack-3.2.13/lib/action_dispatch/middleware/templates/rescues/diagnostics.erb   within rescues/layout (52.8ms)

new product page (HAML)

= form_for @product,:url => products_path, :html => { :id => "fileupload", :multipart => true } do |f| 

  %p
    = f.label :name
    = f.text_field :name
  %p
    = f.label :description
    = f.text_field :description
  %p
    = f.label :condition
    = f.text_field :condition
  %p
    = f.select :quantity, [['Quantity', nil], '1', '2', '3', '4', '5', '6', '7', '8', '9', '10']
  %p
    = f.label :price
    = f.text_field :price, class: "auto", data: { a_sign: "$ " } 
  %p
    =f.select :ship_method, [['Shipping', nil], 'usps', 'ups', 'fedex']
  %p
    = f.label :ship_price
    = f.text_field :ship_price, class: "auto", data: { a_sign: "$ " } 

  %p
    = f.fields_for :photos do  |fp| 
      =fp.file_field :image
      %br

  .files{"data-target" => "#modal-gallery", "data-toggle" => "modal-gallery"}
  %p.button
    = f.submit

:javascript
  var fileUploadErrors = {
  maxFileSize: 'File is too big',
  minFileSize: 'File is too small',
  acceptFileTypes: 'Filetype not allowed',
  maxNumberOfFiles: 'Max number of files exceeded',
  uploadedBytes: 'Uploaded bytes exceed file size',
  emptyResult: 'Empty file upload result'
  };


/ The template to display files available for upload
%script#template-upload{:type => "text/x-tmpl"}
  {% for (var i=0, file; file=o.files[i]; i++) { %}
  <tr class="template-upload fade">
    <td class="preview"><span class="fade"></span></td>
    <td class="name"><span>{%=file.name%}</span></td>
    <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
    {% if (file.error) { %}
    <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[file.error] || file.error%}</td>
    {% } else if (o.files.valid && !i) { %}
    <td>
      <div class="progress progress-success progress-striped active"><div class="bar" style="width:0%;"></div></div>
    </td>
    <td class="start">{% if (!o.options.autoUpload) { %}
      <button class="btn btn-primary">
        <i class="icon-upload icon-white"></i>
        <span>{%=locale.fileupload.start%}</span>
      </button>
      {% } %}</td>
    {% } else { %}
    <td colspan="2"></td>
    {% } %}
    <td class="cancel">{% if (!i) { %}
      <button class="btn btn-warning">
        <i class="icon-ban-circle icon-white"></i>
        <span>{%=locale.fileupload.cancel%}</span>
      </button>
      {% } %}</td>
  </tr>
  {% } %}
/ The template to display files available for download
%script#template-download{:type => "text/x-tmpl"}
  {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
      {% if (file.error) { %}
        <td></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td class="error" colspan="2"><span class="label label-important">{%=locale.fileupload.error%}</span> {%=locale.fileupload.errors[    file.error] || file.error%}</td>
        {% } else { %}
        <td class="preview">{% if (file.thumbnail_url) { %}
          <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
          {% } %}</td>
        <td class="name">
          <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url&&'gallery'%}" download="{%=file.name%}">{%=file.name%}</a>
        </td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td colspan="2"></td>
        {% } %}
      <td class="delete">
        <button class="btn btn-danger" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}">
          <i class="icon-trash icon-white"></i>
          <span>{%=locale.fileupload.destroy%}</span>
        </button>
        <input type="checkbox" name="delete" value="1">
      </td>
    </tr>
    {% } %}
%script{:charset => "utf-8", :type => "text/javascript"}
  $(function () {
      // Initialize the jQuery File Upload widget:
      $('#fileupload').fileupload();
      // 
      // Load existing files:
      $.getJSON($('#fileupload').prop('action'), function (files) {
        var fu = $('#fileupload').data('blueimpFileupload'), 
          template;
        fu._adjustMaxNumberOfFiles(-files.length);
        console.log(files);
        template = fu._renderDownload(files)
          .appendTo($('#fileupload .files'));
        // Force reflow:
        fu._reflow = fu._transition && template.length &&
          template[0].offsetWidth;
        template.addClass('in');
        $('#loading').remove();
      });

  });

product controller

  def new 
    @product = Product.new
    @photo = Photo.new
    @product.photos.build
  end

  def create
  @product = current_user.products.new(params[:product])
  @photo = current_user.photos.new(params[:photo])

    if @product.valid?
      @product.save
      @photo.product_id = @product.id
      @photo.save
      render "show", :notice => "Sale created!"
    else
      @product.photos.build
      render "new", :notice => "Somehting went wrong!"
    end


    respond_to do |format|
      format.html 
      format.json { render json: @photo }
    end
  end

What in the world should I do?

Deepak · Accepted Answer · 2013-07-03 11:07:20Z

1

+50

I agree with @jjay225 for uploading product and image in a single request.

But you don't have to save them separately. You can save both in a single save command.

For this, you can make use of accepts_nested_attributes_for for this. The benefit of this will be validations. if save for one record is failed, the other also fails.

Let me know if you need an example of this.

answered Jul 3, 2013 at 11:07

Deepak

1066 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Alain Goldman Over a year ago

i would love an example of this!

Deepak Over a year ago

Here is an example for image uploading: gist.github.com/deepakdargade/5928404

Ast Derek · Accepted Answer · 2013-07-02 19:53:59Z

1

Avoid complications, don't show the upload field when creating the product, show it at the edit page only.

Another option would be to send the product form first via AJAX, and display the image upload field at AJAX success.

answered Jul 2, 2013 at 19:53

Ast Derek

2,7291 gold badge20 silver badges29 bronze badges

1 Comment

rineez Over a year ago

I think this is a good suggestion. Another approach will be uploading images to a temporary path first and move them to permanent path only when the product is saved.

jjay225 · Accepted Answer · 2013-07-02 19:59:36Z

0

I would say browse for an image but don't upload it yet. Then enter your product details and post both to the server, of course get the Id to your newly created product before saving the link to your image to be able to link your image to the product you just saved.

answered Jul 2, 2013 at 19:59

jjay225

5186 silver badges13 bronze badges

Collectives™ on Stack Overflow

Using jQuery file upload plugin in a nested form_for

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related