active_storage_drag_and_drop 0.4.0 → 1.0.0

data/app/assets/stylesheets/active_storage_drag_and_drop.css

@@ -1,9 +1,91 @@
-.asdndzone {
-  min-height: 100px;
-  border: 2px solid rgba(0, 0, 0, 0.3);
-  background: rgba(0,0,0,0.1);
-  padding-top: 60px;
-  text-align: center;
+label.asdndzone * {
+  box-sizing: border-box;
+}
+
+label.asdndzone {
+  box-sizing: border-box;
+  display: block;
+  border: 3px solid #c8ce3e;
+  border-radius: 6px;
+  min-height: 220px;
+  max-width: 310px;
   width: 100%;
+  padding: 99px 20px 20px;
+  text-align: center;
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 21px;
+  letter-spacing: 0.6px;
+}
+
+label.asdndzone .asdndz-highlight {
+  color: #8dc63f;
+}
+
+label.asdndzone .asdndz__icon-container {
+  text-align: left;
+}
+
+label.asdndzone .direct-upload {
+  display: inline-block;
+  position: relative;
+  border-radius: 10px;
+  height: 18px;
+  min-width: 126px;
+  background-color: #f5f5f5;
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 11px;
+  letter-spacing: 0.3px;
+  color: #212121;
+  margin-top: 8px;
+  padding: 5px 10px;
+}
+
+label.asdndzone .direct-upload__complete {
+  background-color: #c8ce3e;
+}
+
+label.asdndzone .direct-upload__progress {
+  opacity: 0.57;
+  background-color: #c8ce3e;
+  border-radius: 10px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  height: 100%;
+  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
+  transform: translate3d(0, 0, 0);
+}
+
+label.asdndzone .direct-upload__remove {
   display: inline-block;
+  vertical-align: top;
+  margin-top: 13px;
+  font-family: 'Nunito Sans', sans-serif;
+  font-size: 11px;
+  font-weight: bold;
+  text-decoration: none;
+  color: #212121;
+}
+
+label.asdndzone .direct-upload__filename {
+  position: relative;
+  max-width: 190px;
+  overflow: hidden;
+  display: inline-block;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+label.asdndzone .direct-upload__filesize {
+  position: relative;
+  float: right;
+  font-size: 10px;
+  letter-spacing: 0.1px;
+  color: #707e87;
+  padding-left: 7px;
+}
+
+label.asdndzone .direct-upload[data-direct-upload-id='error'] {
+  border: 1px solid red;
 }

data/app/javascript/active_storage_drag_and_drop/default_ui.js

@@ -0,0 +1,77 @@
+// @flow
+
+import { fileSizeSI } from './helpers'
+
+export function errorUI (event: CustomEvent) {
+  let { id } = event.detail
+  const { error, iconContainer, file } = event.detail
+  if (event.defaultPrevented) return
+
+  if (!id) {
+    id = 'error'
+    window.ActiveStorageDragAndDrop.paintUploadIcon(iconContainer, id, file, false)
+  }
+  const element = document.querySelector(`[data-direct-upload-id="${id}"] .direct-upload`)
+  if (!element) return
+
+  element.setAttribute('title', error)
+  element.classList.add('direct-upload--error')
+}
+
+export function endUI (event: CustomEvent) {
+  const { id } = event.detail
+  if (!id || event.defaultPrevented) return
+
+  const element = document.querySelector(`[data-direct-upload-id="${id}"] .direct-upload`)
+  if (!element) return
+
+  const classes = element.classList
+  classes.remove('direct-upload--pending')
+  classes.add('direct-upload--complete')
+}
+
+export function initializeUI (event: CustomEvent) {
+  if (event.defaultPrevented) return
+
+  const { id, file, iconContainer } = event.detail
+  window.ActiveStorageDragAndDrop.paintUploadIcon(iconContainer, id, file, false)
+}
+
+export function progressUI (event: CustomEvent) {
+  if (event.defaultPrevented) return
+
+  const { id, progress } = event.detail
+  const progressElement = document.querySelector(`[data-direct-upload-id="${id}"] .direct-upload__progress`)
+  if (progressElement) progressElement.style.width = `${progress}%`
+}
+
+export function placeholderUI (event: CustomEvent) {
+  if (event.defaultPrevented) return
+
+  const { id, file, iconContainer } = event.detail
+  window.ActiveStorageDragAndDrop.paintUploadIcon(iconContainer, id, file, true)
+}
+
+export function cancelUI (event: CustomEvent) {
+  if (event.defaultPrevented) return
+
+  const { id } = event.detail
+  document.querySelectorAll(`[data-direct-upload-id="${id}"]`).forEach(element => {
+    element.remove()
+  })
+}
+
+export function paintUploadIcon (iconContainer: HTMLElement, id: string | number, file: File, complete: boolean) {
+  const uploadStatus = (complete ? 'complete' : 'pending')
+  const progress = (complete ? 100 : 0)
+  iconContainer.insertAdjacentHTML('beforeend', `
+  <div data-direct-upload-id="${id}">
+    <div class="direct-upload direct-upload--${uploadStatus}">
+      <div class="direct-upload__progress" style="width: ${progress}%"></div>
+      <span class="direct-upload__filename">${file.name}</span>
+      <span class="direct-upload__filesize">${fileSizeSI(file.size)}</span>
+    </div>
+    <a href='remove' class='direct-upload__remove'>X</a>
+  </div>
+  `)
+}

data/app/javascript/active_storage_drag_and_drop/drag_and_drop_form_controller.js

@@ -0,0 +1,87 @@
+// @flow
+
+import { dispatchEvent } from './helpers'
+import { endUI, errorUI, cancelUI } from './default_ui'
+import { DragAndDropUploadController } from './drag_and_drop_upload_controller'
+
+export class DragAndDropFormController {
+  form: HTMLFormElement;
+  uploadControllers: Array<DragAndDropUploadController>;
+
+  constructor (form: HTMLFormElement) {
+    this.form = form
+    this.uploadControllers = []
+  }
+
+  start (callback: Function) {
+    const startUploadControllers = () => {
+      const nextUploadController = this.uploadControllers.shift()
+      if (nextUploadController)
+        nextUploadController.start(error => {
+          if (error) {
+            this.dispatchError(error, nextUploadController)
+            callback(error)
+          } else startUploadControllers()
+        })
+      else {
+        callback()
+        const event = this.dispatch('end')
+        endUI(event)
+      }
+    }
+    this.dispatch('start')
+    startUploadControllers()
+  }
+
+  dispatch (name: string, detail: {} = {}) {
+    return dispatchEvent(this.form, `dnd-uploads:${name}`, { detail })
+  }
+
+  dispatchError (error: Error, uploadController: DragAndDropUploadController) {
+    const { file, iconContainer } = uploadController
+    const event = dispatchEvent(
+      this.form,
+      'dnd-upload:error',
+      { detail: { error, file, iconContainer } }
+    )
+    errorUI(event)
+  }
+
+  queueUpload (input: HTMLInputElement, file: File) {
+    if (!input.getAttribute('multiple')) this.unqueueUploadsPerInput(input)
+    try {
+      this.uploadControllers.push(new DragAndDropUploadController(input, file))
+    } catch (error) {
+      const detail = {
+        id: null,
+        file: file,
+        error: error,
+        iconContainer: document.getElementById(input.dataset.iconContainerId)
+      }
+      dispatchErrorWithoutAttachment(input, detail)
+    }
+  }
+
+  unqueueUploadsPerInput (input: HTMLInputElement) {
+    const zone = input.closest('label.asdndzone')
+    if (!zone) return
+
+    zone.querySelectorAll('[data-direct-upload-id]').forEach(element => { element.remove() })
+    this.uploadControllers.splice(0, this.uploadControllers.length)
+  }
+
+  unqueueUpload (id: number) {
+    const index = this.uploadControllers.findIndex(uploader => (uploader.upload.id === id))
+    const uploadController = this.uploadControllers[index]
+    this.uploadControllers.splice(index, 1)
+    const event = uploadController && (uploadController.dispatch instanceof Function)
+      ? uploadController.dispatch('cancel')
+      : this.dispatch('cancel', { id: 'error' })
+    cancelUI(event)
+  }
+}
+
+function dispatchErrorWithoutAttachment (input, detail) {
+  const event = dispatchEvent(input, 'dnd-upload:error', { detail })
+  errorUI(event)
+}

data/app/javascript/active_storage_drag_and_drop/drag_and_drop_upload_controller.js

@@ -0,0 +1,102 @@
+// @flow
+
+import { dispatchEvent, fileSizeSI } from './helpers'
+import { endUI, errorUI, initializeUI, progressUI } from './default_ui'
+import { DirectUpload } from 'activestorage'
+const eventFamily = 'dnd-upload'
+
+export class DragAndDropUploadController {
+  input: HTMLInputElement;
+  form: HTMLFormElement;
+  url: string;
+  iconContainer: HTMLElement;
+  file: File;
+  upload: DirectUpload;
+
+  constructor (input: HTMLInputElement, file: File) {
+    validate(input, file)
+    const form = input.closest('form')
+    const iconContainer = document.getElementById(input.dataset.iconContainerId)
+    if (!(form instanceof HTMLFormElement && iconContainer)) return
+
+    this.input = input
+    this.form = form
+    this.url = this.input.dataset.directUploadUrl
+    this.iconContainer = iconContainer
+    this.file = file
+    this.upload = new DirectUpload(this.file, this.url, this)
+    const event = this.dispatch('initialize')
+    initializeUI(event)
+  }
+
+  start (callback: Function) {
+    this.dispatch('start')
+    this.upload.create((error, blob) => {
+      if (error) {
+        // Handle the error
+        this.dispatchError(error)
+        callback(error)
+      } else {
+        // Add an appropriately-named hidden input to the form with a
+        // value of blob.signed_id so that the blob ids will be
+        // transmitted in the normal upload flow
+        const hiddenField = document.createElement('input')
+        hiddenField.setAttribute('type', 'hidden')
+        hiddenField.setAttribute('value', blob.signed_id)
+        hiddenField.setAttribute('name', this.input.getAttribute('name') || '')
+        hiddenField.setAttribute('data-direct-upload-id', this.upload.id)
+        this.form.appendChild(hiddenField)
+        const event = this.dispatch('end')
+        endUI(event)
+        callback(error)
+      }
+    })
+  }
+
+  dispatch (name: string,
+    detail: { file?: File, id?: number, iconContainer?: Element, error?: Error } = {}) {
+    detail.file = this.file
+    detail.id = this.upload.id
+    detail.iconContainer = this.iconContainer
+    return dispatchEvent(this.input, `${eventFamily}:${name}`, { detail })
+  }
+
+  dispatchError (error: Error) {
+    const event = this.dispatch('error', { error })
+    errorUI(event)
+  }
+
+  directUploadWillCreateBlobWithXHR (xhr: XMLHttpRequest) {
+    this.dispatch('before-blob-request', { xhr })
+  }
+
+  directUploadWillStoreFileWithXHR (xhr: XMLHttpRequest) {
+    this.dispatch('before-storage-request', { xhr })
+    xhr.upload.addEventListener('progress', (event: Event) => this.uploadRequestDidProgress(event))
+  }
+
+  uploadRequestDidProgress (uploadEvent: Event) {
+    // $FlowFixMe
+    const progress = uploadEvent.loaded / uploadEvent.total * 100
+    if (!progress) return
+
+    const event = this.dispatch('progress', { progress })
+    progressUI(event)
+  }
+}
+
+class ValidationError extends Error {
+  constructor (...args) {
+    super(...args)
+    Error.captureStackTrace(this, ValidationError)
+  }
+}
+
+function validate (input, file) {
+  const sizeLimit = parseInt(input.getAttribute('size_limit'))
+  const accept = input.getAttribute('accept')
+  if (accept && !accept.split(', ').includes(file.type))
+    throw new ValidationError('Invalid filetype')
+  else if (sizeLimit && file.size > sizeLimit)
+    throw new ValidationError(`File too large. Can be no larger than ${fileSizeSI(sizeLimit)}`)
+}

data/app/javascript/active_storage_drag_and_drop/helpers.js

@@ -1,59 +1,15 @@
-export function dispatchEvent (element, type, eventInit = {}) {
-  const { bubbles, cancelable, detail } = eventInit
-  const event = document.createEvent('Event')
-  event.initEvent(type, bubbles || true, cancelable || true)
-  event.detail = detail || {}
+// @flow
+
+export function dispatchEvent (element: Element, type: string,
+  eventInit: { bubbles?: boolean, cancelable?: boolean, detail: {} } = {}) {
+  const { bubbles = true, cancelable = true, detail = {} } = eventInit
+  const event = new CustomEvent(type, { bubbles, cancelable, detail })
   element.dispatchEvent(event)
   return event
 }
 
-export function defaultErrorEventUI (event) {
-  if (!event.defaultPrevented) {
-    const { id, error } = event.detail
-    const element = document.getElementById(`direct-upload-${id}`)
-    element.classList.add('direct-upload--error')
-    element.setAttribute('title', error)
-  }
-}
-
-export function defaultEndEventUI (event) {
-  if (!event.defaultPrevented) {
-    const { id } = event.detail
-    const element = document.getElementById(`direct-upload-${id}`)
-    element.classList.remove('direct-upload--pending')
-    element.classList.add('direct-upload--complete')
-  }
-}
-
-export function hasClassnameInHeirarchy (element, classname) {
-  if (element && element.classList) {
-    if (element.classList.contains(classname)) {
-      return true
-    } else {
-      return hasClassnameInHeirarchy(element.parentNode, classname)
-    }
-  }
-}
-
-export function getClassnameFromHeirarchy (element, classname) {
-  if (element && element.classList) {
-    if (element.classList.contains(classname)) {
-      return element
-    } else {
-      return getClassnameFromHeirarchy(element.parentNode, classname)
-    }
-  }
-}
-
-export function fileUploadUIPainter (iconContainer, id, filename, complete) {
-  // the only rule here is that all root level elements must have the data: { direct_upload_id: [id] } attribute ala: 'data-direct-upload-id="${id}"'
-  var cname = (complete ? 'complete' : 'pending')
-  var progress = (complete ? 100 : 0)
-  iconContainer.insertAdjacentHTML('beforeend', `
-    <div id="direct-upload-${id}" class="direct-upload direct-upload--${cname}" data-direct-upload-id="${id}">
-      <div id="direct-upload-progress-${id}" class="direct-upload__progress" style="width: ${progress}%"></div>
-      <span class="direct-upload__filename">${filename}</span>
-    </div>
-    <a href='remove' class='direct-upload__remove' data-dnd-delete='true' data-direct-upload-id="${id}">x</a>
-  `)
+export function fileSizeSI (bytes: number) {
+  let e = Math.log(bytes) / Math.log(1000) | 0
+  const size = (bytes / Math.pow(1000, e) + 0.5) | 0
+  return size + (e ? 'kMGTPEZY'[--e] + 'B' : ' Bytes')
 }

data/app/javascript/active_storage_drag_and_drop/index.js

@@ -1,6 +1,9 @@
-import { start } from './ujs'
+// @flow
 
-export { start }
+import { start, processUploadQueue } from './ujs'
+import { paintUploadIcon } from './default_ui'
+
+export { start, paintUploadIcon, processUploadQueue }
 
 function autostart () {
   start()