active_storage_drag_and_drop 0.4.0 → 1.0.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: active_storage_drag_and_drop
 version: !ruby/object:Gem::Version
-  version: 0.4.0
+  version: 1.0.0
 platform: ruby
 authors:
 - Dave O'Keeffe
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2019-01-29 00:00:00.000000000 Z
+date: 2019-04-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bootsnap
@@ -283,14 +283,14 @@ dependencies:
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.2'
+        version: 5.2.2.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: '5.2'
+        version: 5.2.2.1
 description: Provides a form helper to make it easy to make drag and drop file upload
   fields that work with Rails' Active Storage.
 email:
@@ -299,9 +299,11 @@ executables: []
 extensions: []
 extra_rdoc_files: []
 files:
+- ".babelrc"
 - ".codeclimate.yml"
 - ".eslintignore"
 - ".eslintrc.yml"
+- ".flowconfig"
 - ".gitignore"
 - ".rubocop.yml"
 - ".travis.yml"
@@ -315,14 +317,15 @@ files:
 - active_storage_drag_and_drop.gemspec
 - app/assets/javascripts/active_storage_drag_and_drop.js
 - app/assets/stylesheets/active_storage_drag_and_drop.css
-- app/assets/stylesheets/direct_uploads.css
-- app/javascript/active_storage_drag_and_drop/direct_upload_controller.js
+- app/javascript/active_storage_drag_and_drop/default_ui.js
+- app/javascript/active_storage_drag_and_drop/drag_and_drop_form_controller.js
+- app/javascript/active_storage_drag_and_drop/drag_and_drop_upload_controller.js
 - app/javascript/active_storage_drag_and_drop/helpers.js
 - app/javascript/active_storage_drag_and_drop/index.js
 - app/javascript/active_storage_drag_and_drop/ujs.js
-- app/javascript/active_storage_drag_and_drop/upload_queue_processor.js
 - bin/console
 - bin/setup
+- demo.webp
 - lib/active_storage_drag_and_drop.rb
 - lib/active_storage_drag_and_drop/form_builder.rb
 - lib/active_storage_drag_and_drop/version.rb

data/app/assets/stylesheets/direct_uploads.css

@@ -1,43 +0,0 @@
-/* direct_uploads.css */
-
-.direct-upload {
-  display: inline-block;
-  position: relative;
-  padding: 2px 4px;
-  margin: 0 3px 3px 0;
-  border: 1px solid rgba(0, 0, 0, 0.3);
-  border-radius: 3px;
-  font-size: 11px;
-  line-height: 13px;
-}
-
-.direct-upload--pending {
-  opacity: 0.6;
-}
-
-.direct-upload__progress {
-  position: absolute;
-  top: 0;
-  left: 0;
-  bottom: 0;
-  opacity: 0.2;
-  background: #0076ff;
-  transition: width 120ms ease-out, opacity 60ms 60ms ease-in;
-  transform: translate3d(0, 0, 0);
-}
-
-.direct-upload--complete .direct-upload__progress {
-  opacity: 0.4;
-}
-
-.direct-upload--error {
-  border-color: red;
-}
-
-.direct-upload__remove {
-  font-size: 0.5em;
-}
-
-input[type=file][data-direct-upload-url][disabled] {
-  display: none;
-}

data/app/javascript/active_storage_drag_and_drop/direct_upload_controller.js

@@ -1,76 +0,0 @@
-import { dispatchEvent, defaultErrorEventUI, defaultEndEventUI, fileUploadUIPainter } from './helpers'
-import { DirectUpload } from 'activestorage'
-const eventFamily = 'dnd-upload'
-
-export class DragAndDropUploadController {
-  constructor (input, file) {
-    this.input = input
-    this.form = input.closest('form')
-    this.url = this.input.dataset.directUploadUrl
-    this.iconContainer = document.getElementById(this.input.dataset.iconContainerId)
-    this.file = file
-    this.upload = new DirectUpload(this.file, this.url, this)
-    let event = this.dispatch('initialize')
-    if (!event.defaultPrevented) {
-      const { detail } = event
-      const { id, file, iconContainer } = detail
-      fileUploadUIPainter(iconContainer, id, file.name, false)
-    }
-  }
-
-  start (callback) {
-    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.name = this.input.name
-        hiddenField.setAttribute('data-direct-upload-id', this.upload.id)
-        this.form.appendChild(hiddenField)
-        let event = this.dispatch('end')
-        defaultEndEventUI(event)
-        callback(error)
-      }
-    })
-  }
-
-  dispatch (name, detail = {}) {
-    detail.file = this.file
-    detail.id = this.upload.id
-    detail.iconContainer = this.iconContainer
-    return dispatchEvent(this.input, `${eventFamily}:${name}`, { detail })
-  }
-
-  dispatchError (error) {
-    const event = this.dispatch('error', { error })
-    defaultErrorEventUI(event)
-  }
-
-  directUploadWillCreateBlobWithXHR (xhr) {
-    this.dispatch('before-blob-request', { xhr })
-  }
-  // directUploadWillStoreFileWithXHR
-  directUploadWillStoreFileWithXHR (xhr) {
-    this.dispatch('before-storage-request', { xhr })
-    xhr.upload.addEventListener('progress', event => this.uploadRequestDidProgress(event))
-  }
-
-  uploadRequestDidProgress (event) {
-    const progress = event.loaded / event.total * 100
-    if (progress) {
-      let event = this.dispatch('progress', { progress })
-      if (!event.defaultPrevented) {
-        const { id, progress } = event.detail
-        const progressElement = document.getElementById(`direct-upload-progress-${id}`)
-        progressElement.style.width = `${progress}%`
-      }
-    }
-  }
-}

