Can't Employ Uppy inside Album form when doing Multiple Photo uploads...

Hi, I’m somewhere in the intermediate-to-advanced beginner developer range and have been getting to know Shrine over the last week. First of all, what an amazing, robust library Shine is! THANK YOU for building this, and for also creating so much documentation for it!

Here’s the problem I’ve run into: I can’t get the Uppy interface to show up on my Albums form page, when I’m trying to upload MULTIPLE Photos into the Album I’m creating in the Album form.

What Works (no uppy involvement)

I already have most of Multiple Photo Uploads working. From the Album form, I can hit the File selector (standard HTML, not the Uppy replacement), and select multiple files, and save the Album. On that Save, Rails creates the album and as many Photo records as needed, with each photo containing the Album ID, uploads them to S3, and I can display them on the Album’s Show page.

Also working: before I tried implementing Multiple uploads, I followed your walkthrough to create Single File uploads to S3 (using a lone Photo model), and got those working entirely with Uppy’s Dashboard. That still works in the app if I just try to upload a single Photo, without it being part of an album.

The Uppy Problem – It Won’t Show Up on Album form, but it Shows up on Photo form

But I can’t get Uppy’s Dashboard (or any Uppy plugin) to show up on my Albums form to replace the HTML file selector. I have all the same css classes applied to my Album form page as I do to my Photo form page, but Uppy just won’t show up on the page.

As per the Multiple Uploads guide, my Album model does NOT have an ImageUploader…it is present in the Photo model from when I was working with single file uploads, but the instructions for doing multiple Photo uploads to an Album do not add the Image_uploader to the album. When I add it, I get an error:

undefined method `image_data’ for #Album:0x00007fcca1965008 Did you mean? image_attacher

One more thing: The Shrine Demo Does Not Allow Multiple Photo Uploads into an Album form

I also explored the Rails Shrine/Uppy demo app, and noticed that its Album form only accepts a single cover album photo, which I had working when I worked with single file uploads. To upload multiple Photos to an album, you save the album first, and then on the Album’s Show page, there’s a Photo form partial where the Uppy interface appears for uploading Photos that will be attached to that Album.

Since the demo features Photos that are uploaded on the Album’s Show page, outside of the Album form, it makes me wonder if it’s even possible to upload them from within the Album form? I don’t know why they couldn’t be, but who knows….

In Closing

Any ideas how to can bring Uppy into my Album form for accepting new Photos to upload/attach to the Album?? I’m sure I’m missing something, I think my head is a little overwhelmed with all the new stuff involved with learning Shrine and Uppy. SORRY ABOUT THAT!! And any help appreciated…

1 Like

There are two separate problems here:

Initializing Uppy

But I can’t get Uppy’s Dashboard (or any Uppy plugin) to show up on my Albums form to replace the HTML file selector. I have all the same css classes applied to my Album form page as I do to my Photo form page, but Uppy just won’t show up on the page.

How are you initialising uppy on your album form? Can you please post the code?
(I strongly strongly recommend you use a tool like Stimulus JS to initialize your uppy code: it is very very robust and super simply – so much so I have edited to wiki to allow for it: Adding Direct S3 Uploads · shrinerb/shrine Wiki · GitHub )

undefined method `image_data’

I suspect it is because you are doing something like this:

        <%= form.file_field :photos, multiple: true         %>

That will not do.

it makes me wonder if it’s even possible to upload them from within the Album form?

Yes, this is definitely possible. How do I know? Because I’m doing it myself. Here’s how:

  • What you need to do is something like this: accepts nested attributes for (please google this): Ruby on Rails - Railscasts PRO #196 Nested Model Form (revised) - YouTube - (You of course needn’t do all the coffeescript etc required in that video)

  • secondly your views should look something like this:

    <%= form_with(model: @album ) # etc %>
    <%= form.fields_for :photos do |p| %>
    etc
    <% end %>
    <% end %>

Hopefully that will get you started.

Hi Ben, thanks very much for your response and sorry for my delay. By the time Discourse posted my message, I had left town and just got back yesterday.

I ended up deciding to start from scratch to replicate the official Shrine demo for Rails, so I could hopefully understand it better. It’s a little bit unconventional in terms of not using the typically Rails Show pages, but I got past that. Also, I noticed that it’s very streamlined in how it handles nested attributes compared to the Shrine documentation on Multiple Uploads, which has a lot of controller logic for converting the nested file data into a format that Shrine understand, but that logic doesn’t seem to be in the Shrine demo app, and it still works!

Anyway, I have most stuff working now…just have to get S3 uploads working, and also want to try your suggestion of calling Shrine via a Stimulus controller, since I already use Stimulus controllers when I can. I will post again if I run into any problems, but really appreciate your response!

1 Like