Skip to main content
Ask A Question
You’re not receiving notifications from this thread.

How to use Uppy with ActiveStorage Discussion

General • Asked by Chris Oliver

Great screencast. Any plans for describing how to do the same with Shrine? I liked your old screencasts about Shrine and Tus a lot.

Thank you for doing this video. It's great.

Can you give pointers to how to implement multiple file upload fields on a single form? For example, if I wanted users to upload multiple images in one field and multiple videos in another field?

This is awesome - is it selfish to ask for more? What Ivan is discussing sounds great - would also love to see an Uppy + Shrine episode

Thanks so much for this, Chris. It really helped me refactor my Javascript.

In case anyone else encounters this, I was experiencing some Turbolinks/Uppy madness and it seems to be related to not loading the pack tags for my Uppy-related webpacker pack in the head of the document (I was splitting it so that that the Uppy JS isn't loaded everywhere in the application). Someone in GoRails Slack mentioned using content_for :head for the pack tags in the view and yield :head in application.html.erb, and that seems to have cleared things up. At least for now.

I would like to see a multiple upload example, too. I would also like to see how this works when the form submitted does not validate on the server? How does one reset the form fields especially after uploading files dynamically?

Thanks for showing this. I can see how file uploads can be easier. If I want to have the interface and UX of the dashboard, how do I incorporate that? For example, I like the camera option shown in the uppy demo..

Uppy provides support for a number of different sources (webcam, Google Drive, Instagram, external links, etc), each with their own plugins. Some of the configurations are more complicated than others, but the webcam functionality is pretty straightforward

Import the JS and CSS for the webcam plugin to your Javascript file (the below is for webpacker)

import Webcam from '@uppy/webcam'
import '@uppy/webcam/dist/style.css'

Add the webcam plugin to your Uppy instance in your initializer:

yourUppyInstance.use(Webcam, {
      target: Dashboard,
      countdown: false,
      modes: ['picture'],
      mirror: false,
      facingMode: 'environment',

I discovered a bit of a gotcha in that file data added to the Uppy dashboard via normal file picker interface and the webcam are slightly different. I had to do the following in my Uppy core initializer to add a file name to the blobs that are generated via the webcam. The blob data doesn't have a name attribute but it needs one.

let yourUppyInstance = Uppy({
        id: 'document',
        // set file name for blob captured from webcam
        onBeforeFileAdded: (file, files) => {
                if(! {
                return file

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 30,005+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.