activestorage-resumable 1.0.0

data/app/controllers/active_storage/resumable_uploads_controller.rb

@@ -0,0 +1,26 @@
+# frozen_string_literal: true
+
+module ActiveStorage
+  class ResumableUploadsController < ActiveStorage::BaseController
+    def create
+      blob = ActiveStorage::Blob.find_or_create_before_resumable_upload!(blob_args)
+      render json: resumable_upload_json(blob)
+    end
+
+    def update
+      blob = ActiveStorage::Blob.find_by(key: params[:signed_blob_id])
+      blob.update(blob_args)
+      render json: resumable_upload_json(blob)
+    end
+
+    private
+
+    def blob_args
+      params.require(:blob).permit(:filename, :byte_size, :checksum, :content_type, :metadata).to_h.symbolize_keys
+    end
+
+    def resumable_upload_json(blob)
+      blob.as_json(root: false, methods: :signed_id)
+    end
+  end
+end

data/app/javascript/activestorage-resumable/helpers.js

@@ -0,0 +1,51 @@
+export function getMetaValue(name) {
+  const element = findElement(document.head, `meta[name="${name}"]`)
+  if (element) {
+    return element.getAttribute("content")
+  }
+}
+
+export function findElements(root, selector) {
+  if (typeof root == "string") {
+    selector = root
+    root = document
+  }
+  const elements = root.querySelectorAll(selector)
+  return toArray(elements)
+}
+
+export function findElement(root, selector) {
+  if (typeof root == "string") {
+    selector = root
+    root = document
+  }
+  return root.querySelector(selector)
+}
+
+export function dispatchEvent(element, type, eventInit = {}) {
+  const { disabled } = element
+  const { bubbles, cancelable, detail } = eventInit
+  const event = document.createEvent("Event")
+
+  event.initEvent(type, bubbles || true, cancelable || true)
+  event.detail = detail || {}
+
+  try {
+    element.disabled = false
+    element.dispatchEvent(event)
+  } finally {
+    element.disabled = disabled
+  }
+
+  return event
+}
+
+export function toArray(value) {
+  if (Array.isArray(value)) {
+    return value
+  } else if (Array.from) {
+    return Array.from(value)
+  } else {
+    return [].slice.call(value)
+  }
+}

data/app/javascript/activestorage-resumable/index.js

@@ -0,0 +1,11 @@
+import { start } from "./ujs-resumable"
+import { ResumableUpload } from "./resumable_upload"
+export { start, ResumableUpload }
+
+function autostart() {
+  if (window.ActiveStorageResumable) {
+    start()
+  }
+}
+
+setTimeout(autostart, 1)

data/app/javascript/activestorage-resumable/resumable_blob_record.js

@@ -0,0 +1,73 @@
+import { getMetaValue } from "./helpers"
+
+export class ResumableBlobRecord {
+  constructor(file, checksum, url) {
+    this.file = file
+
+    this.attributes = {
+      filename: file.name,
+      content_type: file.type,
+      byte_size: file.size,
+      checksum: checksum
+    }
+
+    this.xhr = new XMLHttpRequest
+    this.xhr.open("POST", url, true)
+    this.xhr.responseType = "json"
+    this.xhr.setRequestHeader("Content-Type", "application/json")
+    this.xhr.setRequestHeader("Accept", "application/json")
+    this.xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest")
+
+    const csrfToken = getMetaValue("csrf-token")
+    if (csrfToken != undefined) {
+      this.xhr.setRequestHeader("X-CSRF-Token", csrfToken)
+    }
+
+    this.xhr.addEventListener("load", event => this.requestDidLoad(event))
+    this.xhr.addEventListener("error", event => this.requestDidError(event))
+  }
+
+  get status() {
+    return this.xhr.status
+  }
+
+  get response() {
+    const { responseType, response } = this.xhr
+    if (responseType == "json") {
+      return response
+    } else {
+      // Shim for IE 11: https://connect.microsoft.com/IE/feedback/details/794808
+      return JSON.parse(response)
+    }
+  }
+
+  create(callback) {
+    this.callback = callback
+    this.xhr.send(JSON.stringify({ blob: this.attributes }))
+  }
+
+  requestDidLoad(event) {
+    if (this.status >= 200 && this.status < 300) {
+      const { response } = this
+      const { resumable_upload } = response
+      delete response.resumable_upload
+      this.attributes = response
+      this.resumableUploadData = resumable_upload
+      this.callback(null, this.toJSON())
+    } else {
+      this.requestDidError(event)
+    }
+  }
+
+  requestDidError(event) {
+    this.callback(`Error creating Blob for "${this.file.name}". Status: ${this.status}`)
+  }
+
+  toJSON() {
+    const result = {}
+    for (const key in this.attributes) {
+      result[key] = this.attributes[key]
+    }
+    return result
+  }
+}

