quasar 2.1.0

package/src/components/uploader/xhr-uploader-plugin.js

@@ -0,0 +1,258 @@
+import { ref, computed } from 'vue'
+
+function getFn (prop) {
+  return typeof prop === 'function'
+    ? prop
+    : () => prop
+}
+
+const props = {
+  url: [ Function, String ],
+  method: {
+    type: [ Function, String ],
+    default: 'POST'
+  },
+  fieldName: {
+    type: [ Function, String ],
+    default: () => {
+      return file => file.name
+    }
+  },
+  headers: [ Function, Array ],
+  formFields: [ Function, Array ],
+  withCredentials: [ Function, Boolean ],
+  sendRaw: [ Function, Boolean ],
+
+  batch: [ Function, Boolean ],
+  factory: Function
+}
+
+const emits = [ 'factory-failed', 'uploaded', 'failed', 'uploading' ]
+
+function injectPlugin ({ props, emit, helpers }) {
+  const xhrs = ref([])
+  const promises = ref([])
+  const workingThreads = ref(0)
+
+  const xhrProps = computed(() => ({
+    url: getFn(props.url),
+    method: getFn(props.method),
+    headers: getFn(props.headers),
+    formFields: getFn(props.formFields),
+    fieldName: getFn(props.fieldName),
+    withCredentials: getFn(props.withCredentials),
+    sendRaw: getFn(props.sendRaw),
+    batch: getFn(props.batch)
+  }))
+
+  const isUploading = computed(() => workingThreads.value > 0)
+  const isBusy = computed(() => promises.value.length > 0)
+
+  let abortPromises
+
+  function abort () {
+    xhrs.value.forEach(x => { x.abort() })
+
+    if (promises.value.length > 0) {
+      abortPromises = true
+    }
+  }
+
+  function upload () {
+    const queue = helpers.queuedFiles.value.slice(0)
+    helpers.queuedFiles.value = []
+
+    if (xhrProps.value.batch(queue)) {
+      runFactory(queue)
+    }
+    else {
+      queue.forEach(file => {
+        runFactory([ file ])
+      })
+    }
+  }
+
+  function runFactory (files) {
+    workingThreads.value++
+
+    if (typeof props.factory !== 'function') {
+      performUpload(files, {})
+      return
+    }
+
+    const res = props.factory(files)
+
+    if (!res) {
+      emit(
+        'factory-failed',
+        new Error('QUploader: factory() does not return properly'),
+        files
+      )
+      workingThreads.value--
+    }
+    else if (typeof res.catch === 'function' && typeof res.then === 'function') {
+      promises.value.push(res)
+
+      const failed = err => {
+        if (helpers.isAlive() === true) {
+          promises.value = promises.value.filter(p => p !== res)
+
+          if (promises.value.length === 0) {
+            abortPromises = false
+          }
+
+          helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files)
+          files.forEach(f => { helpers.updateFileStatus(f, 'failed') })
+
+          emit('factory-failed', err, files)
+          workingThreads.value--
+        }
+      }
+
+      res.then(factory => {
+        if (abortPromises === true) {
+          failed(new Error('Aborted'))
+        }
+        else if (helpers.isAlive() === true) {
+          promises.value = promises.value.filter(p => p !== res)
+          performUpload(files, factory)
+        }
+      }).catch(failed)
+    }
+    else {
+      performUpload(files, res || {})
+    }
+  }
+
+  function performUpload (files, factory) {
+    const
+      form = new FormData(),
+      xhr = new XMLHttpRequest()
+
+    const getProp = (name, arg) => {
+      return factory[ name ] !== void 0
+        ? getFn(factory[ name ])(arg)
+        : xhrProps.value[ name ](arg)
+    }
+
+    const url = getProp('url', files)
+
+    if (!url) {
+      console.error('q-uploader: invalid or no URL specified')
+      workingThreads.value--
+      return
+    }
+
+    const fields = getProp('formFields', files)
+    fields !== void 0 && fields.forEach(field => {
+      form.append(field.name, field.value)
+    })
+
+    let
+      uploadIndex = 0,
+      uploadIndexSize = 0,
+      localUploadedSize = 0,
+      maxUploadSize = 0,
+      aborted
+
+    xhr.upload.addEventListener('progress', e => {
+      if (aborted === true) { return }
+
+      const loaded = Math.min(maxUploadSize, e.loaded)
+
+      helpers.uploadedSize.value += loaded - localUploadedSize
+      localUploadedSize = loaded
+
+      let size = localUploadedSize - uploadIndexSize
+      for (let i = uploadIndex; size > 0 && i < files.length; i++) {
+        const
+          file = files[ i ],
+          uploaded = size > file.size
+
+        if (uploaded) {
+          size -= file.size
+          uploadIndex++
+          uploadIndexSize += file.size
+          helpers.updateFileStatus(file, 'uploading', file.size)
+        }
+        else {
+          helpers.updateFileStatus(file, 'uploading', size)
+          return
+        }
+      }
+    }, false)
+
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState < 4) {
+        return
+      }
+
+      if (xhr.status && xhr.status < 400) {
+        helpers.uploadedFiles.value = helpers.uploadedFiles.value.concat(files)
+        files.forEach(f => { helpers.updateFileStatus(f, 'uploaded') })
+        emit('uploaded', { files, xhr })
+      }
+      else {
+        aborted = true
+        helpers.uploadedSize.value -= localUploadedSize
+        helpers.queuedFiles.value = helpers.queuedFiles.value.concat(files)
+        files.forEach(f => { helpers.updateFileStatus(f, 'failed') })
+        emit('failed', { files, xhr })
+      }
+
+      workingThreads.value--
+      xhrs.value = xhrs.value.filter(x => x !== xhr)
+    }
+
+    xhr.open(
+      getProp('method', files),
+      url
+    )
+
+    if (getProp('withCredentials', files) === true) {
+      xhr.withCredentials = true
+    }
+
+    const headers = getProp('headers', files)
+    headers !== void 0 && headers.forEach(head => {
+      xhr.setRequestHeader(head.name, head.value)
+    })
+
+    const sendRaw = getProp('sendRaw', files)
+
+    files.forEach(file => {
+      helpers.updateFileStatus(file, 'uploading', 0)
+      if (sendRaw !== true) {
+        form.append(getProp('fieldName', file), file, file.name)
+      }
+      file.xhr = xhr
+      file.__abort = () => { xhr.abort() }
+      maxUploadSize += file.size
+    })
+
+    emit('uploading', { files, xhr })
+    xhrs.value.push(xhr)
+
+    if (sendRaw === true) {
+      xhr.send(new Blob(files))
+    }
+    else {
+      xhr.send(form)
+    }
+  }
+
+  return {
+    isUploading,
+    isBusy,
+
+    abort,
+    upload
+  }
+}
+
+export default {
+  name: 'QUploader',
+  props,
+  emits,
+  injectPlugin
+}

