From 961cc35f2315d804fc14ccc34ecf84825414d94f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jose=CC=81=20Ca=CC=81mara?= Date: Mon, 22 Jan 2018 10:35:42 +0100 Subject: [PATCH 1/5] * Changes in `FileUload` to use `chunk upload` in some cases * `chunk-enabled` prop added to enable chunk upload * `chunk` prop added to modify chunk upload parameters * `ChunkUploadHandler` class created to handler chunk upload process * Example added to the docs * Chunk documentation added to the docs --- .eslintrc.js | 38 + README.md | 1 + docs/docs/en.md | 172 +- docs/i18n/en.js | 1 + docs/router.js | 5 + docs/views/Example.vue | 3 + docs/views/examples/Chunk.vue | 245 + package-lock.json | 12108 ++++++++++++++++++++++++++++++ package.json | 6 + src/FileUpload.vue | 68 +- src/chunk/ChunkUploadHandler.js | 329 + src/utils/request.js | 50 + webpack.config.js | 61 + 13 files changed, 13050 insertions(+), 37 deletions(-) create mode 100644 .eslintrc.js create mode 100644 docs/views/examples/Chunk.vue create mode 100644 package-lock.json create mode 100644 src/chunk/ChunkUploadHandler.js create mode 100644 src/utils/request.js diff --git a/.eslintrc.js b/.eslintrc.js new file mode 100644 index 0000000..3561f90 --- /dev/null +++ b/.eslintrc.js @@ -0,0 +1,38 @@ +// http://eslint.org/docs/user-guide/configuring + +module.exports = { + root: true, + parser: 'babel-eslint', + parserOptions: { + sourceType: 'module' + }, + env: { + browser: true, + jest: true + }, + // https://github.com/standard/standard/blob/master/docs/RULES-en.md + extends: "standard", + + // required to lint *.vue files + plugins: [ + 'html' + ], + // add your custom rules here + 'rules': { + // allow paren-less arrow functions + 'arrow-parens': 0, + // allow async-await + 'generator-star-spacing': 0, + // allow debugger during development + 'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0, + + 'no-useless-escape': 0, + 'comma-dangle': 0, + 'space-before-function-paren': 0, + 'no-multiple-empty-lines': 0, + 'no-multi-spaces': 0, + 'padded-blocks': 0, + 'prefer-promise-reject-errors': 0, + 'operator-linebreak': 0 + } +} diff --git a/README.md b/README.md index aedec9b..e983145 100644 --- a/README.md +++ b/README.md @@ -15,6 +15,7 @@ - [x] `PUT` method - [x] Customize the filter - [x] thumbnails + - [x] Chunk upload diff --git a/docs/docs/en.md b/docs/docs/en.md index 745ccfd..f147acd 100644 --- a/docs/docs/en.md +++ b/docs/docs/en.md @@ -131,7 +131,81 @@ new Vue({ ``` +### Chunk Upload +This package allows chunk uploads, which means you can upload a file in different parts. + +This process is divided in three phases: start, upload,finish