data/app/javascript/activestorage-resumable/resumable_blob_upload.js

@@ -0,0 +1,56 @@
+import Upload from "@fnix/gcs-browser-upload"
+import { getMetaValue } from "./helpers"
+
+export class ResumableBlobUpload {
+  constructor(blob) {
+    this.blob = blob
+    this.file = blob.file
+
+    this.gcsBrowserUpload = new Upload({
+      id: this.blob.attributes.key,
+      url: this.blob.attributes.resumable_url,
+      file: this.file,
+      contentType: this.file.type
+    })
+  }
+
+  async create(callback) {
+    this.callback = callback
+    try {
+      await this.gcsBrowserUpload.start()
+      
+      const { headers } = this.gcsBrowserUpload.lastResult
+      let updateHeaders = {
+        "Content-Type": "application/json",
+        "Accept": "application/json"
+      }
+      const csrfToken = getMetaValue("csrf-token")
+      if (csrfToken != undefined) {
+        updateHeaders["X-CSRF-Token"] = csrfToken
+      }
+      
+      const response = await fetch(`/rails/active_storage/resumable_uploads/${this.blob.attributes.key}`, {
+        method: "PUT",
+        headers: updateHeaders,
+        body: JSON.stringify({
+          blob: { checksum: headers["x-goog-hash"].match("md5=(.*)")[1] }
+        })
+      })
+
+      if (!response.ok) {
+        this.callback(`Failed to update ${this.blob.attributes.key} blob checksum`)
+      } else {
+        this.callback(null, this.gcsBrowserUpload.lastResult)
+      }
+    } catch (e) {
+      this.requestDidError(e)
+    } finally {
+      this.gcsBrowserUpload = null
+    }
+  }
+
+  requestDidError() {
+    const status = !!this.gcsBrowserUpload.lastResult && this.gcsBrowserUpload.lastResult.status
+    this.callback(`Error storing "${this.file.name}". Status: ${status}`)
+  }
+}

data/app/javascript/activestorage-resumable/resumable_file_checksum.js

@@ -0,0 +1,66 @@
+import SparkMD5 from "spark-md5"
+
+const fileSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice
+
+export class ResumableFileChecksum {
+  static create(file, callback) {
+    const instance = new ResumableFileChecksum(file)
+    instance.create(callback)
+  }
+
+  constructor(file) {
+    this.file = file
+    this.chunkSize = 2097152 // 2MB
+    this.chunkIndex = 0
+
+    let chunkCount = Math.ceil(this.file.size / this.chunkSize)
+    if (chunkCount > 5) { chunkCount = 5 }
+    this.chunkCount = chunkCount
+  }
+
+  create(callback) {
+    this.callback = callback
+    this.md5Buffer = new SparkMD5.ArrayBuffer
+    this.fileReader = new FileReader
+    this.fileReader.addEventListener("load", event => this.fileReaderDidLoad(event))
+    this.fileReader.addEventListener("error", event => this.fileReaderDidError(event))
+    this.readNextChunk()
+  }
+
+  str2ArrayBuffer(str) {
+    var buf = new ArrayBuffer(str.length * 2) // 2 bytes for each char
+    var bufView = new Uint16Array(buf)
+    for (var i = 0, strLen = str.length; i < strLen; i++) {
+      bufView[i] = str.charCodeAt(i)
+    }
+    return buf
+  }
+
+
+  fileReaderDidLoad(event) {
+    this.md5Buffer.append(event.target.result)
+
+    if (!this.readNextChunk()) {
+      const binaryDigest = this.md5Buffer.end(true)
+      const base64digest = btoa(binaryDigest)
+      this.callback(null, base64digest)
+    }
+  }
+
+  fileReaderDidError(event) {
+    this.callback(`Error reading ${this.file.name}`)
+  }
+
+  readNextChunk() {
+    if (this.chunkIndex < this.chunkCount || (this.chunkIndex == 0 && this.chunkCount == 0)) {
+      const start = this.chunkIndex * this.chunkSize
+      const end = Math.min(start + this.chunkSize, this.file.size)
+      const bytes = fileSlice.call(this.file, start, end)
+      this.fileReader.readAsArrayBuffer(bytes)
+      this.chunkIndex++
+      return true
+    } else {
+      return false
+    }
+  }
+}

data/app/javascript/activestorage-resumable/resumable_upload.js

