application.js

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("jquery")

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)
//= require commontator/application

const ActiveStorageUpload = require("@excid3/uppy-activestorage-upload")
const Dashboard = require("@uppy/dashboard")
const Dropbox = require('@uppy/dropbox')
const Popper = require("@popperjs/core")
const Uppy = require("@uppy/core")

require("@uppy/core/dist/style.css")
require("@uppy/dashboard/dist/style.css")

document.addEventListener('turbolinks:load', () => {
  document.querySelectorAll('[data-uppy]').forEach(element => setupUppy(element))
})

function appendUploadedFile(element, file, field_name) {
  const hiddenField = document.createElement('input')

  hiddenField.setAttribute('data-pending-upload', true)
  hiddenField.setAttribute('name', field_name)
  hiddenField.setAttribute('type', 'hidden')
  hiddenField.setAttribute('value', file.response.signed_id)

  element.appendChild(hiddenField)
}

function setPreview(element, file) {
  let preview = element.querySelector('[data-behavior="uppy-preview"]')

  if (preview) {
    let src = (file.preview) ? file.preview : "https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSpj0DBTVsaja01_xWh37bcutvpd7rh7zEd528HD0d_l6A73osY"
    preview.src = src
  }
}

function setupUppy(element) {
  let direct_upload_url = document.querySelector("meta[name='direct-upload-url']").getAttribute('content')
  let field_name        = element.dataset.uppy
  let form              = element.closest('form')
  let trigger           = element.querySelector('[data-behavior="uppy-trigger"]')

  let uppy = Uppy(
    {
      allowMultipleUploads: true,
      autoProceed:          false,
      debug:                true,
      logger:               Uppy.debugLogger,
      restrictions:         {
        maxFileSize:        10485760, // 10MB
        minNumberOfFiles:   1,
        allowedFileTypes: [
          'application/msword',
          'application/pdf',
          'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
          'text/plain'
        ]
      }
    }
  )

  trigger.addEventListener('click', (event) => event.preventDefault())

  uppy.use(ActiveStorageUpload, {
    directUploadUrl: direct_upload_url
  })

  uppy.use(Dashboard, {
    closeAfterFinish: false,
    inline:           true,
    note:             'PDF, Word (.doc and .docx), and text files only; each file may be up to 10MB',
    showProgressDetails: true,
    trigger:          trigger
  })
  .use(Dropbox, {
    target: Dashboard,
    companionUrl: 'https://proofreadingservices-companion.herokuapp.com/'
  })

  uppy.on('complete', (result) => {
    console.log(result)
    // Rails.ajax
    // or show a preview:
    element.querySelectorAll('[data-pending-upload]').forEach(element => element.parentNode.removeChild(element))

    result.successful.forEach(file => {
      appendUploadedFile(element, file, field_name)
      setPreview(element, file)
    })

    uppy.reset()
  })
}

Hi, i’m trying to do the same but i’m getting a cors error “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. Don’t you have problems with that?

Do you have the CORS settings configured?

since i couldn't configure my own server, i'm using yours, but it doesn't respond with signed_id, so before I go crazy with this i will implement only local.