Update Uppy

dist/js/tool.js.LICENSE.txt

@@ -21,16 +21,22 @@
  * @license MIT
  */
 
+/*!
+ * Vue.js v2.6.14
+ * (c) 2014-2021 Evan You
+ * Released under the MIT License.
+ */
+
 /*! ieee754. BSD-3-Clause License. Feross Aboukhadijeh <https://feross.org/opensource> */
 
 /**
-  * Takes a string with placeholder variables like `%{smart_count} file selected`
-  * and replaces it with values from options `{smart_count: 5}`
-  *
-  * @license https://github.com/airbnb/polyglot.js/blob/master/LICENSE
-  * taken from https://github.com/airbnb/polyglot.js/blob/master/lib/polyglot.js#L299
-  *
-  * @param {string} phrase that needs interpolation, with placeholders
-  * @param {object} options with values that will be used to replace placeholders
-  * @returns {any[]} interpolated
-  */
+ * Takes a string with placeholder variables like `%{smart_count} file selected`
+ * and replaces it with values from options `{smart_count: 5}`
+ *
+ * @license https://github.com/airbnb/polyglot.js/blob/master/LICENSE
+ * taken from https://github.com/airbnb/polyglot.js/blob/master/lib/polyglot.js#L299
+ *
+ * @param {string} phrase that needs interpolation, with placeholders
+ * @param {object} options with values that will be used to replace placeholders
+ * @returns {any[]} interpolated
+ */

package.json

@@ -24,12 +24,11 @@
  "vue-template-compiler": "^2.6.14"
  },
  "dependencies": {
- "@uppy/aws-s3-multipart": "^1.8.10",
- "@uppy/core": "^1.15.0",
- "@uppy/dashboard": "^1.14.0",
- "@uppy/image-editor": "^0.1.8",
- "@uppy/screen-capture": "^1.0.11",
- "@uppy/webcam": "^1.8.2",
+ "@uppy/aws-s3-multipart": "^2.2.0",
+ "@uppy/image-editor": "^1.1.1",
+ "@uppy/screen-capture": "^2.0.6",
+ "@uppy/vue": "^0.4.5",
+ "@uppy/webcam": "^2.0.5",
  "laravel-nova": "^1.12.3"
  }
 }

resources/js/components/Tool.vue

