Question

I’m using the jQuery File Upload plugin (documentation here) integrated into my Rails 3.2.1 app (set up based on documentation here) to upload photos into my app.

I’ve set up the plugin so that it automatically uploads all the files that have been selected without the user having to do anything else. Once the photos have been uploaded (and the according entries created in the DB), I’d like the user to be able to enter a title for each of the photos.

However, in the template script that displays the uploaded photos, I’m struggling to create an edit form for each of the photos that have been uploaded. I know creating a form for each photo is far from elegant, but it appears to be the only way in this context (unless I’m missing something obvious here?).

<script id="template-download" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
            <div class="template-download nofade">
                {% if (file.error) { %}
                    {%=file.name%}
                    <span>{%=fileUploadErrors[file.error] || file.error%}</span>
                {% } else { %}
                    {% if (file.thumbnail_url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.mini_url%}"></a>
                        <%= form_for Photo.find(<---- ID SHOULD BE HERE ---->) do |f| %>
                            <%= f.text_field :title %>
                            <button class="btn btn-danger btn-small" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"><i class="icon-white icon-trash"></i> Delete</button>
                            <%= f.submit %>
                        <% end %>
                    {% } %}
                {% } %}
            </div>
    {% } %}
</script>

I have a variable which is

file.photo_id

that contains the ID of the relevant photo, but trying to create a form for it from

<%= form_for Photo.find("{%= file.photo_id %}") do |f| %>

only returns this error:

Couldn't find Photo with id={%= file.photo_id %}

I’ve tried variations like Photo.find({%= file.photo_id %}) too, but to no avail.

I know this is quite a specific problem to a specific plugin, but thought it might still be worth asking. Anyone know how to pass in the photo ID, or even better has hints of how to solve this problem in a more elegant manner?

Answer 1

After all files uploaded, the plugin will list down all files using template-download

I would recommend to use ajax over form submit to update title of each file shown on the page.

Here is how you can achieve this

<script id="template-download" type="text/html">
    {% for (var i=0, files=o.files, l=files.length, file=files[0]; i<l; file=files[++i]) { %}
            <div class="template-download nofade">
                {% if (file.error) { %}
                    {%=file.name%}
                    <span>{%=fileUploadErrors[file.error] || file.error%}</span>
                {% } else { %}
                    {% if (file.thumbnail_url) { %}
                        <a href="{%=file.url%}" title="{%=file.name%}" rel="gallery"><img src="{%=file.mini_url%}"></a>
                            <input type="text" size="30" name="photo"/>
                            <a href="photos/{%=file.photo_id%}" class=".update-btn">Save</a>
                            <button class="btn btn-danger btn-small" data-type="{%=file.delete_type%}" data-url="{%=file.delete_url%}"><i class="icon-white icon-trash"></i> Delete</button>
                    {% } %}
                {% } %}
            </div>
    {% } %}
</script>

If you notice, I have replace form_tag with

<input type="text" size="30" name="photo"/>
<a href="photos/{%=file.photo_id%}" class=".update-btn">Save</a>

Now you will see Save link beside each textbox to enter title.

Next is action on clicking the link.

$(function() {
     $('.update-btn').live("click", function() {
        var title = $(this).previous();
        $.ajax({
            url: $(this).attr('href'),
            type: "POST",
            data: { _method: 'PUT', title.attr('name'): title.val() },
            dataType: 'json',            
            success: function(msg) {
               //You may disable link after successful action
            }
        });
     });
  });

Above code binds click event to each Save link and send PUT request to PhotosController.

I am not good at javascript/jQuery but it should work.