+ +#### start + +This is the first phase of the process. We'll tell the backend that we are going to upload a file, with certain `size` and `mime_type`. + +Use the option `startBody` to add more parameters to the body of this request. + +The backend will provide a `session_id` (to identify the upload) and a `end_offset` which is the size of every chunk + +#### upload + +In this phase we'll upload every chunk until all of them are uploaded. This step allows some failures in the backend, and will retry up to `maxRetries` times. + +We'll send the `session_id`, `start_chunk` and `chunk` (the sliced blob - part of file we are uploading). We expect the backend to return `status = 'success'`, we'll retry otherwise. + +Use the option `uploadBody` to add more parameters to the body of this request. + +#### finish + +In this phase we tell the backend that there are no more chunks to upload, so it can wrap everything. We send the `session_id` in this phase. + +Use the option `finishBody` to add more parameters to the body of this request. + +#### Example + +```html + + Upload file + +``` + +#### Extending the handler + +We are using the class `src/chunk/ChunkUploadHandler` class to implement this protocol. You can extend this class (or even create a different one from scratch) to implement your own way to communicat with the backend. + +This class must implement a method called `upload` which **must** return a promise. This promise will be used by the `FileUpload` component to determinate whether the file was uploaded or failed. + +Use the `handler` parameter to use a different Handler + +```html + :chunk="{ + action: '/upload/chunk', + minSize: 1048576, + maxActive: 3, + maxRetries: 5, + + handler: MyHandlerClass + } +``` ### SSR (Server isomorphism) @@ -213,9 +287,9 @@ const nodeExternals = require('webpack-node-externals'); } ``` -* [https://github.com/liady/webpack-node-externals](https://github.com/liady/webpack-node-externals) +* [https://github.com/liady/webpack-node-externals](https://github.com/liady/webpack-node-externals) -* [**`vue-hackernews` demo**](https://github.com/lian-yue/vue-hackernews-2.0/) +* [**`vue-hackernews` demo**](https://github.com/lian-yue/vue-hackernews-2.0/) * [**View changes**](https://github.com/lian-yue/vue-hackernews-2.0/commit/bd6c58a30cc6b8ba6c0148e737b3ce9336b99cf8) @@ -290,9 +364,9 @@ The `name` attribute of the input tag * **Browser:** `> IE9` -* **Details:** +* **Details:** - `put-action` is not empty Please give priority to` PUT` request + `put-action` is not empty Please give priority to` PUT` request * **Usage:** ```html @@ -324,7 +398,7 @@ Attach `header` data ### data -`POST request`: Append request `body` +`POST request`: Append request `body` `PUT request`: Append request `query` * **Type:** `Object` @@ -347,9 +421,9 @@ File List * **Default:** `[]` -* **Details:** +* **Details:** - View **[`File`](#file)** details + View **[`File`](#file)** details > In order to prevent unpredictable errors, can not directly modify the `files`, please use [`add`](#instance-methods-add), [`update`](#instance-methods-update), [`remove`](#instance-methods-remove) method to modify * **Usage:** @@ -365,7 +439,7 @@ File List ### accept -The `accept` attribute of the input tag, MIME type +The `accept` attribute of the input tag, MIME type * **Type:** `String` @@ -386,14 +460,14 @@ The `accept` attribute of the input tag, MIME type ### multiple -The `multiple` attribute of the input tag -Whether to allow multiple files to be selected +The `multiple` attribute of the input tag +Whether to allow multiple files to be selected * **Type:** `Boolean` * **Default:** `false` -* **Details:** +* **Details:** If it is `false` file inside only one file will be automatically deleted @@ -406,8 +480,8 @@ Whether to allow multiple files to be selected ### directory -The `directory` attribute of the input tag -Whether it is a upload folder +The `directory` attribute of the input tag +Whether it is a upload folder * **Type:** `Boolean` @@ -426,7 +500,7 @@ Whether it is a upload folder ### extensions -Allow upload file extensions +Allow upload file extensions * **Type:** `Array | String | RegExp` @@ -498,7 +572,7 @@ List the maximum number of files ### thread -Also upload the number of files at the same time (number of threads) +Also upload the number of files at the same time (number of threads) * **Type:** `Number` @@ -512,8 +586,42 @@ Also upload the number of files at the same time (number of threads) ``` +### chunk-enabled + +Whether chunk uploads is enabled or not + +* **Type:** `Boolean` + +* **Default:** `false` + +* **Usage:** + ```html + + + ``` + +### chunk + +All the options to handle chunk uploads +* **Type:** `Object` +* **Default:** +```js +{ + headers: { + 'Content-Type': 'application/json' + }, + action: '', + minSize: 1048576, + maxActive: 3, + maxRetries: 5, + + // This is the default Handler implemented in this package + // you can use your own handler if your protocol is different + handler: ChunkUploadDefaultHandler +} +``` ### drop @@ -527,7 +635,7 @@ Drag and drop upload * **Details:** - If set to `true`, read the parent component as a container + If set to `true`, read the parent component as a container * **Usage:** ```html @@ -615,7 +723,7 @@ Default for `v-model` binding ### @input-filter -Add, update, remove pre-filter +Add, update, remove pre-filter * **Arguments:** @@ -630,14 +738,14 @@ Add, update, remove pre-filter If the `oldFile` value is `undefined` 'is added If `newFile`, `oldFile` is exist, it is updated - > Synchronization modify `newFile` - > Asynchronous Please use `update`,` add`, `remove`,` clear` method + > Synchronization modify `newFile` + > Asynchronous Please use `update`,` add`, `remove`,` clear` method > Asynchronous Please set an error first to prevent being uploaded - > Synchronization can not use `update`,` add`, `remove`,` clear` methods - > Asynchronous can not modify `newFile` + > Synchronization can not use `update`,` add`, `remove`,` clear` methods + > Asynchronous can not modify `newFile` -* **Usage:** +* **Usage:** ```html