@@ -50,14 +50,14 @@ export default {
 
  methods:
  {
- queueFile(file, response)
+ queueFile(file)
  {
  this.filesQueue.push(
  {
  fileId: file.id,
- fileKey: response.uploadURL,
+ fileKey: file.s3Multipart.key,
  fileName: file.meta.name,
- fileSize: file.size,
+ fileSize: file.size || 0,
  fileMeta: file.meta,
  }
  );

resources/js/components/UppyWrapper.vue

@@ -1,35 +1,32 @@
 <template>
  <card>
- <div ref="uppyPanel" class="uppy-panel"></div>
+ <Dashboard :uppy="uppy" :props="options" class="uppy-panel" />
  </card>
 </template>
 
 <script>
-import Uppy from "@uppy/core";
-import AwsS3Multipart from "@uppy/aws-s3-multipart";
-import Webcam from "@uppy/webcam";
-import ScreenCapture from "@uppy/screen-capture";
-import ImageEditor from "@uppy/image-editor";
-import Dashboard from "@uppy/dashboard";
+import { Dashboard } from '@uppy/vue'
+import Uppy from '@uppy/core'
+import AwsS3Multipart from '@uppy/aws-s3-multipart'
+import Webcam from '@uppy/webcam';
+import ScreenCapture from '@uppy/screen-capture';
+import ImageEditor from '@uppy/image-editor';
 
 export default {
- props: ["companionUri", "withMeta", "queueFile"],
-
- data()
- {
- return {
- uppyInstance: null,
- };
+ components: {
+ Dashboard,
  },
 
- mounted()
+ props: ['companionUri', 'withMeta', 'queueFile'],
+
+ data()
  {
- this.initUppy();
+ return this.initUppy();
  },
 
  beforeDestroy()
  {
- this.uppyInstance.close();
+ this.uppy.close();
  },
 
  methods:
@@ -41,21 +38,23 @@ export default {
 
  initUppy()
  {
+ let locale = window.NovaUppyLocale || {strings: {}};
+ _.merge(locale.strings, this.withMeta.locale);
+
  let plugins = [];
 
- this.uppyInstance = Uppy(
+ let uppy = new Uppy(
  {
  id: this.withMeta.attribute,
  autoProceed: this.withMeta.autoProceed || false,
- allowMultipleUploads: this.withMeta.allowMultipleUploads || false,
+ allowMultipleUploadBatches: this.withMeta.allowMultipleUploads || false,
  restrictions: {...this.withMeta.restrictions, ...this.withMeta.multipleFilesRestriction},
- meta: this.withMeta.metaValues || {},
- locale: {strings: this.withMeta.locale || {}},
+ locale: locale,
  }
  )
  .on('upload-success', (file, response) =>
  {
- this.queueFile(file, response);
+ this.queueFile(file);
  }
  )
  .use(AwsS3Multipart,
@@ -70,11 +69,15 @@ export default {
  }
  );
 
+ uppy.on('file-added', (file) => {
+ uppy.setFileMeta(file.id, this.withMeta.metaValues || {})
+ });
+
  if (this.withMeta.useWebcam)
  {
- this.uppyInstance.use(Webcam,
+ uppy.use(Webcam,
  {
- title: (this.withMeta.locale && this.withMeta.locale['camera']) || 'Camera',
+ title: locale.strings['Camera'] || 'Camera',
  showVideoSourceDropdown: true,
  showRecordingLength: true,
  }
@@ -85,9 +88,9 @@ export default {
 
  if (this.withMeta.useScreenCapture)
  {
- this.uppyInstance.use(ScreenCapture,
+ uppy.use(ScreenCapture,
  {
- title: (this.withMeta.locale && this.withMeta.locale['screencast']) || 'Screencast',
+ title: locale.strings['Screencast'] || 'Screencast',
  }
  );
 
@@ -96,7 +99,7 @@ export default {
 
  if (this.withMeta.useImageEditor)
  {
- this.uppyInstance.use(ImageEditor,
+ uppy.use(ImageEditor,
  {
  quality: 1,
  }
@@ -105,26 +108,23 @@ export default {
  plugins.push('ImageEditor');
  }
 
- this.uppyInstance.use(Dashboard,
- {
- plugins: plugins,
- target: this.$refs.uppyPanel,
- inline: true,
- width: null,
- height: this.withMeta.height || null,
- showLinkToFileUploadResult: false,
- showProgressDetails: true,
- fileManagerSelectionType: this.withMeta.fileManagerSelectionType || 'files',
- metaFields:
- [
- ...this.withMeta.nameMetaField || [],
- ...this.withMeta.metaFields || [],
- ],
- autoOpenFileEditor: this.withMeta.autoOpenFileEditor || false,
- proudlyDisplayPoweredByUppy: this.withMeta.proudlyDisplayPoweredByUppy || false,
- note: this.withMeta.note || null,
- }
- );
+ let options = {
+ plugins: plugins,
+ width: null,
+ height: this.withMeta.height || null,
+ showProgressDetails: true,
+ fileManagerSelectionType: this.withMeta.fileManagerSelectionType || 'files',
+ metaFields:
+ [
+ ...this.withMeta.nameMetaField || [],
+ ...this.withMeta.metaFields || [],
+ ],
+ autoOpenFileEditor: this.withMeta.autoOpenFileEditor || false,
+ proudlyDisplayPoweredByUppy: this.withMeta.proudlyDisplayPoweredByUppy || false,
+ note: this.withMeta.note || null,
+ };
+
+ return {uppy, options};
  },
  },
 }

routes/api.php

@@ -4,8 +4,9 @@
 
 Route::options('/s3/multipart', 'UploadController@preflightHeader');
 Route::post('/s3/multipart', 'UploadController@createMultipartUpload');
-Route::get('/s3/multipart/{uploadId}/{partNumber}', 'UploadController@prepareUploadPart');
-Route::get('/s3/multipart/{uploadId}', 'UploadController@listParts');
+Route::get('/s3/multipart/{uploadId}', 'UploadController@getUploadedParts');
+Route::get('/s3/multipart/{uploadId}/batch', 'UploadController@batchSignPartsUpload');
+Route::get('/s3/multipart/{uploadId}/{partNumber}', 'UploadController@signPartUpload');
 Route::post('/s3/multipart/{uploadId}/complete', 'UploadController@completeMultipartUpload');
 Route::delete('/s3/multipart/{uploadId}', 'UploadController@abortMultipartUpload');
 

src/Http/Controllers/FilesController.php

@@ -190,7 +190,7 @@ public function download(NovaRequest $request)
  return [
  'temporaryUrl' => Storage::disk($this->tool->disk)->temporaryUrl(
  $file['fileKey'],
- now()->addMinutes(5),
+ now()->addDay(),
  ['ResponseContentDisposition' => $request->query('contentDisposition', 'attachment') . '; filename="' . ($file['fileName'] ?? basename($file['fileKey'])) . '"'],
  ),
  ];