@@ -0,0 +1,48 @@
+import { ResumableFileChecksum } from "./resumable_file_checksum"
+import { ResumableBlobRecord } from "./resumable_blob_record"
+import { ResumableBlobUpload } from "./resumable_blob_upload"
+
+let id = 0
+
+export class ResumableUpload {
+  constructor(file, url, delegate) {
+    this.id = ++id
+    this.file = file
+    this.url = url
+    this.delegate = delegate
+  }
+
+  create(callback) {
+    ResumableFileChecksum.create(this.file, (error, checksum) => {
+      if (error) {
+        callback(error)
+        return
+      }
+
+      const blob = new ResumableBlobRecord(this.file, checksum, this.url)
+      notify(this.delegate, "resumableUploadWillCreateBlobWithXHR", blob.xhr)
+
+      blob.create(error => {
+        if (error) {
+          callback(error)
+        } else {
+          const upload = new ResumableBlobUpload(blob)
+          notify(this.delegate, "resumableUploadWillStoreFileWithGcsBrowserUpload", upload.gcsBrowserUpload)
+          upload.create(error => {
+            if (error) {
+              callback(error)
+            } else {
+              callback(null, blob.toJSON())
+            }
+          })
+        }
+      })
+    })
+  }
+}
+
+function notify(object, methodName, ...messages) {
+  if (object && typeof object[methodName] == "function") {
+    return object[methodName](...messages)
+  }
+}

data/app/javascript/activestorage-resumable/resumable_upload_controller.js

@@ -0,0 +1,69 @@
+import { ResumableUpload } from "./resumable_upload"
+import { dispatchEvent } from "./helpers"
+
+export class ResumableUploadController {
+  constructor(input, file) {
+    this.input = input
+    this.file = file
+    this.resumableUpload = new ResumableUpload(this.file, this.url, this)
+    this.dispatch("initialize")
+  }
+
+  start(callback) {
+    const hiddenInput = document.createElement("input")
+    hiddenInput.type = "hidden"
+    hiddenInput.name = this.input.name
+    this.input.insertAdjacentElement("beforebegin", hiddenInput)
+
+    this.dispatch("start")
+
+    this.resumableUpload.create((error, attributes) => {
+      if (error) {
+        hiddenInput.parentNode.removeChild(hiddenInput)
+        this.dispatchError(error)
+      } else {
+        hiddenInput.value = attributes.signed_id
+      }
+
+      this.dispatch("end")
+      callback(error)
+    })
+  }
+
+  uploadRequestDidProgress(event) {
+    const progress = event.loaded / event.total * 100
+    if (progress) {
+      this.dispatch("progress", { progress })
+    }
+  }
+
+  get url() {
+    return this.input.getAttribute("data-resumable-upload-url")
+  }
+
+  dispatch(name, detail = {}) {
+    detail.file = this.file
+    detail.id = this.resumableUpload.id
+    return dispatchEvent(this.input, `resumable-upload:${name}`, { detail })
+  }
+
+  dispatchError(error) {
+    const event = this.dispatch("error", { error })
+    if (!event.defaultPrevented) {
+      alert(error)
+    }
+  }
+
+  // ResumableUpload delegate
+
+  resumableUploadWillCreateBlobWithXHR(xhr) {
+    this.dispatch("before-blob-request", { xhr })
+  }
+
+  resumableUploadWillStoreFileWithGcsBrowserUpload(gcsBrowserUpload) {
+    this.dispatch("before-storage-request", { gcsBrowserUpload })
+    gcsBrowserUpload.opts.onChunkUpload = (event) => {
+      this.uploadRequestDidProgress({ lengthComputable: true, loaded: event.uploadedBytes, total: event.totalBytes })
+    }
+  }
+}

data/app/javascript/activestorage-resumable/resumable_uploads_controller.js

@@ -0,0 +1,50 @@
+import { ResumableUploadController } from "./resumable_upload_controller"
+import { findElements, dispatchEvent, toArray } from "./helpers"
+
+const inputSelector = "input[type=file][data-resumable-upload-url]:not([disabled])"
+
+export class ResumableUploadsController {
+  constructor(form) {
+    this.form = form
+    this.inputs = findElements(form, inputSelector).filter(input => input.files.length)
+  }
+
+  start(callback) {
+    const controllers = this.createResumableUploadControllers()
+
+    const startNextController = () => {
+      const controller = controllers.shift()
+      if (controller) {
+        controller.start(error => {
+          if (error) {
+            callback(error)
+            this.dispatch("end")
+          } else {
+            startNextController()
+          }
+        })
+      } else {
+        callback()
+        this.dispatch("end")
+      }
+    }
+
+    this.dispatch("start")
+    startNextController()
+  }
+
+  createResumableUploadControllers() {
+    const controllers = []
+    this.inputs.forEach(input => {
+      toArray(input.files).forEach(file => {
+        const controller = new ResumableUploadController(input, file)
+        controllers.push(controller)
+      })
+    })
+    return controllers
+  }
+
+  dispatch(name, detail = {}) {
+    return dispatchEvent(this.form, `resumable-uploads:${name}`, { detail })
+  }
+}