1 files changed, 26 insertions, 8 deletions

diff --git a/src/client/Network.ts b/src/client/Network.ts
index 19eff3b3b..d606b9854 100644
--- a/src/client/Network.ts
+++ b/src/client/Network.ts
@@ -2,6 +2,11 @@ import { Utils } from '../Utils';
 import requestPromise = require('request-promise');
 import { Upload } from '../server/SharedMediaTypes';
 
+/**
+ * Networking is repsonsible for connecting the client to the server. Networking
+ * mainly provides methods that the client can use to begin the process of
+ * interacting with the server, such as fetching or uploading files. 
+ */
 export namespace Networking {
     export async function FetchFromServer(relativeRoute: string) {
         return (await fetch(relativeRoute)).text();
@@ -18,20 +23,31 @@ export namespace Networking {
     }
 
     /**
+     * FileGuidPair attaches a guid to a file that is being uploaded,
+     * allowing the client to track the upload progress.
+     * 
+     * When files are dragged to the canvas, the overWriteDoc's ID is
+     * used as the guid. Otherwise, a new guid is generated. 
+     */
+    export interface FileGuidPair {
+        file: File;
+        guid?: string;
+    }
+    /**
      * Handles uploading basic file types to server and makes the API call to "/uploadFormData" endpoint
-     * with the mapping of GUID to filem as parameters.
+     * with the mapping of guid to files as parameters.
      *
-     * @param files the files to be uploaded to the server
+     * @param fileguidpairs the files and corresponding guids to be uploaded to the server
      * @returns the response as a json from the server
      */
-    export async function UploadFilesToServer<T extends Upload.FileInformation = Upload.FileInformation>(files: File | File[]): Promise<Upload.FileResponse<T>[]> {
+    export async function UploadFilesToServer<T extends Upload.FileInformation = Upload.FileInformation>(fileguidpairs: FileGuidPair | FileGuidPair[]): Promise<Upload.FileResponse<T>[]> {
         const formData = new FormData();
-        if (Array.isArray(files)) {
-            if (!files.length) {
+        if (Array.isArray(fileguidpairs)) {
+            if (!fileguidpairs.length) {
                 return [];
             }
             const maxFileSize = 50000000;
-            if (files.some(f => f.size > maxFileSize)) {
+            if (fileguidpairs.some(f => f.file.size > maxFileSize)) {
                 return new Promise<any>(res =>
                     res([
                         {
@@ -41,9 +57,11 @@ export namespace Networking {
                     ])
                 );
             }
-            files.forEach(file => formData.append(Utils.GenerateGuid(), file));
+            // If the fileguidpair has a guid to use (From the overwriteDoc) use that guid. Otherwise, generate a new guid. 
+            fileguidpairs.forEach(fileguidpair => formData.append(fileguidpair.guid ?? Utils.GenerateGuid(), fileguidpair.file));
         } else {
-            formData.append(Utils.GenerateGuid(), files);
+            // Handle the case where fileguidpairs is a single file. 
+            formData.append(fileguidpairs.guid ?? Utils.GenerateGuid(), fileguidpairs.file);
         }
         const parameters = {
             method: 'POST',