[enhancement] upload progress fixes #17

BryonLewis · 2020-03-26T12:32:22Z

Changes

Added default FPS to 10 when uploading files
Added in default upload Folder name, based on the first file in the list and removing the extension
Changed 'Upload' to 'Start Upload', multiple times I got confused and clicked 'Upload' thinking it would allow me to add more files
Implemented the fileUploader mixin from Girder Web Components
Image counter now decreases as the images are uploading. That was the original intention of how this component was designed, it didn't work properly because of the batch uploading (instantly tried uploading 500 items).
If the upload is a single file, it will display the file size
If the upload is a list of videos it will display the number, then when it starts uploading it will display the current amount of data uploaded and the total aggregate size of the videos
Restructured the uploading process to allow adding additional items while uploading. (Let me know if we want something better than a while->await loop for this)
Added in some error message handling based on GWC. Standard mixing error handling plus handling response errors when creating the folder to uploading items to.

subdavis

Minor nits.

subdavis · 2020-03-27T16:54:26Z

client/src/components/Upload.vue

+        item => item.status !== "done" && item.status !== "error"
+      ).length;
+    },
+    // Takes the pending upload and returns the # of images or size of the file


For comments like this, it may make sense to just write a full jsdoc comment. You've gone to the trouble of documenting this functions's signature in English, so I might as well get some type hints out of it.

subdavis · 2020-03-27T16:58:52Z

client/src/components/Upload.vue