package/src/components/uploader/xhr-uploader-plugin.json

@@ -0,0 +1,203 @@
+{
+  "props": {
+    "factory": {
+      "type": "Function",
+      "desc": "Function which should return an Object or a Promise resolving with an Object; For best performance, reference it from your scope and do not define it inline",
+      "params": {
+        "files": {
+          "type": "Array",
+          "desc": "Uploaded files",
+          "__exemption": [ "examples" ]
+        }
+      },
+      "returns": {
+        "type": [ "Object", "Promise" ],
+        "desc": "Optional configuration for the upload process; You can override QUploader props in this Object (url, method, headers, formFields, fieldName, withCredentials, sendRaw); Props of these Object can also be Functions with the form of (file[s]) => value",
+        "__exemption": [ "examples" ]
+      },
+      "category": "upload"
+    },
+
+    "url": {
+      "type": [ "String", "Function" ],
+      "desc": "URL or path to the server which handles the upload. Takes String or factory function, which returns String. Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "examples": [ "https://example.com/path", "files => `https://example.com?count=${files.length}`" ],
+      "category": "upload"
+    },
+
+    "method": {
+      "type": [ "String", "Function" ],
+      "default": "POST",
+      "desc": "HTTP method to use for upload; Takes String or factory function which returns a String; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "values": [ "POST", "PUT" ],
+      "examples": [ "POST", ":method=\"files => files.length > 10 ? 'POST' : 'PUT'\"" ],
+      "category": "upload"
+    },
+
+    "field-name": {
+      "type": [ "String", "Function" ],
+      "desc": "Field name for each file upload; This goes into the following header: 'Content-Disposition: form-data; name=\"__HERE__\"; filename=\"somefile.png\"; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "default": "(file) => file.name",
+      "examples": [
+        "backgroundFile",
+        ":field-name=\"(file) => 'background' + file.name\""
+      ],
+      "category": "upload"
+    },
+
+    "headers": {
+      "type": [ "Array", "Function" ],
+      "desc": "Array or a factory function which returns an array; Array consists of objects with header definitions; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "definition": {
+        "name": {
+          "type": "String",
+          "required": true,
+          "desc": "Header name",
+          "examples": [ "Content-Type", "Accept", "Cache-Control" ]
+        },
+        "value": {
+          "type": "String",
+          "required": true,
+          "desc": "Header value",
+          "examples": [ "application/json", "no-cache" ]
+        }
+      },
+      "examples": [
+        "[{name: 'Content-Type', value: 'application/json'}, {name: 'Accept', value: 'application/json'}]",
+        "() => [{name: 'X-Custom-Timestamp', value: Date.now()}]",
+        "files => [{name: 'X-Custom-Count', value: files.length}]"
+      ],
+      "category": "upload"
+    },
+
+    "form-fields": {
+      "type": [ "Array", "Function" ],
+      "desc": "Array or a factory function which returns an array; Array consists of objects with additional fields definitions (used by Form to be uploaded); Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "definition": {
+        "name": {
+          "type": "String",
+          "required": true,
+          "desc": "Field name",
+          "examples": [ "Some field" ]
+        },
+        "value": {
+          "type": "String",
+          "required": true,
+          "desc": "Field value",
+          "examples": [ "some-value" ]
+        }
+      },
+      "examples": [
+        "[{name: 'my-field', value: 'my-value'}]",
+        "() => [{name: 'my-field', value: 'my-value'}]",
+        "files => [{name: 'my-field', value: 'my-value' + files.length}]"
+      ],
+      "category": "upload"
+    },
+
+    "with-credentials": {
+      "type": [ "Boolean", "Function" ],
+      "desc": "Sets withCredentials to true on the XHR that manages the upload; Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "examples": [ "with-credentials", ":with-credentials=\"files => ...\"" ],
+      "category": "upload"
+    },
+
+    "send-raw": {
+      "type": [ "Boolean", "Function" ],
+      "desc": "Send raw files without wrapping into a Form(); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "examples": [ "send-raw", ":send-raw=\"files => ...\"" ],
+      "category": "upload"
+    },
+
+    "batch": {
+      "type": [ "Boolean", "Function" ],
+      "desc": "Upload files in batch (in one XHR request); Takes boolean or factory function for Boolean; Function is called right before upload; If using a function then for best performance, reference it from your scope and do not define it inline",
+      "examples": [ "files => files.length > 10" ],
+      "category": "upload"
+    }
+  },
+
+  "events": {
+    "uploaded": {
+      "desc": "Emitted when file or batch of files is uploaded",
+      "params": {
+        "info": {
+          "type": "Object",
+          "desc": "Object containing information about the event",
+          "definition": {
+            "files": {
+              "type": "Array",
+              "desc": "Uploaded files",
+              "__exemption": [ "examples" ]
+            },
+            "xhr": {
+              "type": "Object",
+              "desc": "XMLHttpRequest that has been used to upload this batch of files",
+              "__exemption": [ "examples" ]
+            }
+          }
+        }
+      }
+    },
+
+    "failed": {
+      "desc": "Emitted when file or batch of files has encountered error while uploading",
+      "params": {
+        "info": {
+          "type": "Object",
+          "desc": "Object containing information about the event",
+          "definition": {
+            "files": {
+              "type": "Array",
+              "desc": "Files which encountered error",
+              "__exemption": [ "examples" ]
+            },
+            "xhr": {
+              "type": "Object",
+              "desc": "XMLHttpRequest that has been used to upload this batch of files",
+              "__exemption": [ "examples" ]
+            }
+          }
+        }
+      }
+    },
+
+    "uploading": {
+      "desc": "Emitted when file or batch of files started uploading",
+      "params": {
+        "info": {
+          "type": "Object",
+          "desc": "Object containing information about the event",
+          "definition": {
+            "files": {
+              "type": "Array",
+              "desc": "Files which are now uploading",
+              "__exemption": [ "examples" ]
+            },
+            "xhr": {
+              "type": "Object",
+              "desc": "XMLHttpRequest used for uploading",
+              "__exemption": [ "examples" ]
+            }
+          }
+        }
+      }
+    },
+
+    "factory-failed": {
+      "desc": "Emitted when factory function is supplied with a Promise which is rejected",
+      "params": {
+        "err": {
+          "type": "Object",
+          "desc": "Error Object which is the Promise rejection reason",
+          "__exemption": [ "examples" ]
+        },
+        "files": {
+          "type": "Array",
+          "desc": "Files which were to get uploaded",
+          "__exemption": [ "examples" ]
+        }
+      }
+    }
+  }
+}