active_storage_drag_and_drop 0.3.1 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77831f698945cda19e6fcfe3a3dac981cb187c8132828626e2b3885f9b9f26ab
-  data.tar.gz: e1e23d401dff7989da878494ddc812d41911a0da8598e5f56ecc708ceaebfb53
+  metadata.gz: 9a079fe553c09b15a8944c7019a74835357838464fecc48c3d2321c8427c9113
+  data.tar.gz: 89fdd70988c3bef9cbd506aff7aff780d4399c58efd930f9c7aa7edbe00d15c5
 SHA512:
-  metadata.gz: 10f40a62e0dcefe74574a63bb204b76c4ae769f2f001599b508fa33949c05e653ed53cc5efc93eaf071d3b2d30ed5a15f40ebca2c12435522a0476c60dc919a4
-  data.tar.gz: b528ac93389424f60d5862b2c33986ee940c464e1d8e2c9ffd29630dc34da8d7d3d5fefe0ccd7183b71b25c96e782a19a50201762b5292be96dc7336bc7c2f9f
+  metadata.gz: 39147a94d61ea43f6f19779b89ca6a740a24d28d11facbc2f377615091be1bc871ae88a840ec70c80be5f3173db47bcf2d8c9fe96f04adbecf1262961a7b3ed6
+  data.tar.gz: 218dfed1043e5d88e1b261d05f5b3a01cc25d241b74f108a30cb00cec45ce8b8db67a43144992fe28b031864a6ac47af0bb3176a5a254a6296cbbf986a61a517

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    active_storage_drag_and_drop (0.3.1)
+    active_storage_drag_and_drop (0.3.2)
       rails (~> 5.2)
 
 GEM

data/README.md

@@ -50,6 +50,10 @@ Options for the nested file field can be passed as key value pairs:
 ```ruby
 form.drag_and_drop_file_field :images, accept: 'image/png, image/jpeg, image/gif, image/tiff'
 ```
