excid3 / uppy-activestorage-upload

Rails ActiveStorage DirectUploads engine for Uppy

uppy-activestorage-upload

The ActiveStorage Upload plugin handles Ruby on Rails ActiveStorage direct uploads with Uppy.

Example

Add this line to your HEAD tag.

<%= tag.meta name: "direct-upload-url", content: rails_direct_uploads_path %>

Then use ActiveStorageUpload as an Uppy plugin in your Javascript pack.

import Uppy from '@uppy/core'
import ActiveStorageUpload from '@excid3/uppy-activestorage-upload'

let uppy = new Uppy(options)
uppy.use(ActiveStorageUpload, {
  directUploadUrl: document.querySelector("meta[name='direct-upload-url']").getAttribute("content")
})

Installation

yarn add @excid3/uppy-activestorage-upload
# or
npm install @excid3/uppy-activestorage-upload --save

We recommend installing from yarn and then using a module bundler such as esbuild.

License

The MIT License.

uppy-activestorage-upload's Issues

Not compatible with Uppy v4 (could not resolve "@uppy/utils/lib/settle")

Uppy v4.0.0 was released this month (July 2024):
https://github.com/transloadit/uppy/blob/main/CHANGELOG.md#400

Trying to use it with uppy-activestorage-upload returns this error:

✘ [ERROR] Could not resolve "@uppy/utils/lib/settle"

    node_modules/@excid3/uppy-activestorage-upload/lib/index.js:8:19:
      8 │ import settle from "@uppy/utils/lib/settle"
        ╵                    ~~~~~~~~~~~~~~~~~~~~~~~~

  The path "./lib/settle" is not exported by package "@uppy/utils":

    node_modules/@uppy/utils/package.json:19:13:
      19 │   "exports": {
         ╵              ^

  You can mark the path "@uppy/utils/lib/settle" as external to exclude it from the bundle, which
  will remove this error and leave the unresolved path in the bundle.

1 error
node:child_process:929
    throw err;

settle was removed here:
https://github.com/transloadit/uppy/pull/5210/files

But is still used here:

uppy-activestorage-upload/lib/index.js

Line 165 in f7b9ed9

return settle(promises)

I think it can be replaced with await Promise.allSettled

Cannot import (CommonJS vs. ES Module)

Hi there, I'm having an issue that has also been described by others in the comments of the related GoRails screencast. When I attempt to import into my Rails 6 app I get the following error:

Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'

Which seems to be related to the module being exported (index.js, line 12) as a CommonJS module:

module.exports = class ActiveStorageUpload extends BasePlugin {

Instead of as an ES Module, which (if I make a local change to the following) does work as expected in my setup:

export default class ActiveStorageUpload extends BasePlugin {

The recent changes I can see in the project history (such as updating the readme to use 'import' rather than 'require') also seem to imply an ES Module setup, but the export hasn't been modified.

If switching to an ES Module is appropriate, I'd be happy to submit a PR, but I'm wondering if I'm just missing something?

Thanks! 🙏

Can't see the status bar after upgrading to 3.x

Hello there!

I'm not sure if this is an issue on my end or not, but I can't see the status bar after upgrading to Uppy 3.

The image gets uploaded perfectly fine, but the status (progress) bar is not there, the <div class="uppy-StatusBar is-waiting"> is there in the dashboard, but with no content on it.

Here is my code:

import { Controller } from "@hotwired/stimulus"

import Uppy from '@uppy/core'
import Dashboard from '@uppy/dashboard'
import Webcam from '@uppy/webcam'
import ActiveStorageUpload from '@excid3/uppy-activestorage-upload'

export default class extends Controller {
  static values = { }

  connect() {
    const directUploadUrl = document.querySelector('meta[name="direct-upload-url"]').content
    let uppy = new Uppy({
      autoProceed: true,
      allowMultipleUploads: false,
      restrictions: {
        maxNumberOfFiles: 1,
        maxFileSize: 51200000,
        allowedFileTypes: ['image/*', 'application/pdf']
      }
    })
    .use(Dashboard, {
      target: '.files-zone',
      inline: true,
      proudlyDisplayPoweredByUppy: false,
      showSelectedFiles: false,
      height: 300
    })
    .use(Webcam, {
      target: Dashboard,
      modes: ['picture']
    })
    .use(ActiveStorageUpload, {
      directUploadUrl
    })
    .on('complete', (result) => {
      ...
    })
  }
}

Install via importmap

Is it possible to install this via importmap in a Rails 7 app?

Can't install "@excid3/uppy-activestorage-upload" package

Hello everyone!

When I'm trying to install package by using command yarn add @excid3/uppy-activestorage-upload, I'm getting:

error An unexpected error occurred: "https://registry.yarnpkg.com/@excid3%2fuppy-activestorage-upload: Not found".

Same with npm install @excid3/[email protected]

 Not Found - GET https://registry.npmjs.org/@excid3%2fuppy-activestorage-upload - Not found

Best regards and thank you for amazing work :)