All threads / How to use Uppy with ActiveStorage Discussion
Ask A Question


You’re not receiving notifications from this thread.

How to use Uppy with ActiveStorage Discussion


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

Thank You For Sharing This !


Anyone running their own Transloadit Companion server?


Or does anyone have the darn Dropbox plugin working with Active Storage and S3?

What did you end up with in the end? I'm working on getting S3 up-and-running but trying to understand the companion side of things


I've followed your tutorial and haven't been able to get uppy pop up to open upon click of "upload". Any ideas as to why? Is there a way to use it without Webpack?

@henry did you ever get to work - i got the same issue :'(

I had the same issue and it turned out I put the Upload link outside of the data-uppy="photo[image] div containter.

Make sure you look into the form file in the source code.


**Excellent episode Chris! **But then again, you always rock. I was able to implement this and change to Shrine quite easily. It also solved my multiple forms per page issue.

**Quick question: ** I allow an existing image to be deleted from a page with ajax. The result is to replace the video with a new form to allow a new upload. But, using JS to place the new form works, but calling setupUppy() fails as not being found even though the page was rendered with it and it works for the forms populated when the page is first rendered. Any ideas?

Thank you!

  • Paul

Another vote for seeing this with Shrine :)


Masud - Currently working on this with Ahad using Shrine + Stimulus


Hey, great cast, it is really useful for a project i'm currently working on. I just have one tiny problem. When i get to the uppy.reset() part, I'm getting the following error:

[Uppy] [17:41:28] Error: Can’t set state for uppy-screen/shot/2020/05/08/at/2/48/50/png-10-10-1d-1d-10-10-1e-1e-1e-image/png-1117029-1588924136020 (the file could have been removed)

Here's how I'm currently using it:

uppy.on('complete', (result) => {
element.querySelectorAll('[data-pending-upload]').forEach(element => element.parentNode.removeChild(element))
result.successful.forEach(file => {
appendUploadedFile(element, file, field_name)
setPreview(element, file)

Not sure if I'm missing something.

I cant find out how to paste code in this forum so I'm sorry if it looks all messy.


This seems like a prime candidate to become a stimulus controller.

I also would like to see all this as a stimulus controller! @excid3


I got Uppy working nicely, but I have an issue when using the progressBar. So the first time it works just fine, but then later uploads don't show the progress, only when it is 100% done.

After deleting my browser cache it starts to work again, any clue?

Turns out uppy bugs out when you have a service worker on the backend.. no clue why


How can I do this in such a way that I don't have to click on the upload button but instead the upload 'box' is shown on the view?


Anyone figure out how to test Uppy with Capybara without doing javascript hacks in your test?


Straight out the box i'm having issues with Uppy. I get the following error index.js:2209 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>' I have Googled this, and It's to do with the way the the functions in index.js are exported. It's asking that they are exported using export default rather than module.exports xxx. Is there any way around this? Obviously, it's not good practice to modify files in node_modules. Thanks


If anyone else gets this error, it's a Babel configuration issue. I ended up using the babel config file from the tutorial.

Hey Tom, i've been fighting this for a day or two. Which babel config file are you using? The one from Chris's code or the one from the Uppy tutorial?

I'm still having this problem myself as well.

Yeah I've put this on the back burner for now. I'll see if I need to come back to it.

I ran into this problem and solved it by updating the babel.config.js specifically, I added: const sourceType = "unambiguous" at the top where the variables are declared, then at the very end after plugins: [...].filter(Boolean), sourceType <- added my sourceType constant.


great episode Chris!

I would like to know who do you manage the external plugins with Companion.

For example: I tried to use the most simple plugin: URL (it doesn't need extra configs)

I created a repo with a simple version of the companion server

this is the js in my project:

const companionUrl = 'http://localhost:3020';
uppy.use(Url, { target: Dashboard, companionUrl: companionUrl });

mine: config/initializers/content_security_policy.rb

srcs += ["http://localhost:3020"]
policy.connect_src :self, :https, *srcs

However at this point I'm facing two issues:
1- I cannot send the picture to my s3 bucket (this is something with companion)
2- I don't know what approach handle to connect the that picture with ActiveStorage


Hey Chris - big fan. Set file uploads up in my app using this tutorial and it has been great for a long time but have started having issues with this since upgrading to Rails 7.0.3 - are there any plans to upgrade the library?

The relevant error is:
index.js:11 Uncaught (in promise) TypeError: Class extends value undefined is not a constructor or null
at Object. (index.js:11:52)


Im having the same issue as Howard OLeary. Does anyone have a workaround?

I just saw that I wasmissing some updates from the repo. I just ran:
yarn remove @excid3/uppy-activestorage-upload
and then
yarn add
once more. Now it seems to behave nicely again.


I built a stimulus controller for this but ran into some issues getting the uppy stylesheets to load. I spent a lot of time trying to figure it out. Putting details here so I don't lose them or perhaps they can be helpful for somebody else. This solution is using an, as of now, unmerged request to excid3/uppy-activestorage-upload so you may/may not want to use it as a dependency.

Found this video which figures out a working solution using an unmerged pull request from excid3/uppy-activestorage-upload by puglet5/uppy-activestorage-upload.

For me relevant parts are at 1:20:26

let uppy = new Uppy({
autoProceed: false,
allowMultipleUploads: true,
debug: true,
logger: Uppy.debugLogger


package.json changed:

"dependencies": {
"@excid3/uppy-activestorage-upload": "",

"@excid3/uppy-activestorage-upload": ""

yarn install

Join the discussion

Want to stay up-to-date with Ruby on Rails?

Join 68,099+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.

    logo Created with Sketch.

    Screencast tutorials to help you learn Ruby on Rails, Javascript, Hotwire, Turbo, Stimulus.js, PostgreSQL, MySQL, Ubuntu, and more. Icons by Icons8

    © 2022 GoRails, LLC. All rights reserved.