Skip to content

Instantly share code, notes, and snippets.

@martinstreicher martinstreicher/application.js Secret

Created Feb 23, 2020
Embed
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.
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()
})
}
@matedemorphy

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?

@martinstreicher

This comment has been minimized.

Copy link
Owner Author

martinstreicher commented May 19, 2020

Do you have the CORS settings configured?

@matedemorphy

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.