+    },
+    // Takes the pending upload and returns the # of images or size of the file
+    computeUploadProgress(pendingUpload) {
+      // formatSize, totalProgress and totalSize are located in the fileUploader and sizeFormatter mixin


Suggested change

// formatSize, totalProgress and totalSize are located in the fileUploader and sizeFormatter mixin

const { formatSize, totalProgress, totalSize } = this; // use methods and properties from mixins

IMO this line is better because the code tells me what is being used, and the comment only needs to tell me where it came from. I'm not going to remember to update this comment if the method changes.

subdavis · 2020-03-27T17:07:20Z

client/src/components/Upload.vue

      this.$emit("update:uploading", false);
+      console.log(uploaded);


remove console log.

subdavis · 2020-03-27T17:09:25Z

client/src/components/Upload.vue

+        // Upload Mixin function to start uploading
+        await this.start({
+          dest: folder,
+          postUpload: postUpload


Suggested change

postUpload: postUpload

postUpload,

subdavis · 2020-03-27T17:11:50Z

client/src/components/Upload.vue

-              {{ pendingUpload.files.length }} images
+            <v-list-item-subtitle>
+              {{ computeUploadProgress(pendingUpload) }}
+              <!-- errorMessage is provided by the fileUploader mixin -->


While I appreciate this, I think it's a lots cause. I've never seen anyone comment every time they use a mixin feature. Is this considered a best practice, or just something you like to do?

It's something I do just for ease of use and readability if I ever have to look at it again. Is there an extension for VS code or some setup that will goTo a function that is imported as a mixin from a node_module. If I came at this with standard VS code setup and ctrl+shft+F for the function name I wouldn't be able to find it without turning on searching inside of node_modules. Then if I do something like 'errorMessage' is found 400+ times. This is the part where I really wish there was some namespacing for mixins, or even a naming standard mixinErrorMessage. I can obviously take some of them out.

jjnesbitt · 2020-03-27T18:33:20Z

client/src/components/Upload.vue

      this.$emit("update:uploading", false);
      this.$emit("uploaded", uploaded);
+    },
+    async uploadPending(pendingUpload, uploaded) {
+      var { name, files, fps } = pendingUpload;


Suggested change

var { name, files, fps } = pendingUpload;

let { name, files, fps } = pendingUpload;

jjnesbitt · 2020-03-27T18:33:42Z

client/src/components/Upload.vue

+      var { name, files, fps } = pendingUpload;
+      fps = parseInt(fps);
+      pendingUpload.uploading = true;
+      var { data: folder } = await this.girderRest


Suggested change

var { data: folder } = await this.girderRest

let { data: folder } = await this.girderRest

jjnesbitt · 2020-03-27T18:39:25Z

client/src/components/Upload.vue

+      const postUpload = data => {
+        uploaded.push({
+          folder,
+          results: data.results,


Should there be a check here? When running locally, everytime I try to upload, it hands with an error saying:

TypeError: Cannot read property 'results' of undefined

Does this happen for anyone else?

Not getting that error, but there should be a check there anyways. Was your girder web components updated in the process?

I did not upgrade GWC. I'll upgrade and report back with the results.

jjnesbitt · 2020-03-27T18:39:26Z

client/src/components/Upload.vue

+        .catch(error => {
+          if (
+            error.response &&
+            error.response.data &&
+            error.response.data.message
+          ) {
+            this.errorMessage = error.response.data.message;
+          } else {
+            this.errorMessage = error;
+          }
+          pendingUpload.uploading = false;
+          // Return empty object for the folder destructuring
+          return { data: null };
+        });


Since you're already awaitng the girderRest call, can't this can be handled with a try-catch around the await? This would make it easier to read as well as more standard for using await.

I can do that, but I think it prevents the assignment destructuring of the returned value from the await.
let { data: folder } = await this.girderRest.post(......
The options I can think of are either to wrap the entire data and where it used inside the try statement (including other awaits), hoist the variable declaration with a 'var' (don't want to do) or declare the variable outside of the try block and then grab the data afterwards using assignment without declaration syntax (essentially wrapping the entire await in ())
let folder; try { ({ data: folder } = await this.girderRest.post(.......)
let me know if you have another method that I might not be thinking of.

Not messing with the code formatted for github, here is what I'm talking about

In response to that code snippet, I think that'd be fine, or at least better than the alternative. If you didn't want to use the weird destructuring assignment syntax, you could also do this:

let folder; try { const { data } = await this.girderRest.post( ... ); folder = data; }

And in the catch block you'd probably do something like

catch { ... folder = null; }

subdavis · 2020-03-30T14:08:54Z

client/src/components/Upload.vue

+    /**
+     * Takes the pending upload and returns the # of images or size of the file based on the type and state
+     * @param {Object} pendingUpload - contains , status, type
+     *  size, and list of files to upload.
+     */


Suggested change

/**

* Takes the pending upload and returns the # of images or size of the file based on the type and state

* @param {Object} pendingUpload - contains , status, type

* size, and list of files to upload.

*/

/**

* @param {{ type: string, size: number, files: Array, uploading: boolean }} pendingUpload

* @returns {number} # of images or size of file depending on type and state

*/

I noticed that your comment was out of date already. pendingUpload.status was unused and pendingUpload.uploading wasn't mentioned.

subdavis

One final comment, otherwise lgtm.

subdavis · 2020-03-30T14:27:29Z

client/src/components/Upload.vue

@@ -41,7 +41,8 @@ export default {
    },
    /**
     * Takes the pending upload and returns the # of images or size of the file based on the type and state
-     * @param {Object} pendingUpload - contains , status, type
+     * @param {{ type: string, size: number, files: Array, uploading: boolean }} pendingUpload
+     * @returns {number} # of images or size of file depending on type and state
     *  size, and list of files to upload.
     */


Line 46 should be removed.
line 43 is duplicate information and should be removed.

sorry, not thinking properly this morning.

BryonLewis added 7 commits March 24, 2020 11:32

Beginning of adding in the upload

d587355

Setting up some defaults for the upload

c95066b

Adding items while uploading

459b1b9

Adding in uploading while uploading

a373f1a

Fixing some small uneeded stuff

3128179

Adding in Error handling

7a0b706

updating girder web components

3c08980

subdavis added the Type: Feature Request New feature or request label Mar 26, 2020

subdavis changed the title ~~Upload progress Fixes~~ [enhancement] upload progress fixes Mar 26, 2020

BryonLewis requested review from jjnesbitt and subdavis March 26, 2020 15:21

subdavis suggested changes Mar 27, 2020

View reviewed changes

subdavis mentioned this pull request Mar 27, 2020

Allow for annotating image-sequences when annotations not already present #18

Merged

jjnesbitt mentioned this pull request Mar 27, 2020

Add switch that controls creating a folder in uploader #19

Closed

Change requests and fixes

ba315fd

jjnesbitt requested changes Mar 27, 2020

View reviewed changes

Small change requests

78c9580

subdavis reviewed Mar 30, 2020

View reviewed changes

subdavis approved these changes Mar 30, 2020

View reviewed changes

subdavis requested a review from jjnesbitt March 30, 2020 14:17

Documentation Update

ae9c8ed

subdavis reviewed Mar 30, 2020

View reviewed changes

Fixing documentation mistake

57876a8

subdavis approved these changes Mar 30, 2020

View reviewed changes

jjnesbitt approved these changes Mar 30, 2020

View reviewed changes

BryonLewis merged commit 435fd70 into master Mar 30, 2020

BryonLewis deleted the upload-progress branch March 30, 2020 15:50

BryonLewis linked an issue Mar 31, 2020 that may be closed by this pull request

Upload progress reporting is insufficient. #5

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[enhancement] upload progress fixes #17

[enhancement] upload progress fixes #17

BryonLewis commented Mar 26, 2020

subdavis left a comment

subdavis Mar 27, 2020

subdavis Mar 27, 2020

subdavis Mar 27, 2020

subdavis Mar 27, 2020

subdavis Mar 27, 2020

BryonLewis Mar 27, 2020

jjnesbitt Mar 27, 2020

jjnesbitt Mar 27, 2020

jjnesbitt Mar 27, 2020

BryonLewis Mar 27, 2020 •

edited

jjnesbitt Mar 27, 2020

jjnesbitt Mar 27, 2020

BryonLewis Mar 27, 2020

BryonLewis Mar 27, 2020

jjnesbitt Mar 27, 2020

subdavis Mar 30, 2020

subdavis left a comment

subdavis Mar 30, 2020

BryonLewis Mar 30, 2020 •

edited

	// formatSize, totalProgress and totalSize are located in the fileUploader and sizeFormatter mixin
	const { formatSize, totalProgress, totalSize } = this; // use methods and properties from mixins

		this.$emit("update:uploading", false);
		console.log(uploaded);

	var { name, files, fps } = pendingUpload;
	let { name, files, fps } = pendingUpload;

	var { data: folder } = await this.girderRest
	let { data: folder } = await this.girderRest

[enhancement] upload progress fixes #17

[enhancement] upload progress fixes #17

Conversation

BryonLewis commented Mar 26, 2020

subdavis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BryonLewis Mar 27, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

subdavis left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

BryonLewis Mar 30, 2020 • edited

Choose a reason for hiding this comment

BryonLewis Mar 27, 2020 •

edited

BryonLewis Mar 30, 2020 •

edited