Optimized setState calls for large file uploads

app/models/task.py

@@ -334,7 +334,9 @@ class Task(models.Model):
                     images = [image.path() for image in self.imageupload_set.all()]
 
                     def callback(progress):
-                        logger.info(progress)
+                        # TODO: add step_progress field in task to track progress
+                        pass
+
 
                     # This takes a while
                     uuid = self.processing_node.process_new_task(images, self.name, self.options, callback)

app/static/app/js/components/ProjectListItem.jsx

@@ -79,7 +79,8 @@ class ProjectListItem extends React.Component {
       progress: 0,
       totalCount: 0,
       totalBytes: 0,
-      totalBytesSent: 0
+      totalBytesSent: 0,
+      lastUpdated: 0
     };
   }
 
@@ -152,9 +153,18 @@ class ProjectListItem extends React.Component {
       });
 
       this.dz.on("totaluploadprogress", (progress, totalBytes, totalBytesSent) => {
-          this.setUploadState({
-            progress, totalBytes, totalBytesSent
-          });
+          // Limit updates since this gets called a lot
+          let now = (new Date()).getTime();
+
+          // Progress 100 is sent multiple times at the end
+          // this makes it so that we update the state only once.
+          if (progress === 100) now = now + 9999999999;
+
+          if (this.state.upload.lastUpdated + 500 < now){
+              this.setUploadState({
+                progress, totalBytes, totalBytesSent, lastUpdated: now
+              });
+          }
         })
         .on("addedfiles", files => {
           this.setUploadState({
@@ -164,7 +174,7 @@ class ProjectListItem extends React.Component {
         })
         .on("transformcompleted", (file, total) => {
           if (this.dz._resizeMap) this.dz._resizeMap[file.name] = this.dz._taskInfo.resizeSize / Math.max(file.width, file.height);
-          this.setUploadState({resizedImages: total});
+          if (this.dz.options.resizeWidth) this.setUploadState({resizedImages: total});
         })
         .on("transformstart", (files) => {
           if (this.dz.options.resizeWidth){