Merge pull request #109 from multinet-app/file-upload-progress-bar

package.json

@@ -23,7 +23,7 @@
     "core-js": "^2.6.5",
     "direct-vuex": "^0.10.4",
     "material-design-icons-iconfont": "^5.0.1",
-    "multinet": "0.13.0",
+    "multinet": "0.15.0",
     "vue": "^2.6.10",
     "vue-gtag": "^1.2.1",
     "vue-router": "^3.0.2",

src/components/FileUploadForm.vue

@@ -64,6 +64,10 @@
         {{ createButtonText }}
       </v-btn>
     </v-card-actions>
+    <v-progress-linear
+      v-if="uploading"
+      :value="uploadProgress"
+    />
   </v-card>
 </template>
 
@@ -116,6 +120,8 @@ export default Vue.extend({
       fileName: null as string | null,
       selectedType: null as FileType | null,
       file: null as File | null,
+      uploading: false,
+      uploadProgress: null as number | null,
     };
   },
 
@@ -131,6 +137,10 @@ export default Vue.extend({
   },
 
   methods: {
+    handleUploadProgress(event: { loaded: number; total: number; [key: string]: unknown }) {
+      this.uploadProgress = (event.loaded / event.total) * 100;
+    },
+
     handleFileInput(file: File) {
       this.file = file;
 
@@ -168,10 +178,14 @@ export default Vue.extend({
         throw new Error('`selectedType` is null, which is impossible');
       }
 
+      this.uploading = true;
+
       try {
         await api.uploadTable(workspace, fileName, {
           type: selectedType.queryCall as UploadType,
           data: file,
+        }, {
+          onUploadProgress: this.handleUploadProgress,
         });
 
         this.tableCreationError = null;
@@ -185,6 +199,9 @@ export default Vue.extend({
           this.tableCreationError = 'Unknown error; please see developer console for details';
           throw err;
         }
+      } finally {
+        this.uploading = false;
+        this.uploadProgress = null;
       }
     },
 

src/components/TableDialog.vue

@@ -85,6 +85,10 @@
             Create
           </v-btn>
         </v-card-actions>
+        <v-progress-linear
+          v-if="uploading"
+          :value="uploadProgress"
+        />
       </v-card>
     </v-card>
   </v-dialog>
@@ -124,6 +128,8 @@ export default Vue.extend({
       tableCreationError: null as string | null,
       key: defaultKeyField,
       overwrite: false,
+      uploading: false,
+      uploadProgress: null as number | null,
     };
   },
   computed: {
@@ -139,6 +145,7 @@ export default Vue.extend({
     restoreKeyField() {
       this.key = defaultKeyField;
     },
+
     handleFileInput(file: File) {
       this.file = file;
 
@@ -151,6 +158,11 @@ export default Vue.extend({
         this.fileUploadError = null;
       }
     },
+
+    handleUploadProgress(evt: { loaded: number; total: number; [key: string]: unknown }) {
+      this.uploadProgress = (evt.loaded / evt.total) * 100;
+    },
+
     async createTable() {
       const {
         file,
@@ -164,19 +176,26 @@ export default Vue.extend({
         return;
       }
 
+      this.uploading = true;
+
       try {
         await api.uploadTable(workspace, fileName, {
           type: 'csv',
           data: file,
           key,
           overwrite,
+        }, {
+          onUploadProgress: this.handleUploadProgress,
         });
 
         this.tableCreationError = null;
         this.tableDialog = false;
         this.$emit('success');
       } catch (err) {
         this.tableCreationError = err.statusText;
+      } finally {
+        this.uploading = false;
+        this.uploadProgress = null;
       }
     },
   },

yarn.lock

@@ -5834,10 +5834,10 @@ multimatch@^2.1.0:
     arrify "^1.0.0"
     minimatch "^3.0.0"
 
-multinet@0.13.0:
-  version "0.13.0"
-  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.13.0.tgz#a054347742456da5a1a5177f1be96614bdd8f495"
-  integrity sha512-zW9g6mddW9oX2NZ4ZH3E9MZ1SweJB7OfQZMqvwjHRbDi2DLmxpKSdPyN0fUrbDEd3Jv/oVeonogusZEJ6NxTog==
+multinet@0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/multinet/-/multinet-0.15.0.tgz#2315c7e077e1301e36f52dd58c03c4c0f019dcb1"
+  integrity sha512-mFoIqicVLVwQ5Dbmhx7TucCldL0Usr2rln07glNjAVxdYsrMZ9unq93aBwijgcgVPvU0NZA8CEC1rtfImWWFZQ==
   dependencies:
     axios "^0.19.0"