data/app/javascript/active_storage_drag_and_drop/upload_queue_processor.js

@@ -1,113 +0,0 @@
-import { dispatchEvent, defaultErrorEventUI, defaultEndEventUI, fileUploadUIPainter } from './helpers'
-import { DragAndDropUploadController } from './direct_upload_controller'
-export const uploaders = []
-
-class ValidationError extends Error {
-  constructor (...args) {
-    super(...args)
-    Error.captureStackTrace(this, ValidationError)
-  }
-}
-
-export class UploadQueueProcessor {
-  constructor (form) {
-    this.form = form
-    this.current_uploaders = []
-    uploaders.forEach(uploader => {
-      if (form === uploader.form) {
-        this.current_uploaders.push(uploader)
-      }
-    })
-  }
-
-  start (callback) {
-    const startNextUploader = () => {
-      const nextUploader = this.current_uploaders.shift()
-      if (nextUploader) {
-        nextUploader.start(error => {
-          if (error) {
-            this.dispatchError(error)
-            callback(error)
-          } else {
-            startNextUploader()
-          }
-        })
-      } else {
-        callback()
-        let event = this.dispatch('end')
-        defaultEndEventUI(event)
-      }
-    }
-
-    this.dispatch('start')
-    startNextUploader()
-  }
-
-  dispatch (name, detail = {}) {
-    return dispatchEvent(this.form, `dnd-uploads:${name}`, { detail })
-  }
-
-  dispatchError (error) {
-    const event = this.dispatch('error', { error })
-    defaultErrorEventUI(event)
-  }
-}
-
-export function createUploader (input, file) {
-  // your form needs the file_field direct_upload: true, which
-  //  provides data-direct-upload-url
-  const error = validateUploader(input, file)
-  if (error) {
-    let detail = {
-      id: null,
-      file: file,
-      iconContainer: input.dataset.iconContainerId,
-      error: error
-    }
-    return dispatchErrorWithoutAttachment(input, detail)
-  }
-  if (!input.multiple) { removeAttachedFiles(input) }
-  uploaders.push(new DragAndDropUploadController(input, file))
-}
-
-function removeAttachedFiles (input) {
-  input.closest('label.asdndzone').querySelectorAll('[data-direct-upload-id]').forEach(element => {
-    element.remove()
-  })
-  uploaders.splice(0, uploaders.length)
-}
-
-function dispatchErrorWithoutAttachment (input, detail) {
-  let event = dispatchEvent(input, 'dnd-upload:error', { detail })
-  if (!event.defaultPrevented) {
-    const { error, iconContainer, file } = event.detail
-    fileUploadUIPainter(iconContainer, 'error', file.name, true)
-    const element = document.getElementById(`direct-upload-error`)
-    element.classList.add('direct-upload--error')
-    element.setAttribute('title', error)
-  }
-  return event
-}
-
-function validateUploader (input, file) {
-  const sizeLimit = input.getAttribute('size_limit')
-  if (input.accept !== '' && !input.accept.split(', ').includes(file.type)) {
-    return new ValidationError('Invalid filetype')
-  } else if (sizeLimit && file.size > sizeLimit) {
-    return new ValidationError(`File too large. Can be no larger than ${humanFileSize(sizeLimit)}`)
-  }
-}
-
-function humanFileSize (bytes) {
-  var thresh = 1000
-  if (Math.abs(bytes) < thresh) {
-    return bytes + ' B'
-  }
-  var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  var u = -1
-  do {
-    bytes /= thresh
-    ++u
-  } while (Math.abs(bytes) >= thresh && u < units.length - 1)
-  return bytes.toFixed(1) + ' ' + units[u]
-}