Skip to content

Instantly share code, notes, and snippets.

@martinstreicher martinstreicher/application.js Secret

Created Feb 23, 2020
What would you like to do?
// 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.
// 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")
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)
function setPreview(element, file) {
let preview = element.querySelector('[data-behavior="uppy-preview"]')
if (preview) {
let src = (file.preview) ? file.preview : ""
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: [
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: ''
uppy.on('complete', (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)

This comment has been minimized.

Copy link

matedemorphy commented May 19, 2020

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?


This comment has been minimized.

Copy link
Owner Author

martinstreicher commented May 19, 2020

Do you have the CORS settings configured?


This comment has been minimized.

Copy link

matedemorphy commented May 20, 2020

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.