Ask A Question


You’re not receiving notifications from this thread.

How to use Uppy with ActiveStorage Discussion

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
Create an account Log in

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

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

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