+An additional `size_limit` option can be passed which provides validation on the maximum acceptable filesize in bytes:
+```ruby
+form.drag_and_drop_file_field :images, size_limit: 5_000_000 # 5MB upper limit on file size
+```
 In your controller you can permit the params like so:
 ```ruby
 params.permit(:message).require(images: [])

data/app/assets/javascripts/active_storage_drag_and_drop.js

@@ -152,7 +152,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) *
 /***/ (function(module, __webpack_exports__, __webpack_require__) {
 
 "use strict";
-eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"uploaders\", function() { return uploaders; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"UploadQueueProcessor\", function() { return UploadQueueProcessor; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createUploader\", function() { return createUploader; });\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers */ \"./app/javascript/active_storage_drag_and_drop/helpers.js\");\n/* harmony import */ var _direct_upload_controller__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./direct_upload_controller */ \"./app/javascript/active_storage_drag_and_drop/direct_upload_controller.js\");\n\n\nconst uploaders = [];\n\nconst eventFamily = 'dnd-uploads';\n\nclass UploadQueueProcessor {\n  constructor(form) {\n    this.form = form;\n    this.current_uploaders = [];\n    uploaders.forEach(uploader => {\n      if (form == uploader.form) {\n        this.current_uploaders.push(uploader);\n      }\n    });\n  }\n\n  start(callback) {\n    const startNextUploader = () => {\n      const nextUploader = this.current_uploaders.shift();\n      if (nextUploader) {\n        nextUploader.start(error => {\n          if (error) {\n            callback(error);\n            this.dispatch(\"end\");\n          } else {\n            startNextUploader();\n          }\n        });\n      } else {\n        callback();\n        this.dispatch(\"end\");\n      }\n    };\n\n    this.dispatch(\"start\");\n    startNextUploader();\n  }\n\n  dispatch(name, detail = {}) {\n    return Object(_helpers__WEBPACK_IMPORTED_MODULE_0__[\"dispatchEvent\"])(this.form, `${eventFamily}:${name}`, { detail });\n  }\n}\n\nfunction createUploader(input, file) {\n  // your form needs the file_field direct_upload: true, which\n  //  provides data-direct-upload-url\n  console.log(input.accept === '');\n  if (input.accept === '' || input.accept.split(', ').includes(file.type)) {\n    uploaders.push(new _direct_upload_controller__WEBPACK_IMPORTED_MODULE_1__[\"DragAndDropUploadController\"](input, file));\n  } else {\n    const error = Error('Invalid filetype');\n    const event = Object(_helpers__WEBPACK_IMPORTED_MODULE_0__[\"dispatchEvent\"])(input, `${eventFamily}:error`, { error });\n    if (!event.defaultPrevented) {\n      alert(error);\n    }\n    return event;\n  }\n}\n\n//# sourceURL=webpack://ActiveStorage/./app/javascript/active_storage_drag_and_drop/upload_queue_processor.js?");
+eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"uploaders\", function() { return uploaders; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"UploadQueueProcessor\", function() { return UploadQueueProcessor; });\n/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, \"createUploader\", function() { return createUploader; });\n/* harmony import */ var _helpers__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./helpers */ \"./app/javascript/active_storage_drag_and_drop/helpers.js\");\n/* harmony import */ var _direct_upload_controller__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! ./direct_upload_controller */ \"./app/javascript/active_storage_drag_and_drop/direct_upload_controller.js\");\n\n\nconst uploaders = [];\n\nconst eventFamily = 'dnd-uploads';\n\nclass ValidationError extends Error {\n  constructor(...args) {\n    super(...args);\n    Error.captureStackTrace(this, ValidationError);\n  }\n}\n\nclass UploadQueueProcessor {\n  constructor(form) {\n    this.form = form;\n    this.current_uploaders = [];\n    uploaders.forEach(uploader => {\n      if (form == uploader.form) {\n        this.current_uploaders.push(uploader);\n      }\n    });\n  }\n\n  start(callback) {\n    const startNextUploader = () => {\n      const nextUploader = this.current_uploaders.shift();\n      if (nextUploader) {\n        nextUploader.start(error => {\n          if (error) {\n            callback(error);\n            this.dispatch(\"end\");\n          } else {\n            startNextUploader();\n          }\n        });\n      } else {\n        callback();\n        this.dispatch(\"end\");\n      }\n    };\n\n    this.dispatch(\"start\");\n    startNextUploader();\n  }\n\n  dispatch(name, detail = {}) {\n    return Object(_helpers__WEBPACK_IMPORTED_MODULE_0__[\"dispatchEvent\"])(this.form, `${eventFamily}:${name}`, { detail });\n  }\n}\n\nfunction createUploader(input, file) {\n  // your form needs the file_field direct_upload: true, which\n  //  provides data-direct-upload-url\n  const error = validateUploader(input, file);\n  if (error) {\n    const event = Object(_helpers__WEBPACK_IMPORTED_MODULE_0__[\"dispatchEvent\"])(input, `${eventFamily}:error`, { error });\n    if (!event.defaultPrevented) {\n      alert(error);\n    }\n    return event;\n  }\n  uploaders.push(new _direct_upload_controller__WEBPACK_IMPORTED_MODULE_1__[\"DragAndDropUploadController\"](input, file));\n}\n\nfunction validateUploader(input, file) {\n  const sizeLimit = input.getAttribute('size_limit');\n  if (input.accept !== '' && !input.accept.split(', ').includes(file.type)) {\n    return new ValidationError('Invalid filetype');\n  } else if (sizeLimit && file.size > sizeLimit) {\n    return new ValidationError(`File too large. Can be no larger than ${humanFileSize(sizeLimit)}`);\n  }\n}\n\nfunction humanFileSize(bytes) {\n  var thresh = 1000;\n  if (Math.abs(bytes) < thresh) {\n    return bytes + ' B';\n  }\n  var units = ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];\n  var u = -1;\n  do {\n    bytes /= thresh;\n    ++u;\n  } while (Math.abs(bytes) >= thresh && u < units.length - 1);\n  return bytes.toFixed(1) + ' ' + units[u];\n}\n\n//# sourceURL=webpack://ActiveStorage/./app/javascript/active_storage_drag_and_drop/upload_queue_processor.js?");
 
 /***/ }),
 

data/app/javascript/active_storage_drag_and_drop/upload_queue_processor.js

@@ -4,6 +4,13 @@ export const uploaders = []
 
 const eventFamily = 'dnd-uploads'
 
+class ValidationError extends Error {
+  constructor (...args) {
+    super(...args)
+    Error.captureStackTrace(this, ValidationError)
+  }
+}
+
 export class UploadQueueProcessor {
   constructor(form) {
     this.form = form
@@ -45,15 +52,36 @@ export class UploadQueueProcessor {
 export function createUploader(input, file) {
   // your form needs the file_field direct_upload: true, which
   //  provides data-direct-upload-url
-  console.log(input.accept === '')
-  if (input.accept === '' || input.accept.split(', ').includes(file.type)) {
-    uploaders.push(new DragAndDropUploadController(input, file))
-  } else {
-    const error = Error('Invalid filetype')
+  const error = validateUploader(input, file)
+  if (error) {
     const event = dispatchEvent(input, `${eventFamily}:error`, { error })
     if (!event.defaultPrevented) {
       alert(error)
     }
     return event
   }
+  uploaders.push(new DragAndDropUploadController(input, file))
+}
+
+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]
 }

data/lib/active_storage_drag_and_drop/version.rb

@@ -1,3 +1,3 @@
 module ActiveStorageDragAndDrop
-  VERSION = '0.3.1'
+  VERSION = '0.3.2'
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: active_storage_drag_and_drop
 version: !ruby/object:Gem::Version
-  version: 0.3.1
+  version: 0.3.2
 platform: ruby
 authors:
 - Dave O'Keeffe
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: exe
 cert_chain: []
-date: 2018-10-24 00:00:00.000000000 Z
+date: 2018-10-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: bundler