Multiple image upload in a nested form

Question

I have a nested form for an Item model that has nested attributes of pictures. All the code is basically the same as https://gist.github.com/mhenrixon/978371 I've been trying to use jQuery File Upload as shown in railscast 381 but I'm only able to upload one image. As far as I can tell everything looks as it should and I have no idea what the problem is! below is the log after trying to add multiple images with a new item

  Started POST "/admin/items" for 127.0.0.1 at 2013-05-03 13:06:53 +0100
Processing by Admin::ItemsController#create as HTML
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"2xP9nuMsiWmGxrw2LLHNURahpdktDW7cf82WjOfXQh8=", "item"=>{"name"=>"ddd", "price"=>"", "description"=>"", "stock"=>"", "pictures_attributes"=>{"0"=>{"id"=>"", "attachable_id"=>"", "attachable_type"=>"Item", "image"=>#<ActionDispatch::Http::UploadedFile:0x007fea61735ae8 @headers="Content-Disposition: form-data; name=\"item[pictures_attributes][0][image]\"; filename=\"image.jpg\"\r\nContent-Type: image/jpeg\r\n", @tempfile=#<File:/var/folders/r3/1gzzfk2964b4tvvndtnr527m0000gn/T/RackMultipart20130503-25456-ynk0x0>, @content_type="image/jpeg", @original_filename="image.jpg">}}}, "button"=>""}
  Admin Load (0.2ms)  SELECT "admins".* FROM "admins" WHERE "admins"."id" = 1 LIMIT 1
   (0.2ms)  begin transaction
  SQL (0.7ms)  INSERT INTO "items" ("created_at", "description", "dimensions", "for_sale", "name", "price", "stock", "updated_at") VALUES (?, ?, ?, ?, ?, ?, ?, ?)  [["created_at", Fri, 03 May 2013 12:06:55 UTC +00:00], ["description", ""], ["name", "ddd"], ["price", nil], ["stock", nil], ["updated_at", Fri, 03 May 2013 12:06:55 UTC +00:00]]
  SQL (0.2ms)  INSERT INTO "pictures" ("attachable_id", "attachable_type", "created_at", "image", "updated_at") VALUES (?, ?, ?, ?, ?)  [["attachable_id", 47], ["attachable_type", "Item"], ["created_at", Fri, 03 May 2013 12:06:55 UTC +00:00], ["image", "image.jpg"], ["updated_at", Fri, 03 May 2013 12:06:55 UTC +00:00]]
   (3.7ms)  commit transaction
Redirected to http://localhost:3000/admin/items

Answer 1

Use the name attribute of your file input in an array notation

<input type="file" name="myname" />

Your javascript can look like:

if (formdata){
    formdata.append("myname[]", files);
}

It should also work the other way around:

<input type="file" name="myname[]" />