1 files changed, 40 insertions, 28 deletions

diff --git a/src/client/util/Import & Export/DirectoryImportBox.tsx b/src/client/util/Import & Export/DirectoryImportBox.tsx
index 75b0b52a7..b0bbb5462 100644
--- a/src/client/util/Import & Export/DirectoryImportBox.tsx
+++ b/src/client/util/Import & Export/DirectoryImportBox.tsx
@@ -18,8 +18,14 @@ import { Id } from "../../../new_fields/FieldSymbols";
 import { List } from "../../../new_fields/List";
 import { Cast, BoolCast, NumCast } from "../../../new_fields/Types";
 import { listSpec } from "../../../new_fields/Schema";
+import { GooglePhotos } from "../../apis/google_docs/GooglePhotosClientUtils";
 
 const unsupported = ["text/html", "text/plain"];
+interface FileResponse {
+    name: string;
+    path: string;
+    type: string;
+}
 
 @observer
 export default class DirectoryImportBox extends React.Component<FieldViewProps> {
@@ -68,13 +74,12 @@ export default class DirectoryImportBox extends React.Component<FieldViewProps>
     handleSelection = async (e: React.ChangeEvent<HTMLInputElement>) => {
         runInAction(() => this.uploading = true);
 
-        let promises: Promise<void>[] = [];
         let docs: Doc[] = [];
 
         let files = e.target.files;
         if (!files || files.length === 0) return;
 
-        let directory = (files.item(0) as any).webkitRelativePath.split("/", 1);
+        let directory = (files.item(0) as any).webkitRelativePath.split("/", 1)[0];
 
         let validated: File[] = [];
         for (let i = 0; i < files.length; i++) {
@@ -87,32 +92,39 @@ export default class DirectoryImportBox extends React.Component<FieldViewProps>
         let sizes = [];
         let modifiedDates = [];
 
-        for (let uploaded_file of validated) {
+        let i = 0;
+        const uploads: FileResponse[] = [];
+        const batchSize = 15;
+
+        while (i < validated.length) {
+            const cap = Math.min(validated.length, i + batchSize);
             let formData = new FormData();
-            formData.append('file', uploaded_file);
-            let dropFileName = uploaded_file ? uploaded_file.name : "-empty-";
-            let type = uploaded_file.type;
-
-            sizes.push(uploaded_file.size);
-            modifiedDates.push(uploaded_file.lastModified);
-
-            runInAction(() => this.remaining++);
-
-            let prom = fetch(Utils.prepend(RouteStore.upload), {
-                method: 'POST',
-                body: formData
-            }).then(async (res: Response) => {
-                (await res.json()).map(action((file: any) => {
-                    let docPromise = Docs.Get.DocumentFromType(type, Utils.prepend(file), { nativeWidth: 300, width: 300, title: dropFileName });
-                    docPromise.then(doc => {
-                        doc && docs.push(doc) && runInAction(() => this.remaining--);
-                    });
-                }));
-            });
-            promises.push(prom);
+            const batch = validated.slice(i, cap);
+
+            sizes.push(...batch.map(file => file.size));
+            modifiedDates.push(...batch.map(file => file.lastModified));
+
+            batch.forEach(file => formData.append(Utils.GenerateGuid(), file));
+            const parameters = { method: 'POST', body: formData };
+            uploads.push(...(await (await fetch(Utils.prepend(RouteStore.upload), parameters)).json()));
+
+            runInAction(() => this.remaining += batch.length);
+            i = cap;
         }
 
-        await Promise.all(promises);
+
+        await Promise.all(uploads.map(async upload => {
+            const type = upload.type;
+            const path = Utils.prepend(upload.path);
+            const options = {
+                nativeWidth: 300,
+                width: 300,
+                title: upload.name
+            };
+            const document = await Docs.Get.DocumentFromType(type, path, options);
+            document && docs.push(document) && runInAction(() => this.remaining--);
+            console.log(`(${this.quota - this.remaining}/${this.quota}) ${upload.name}`);
+        }));
 
         for (let i = 0; i < docs.length; i++) {
             let doc = docs[i];
@@ -136,12 +148,12 @@ export default class DirectoryImportBox extends React.Component<FieldViewProps>
         };
         let parent = this.props.ContainingCollectionView;
         if (parent) {
-            let importContainer = Docs.Create.StackingDocument(docs, options);
+            let importContainer = Docs.Create.MasonryDocument(docs, options);
+            await GooglePhotos.Export.CollectionToAlbum({ collection: importContainer });
             importContainer.singleColumn = false;
             Doc.AddDocToList(Doc.GetProto(parent.props.Document), "data", importContainer);
             !this.persistent && this.props.removeDocument && this.props.removeDocument(doc);
             DocumentManager.Instance.jumpToDocument(importContainer, true);
-
         }
 
         runInAction(() => {
@@ -313,7 +325,7 @@ export default class DirectoryImportBox extends React.Component<FieldViewProps>
                             style={{
                                 pointerEvents: "none",
                                 position: "absolute",
-                                right: isEditing ? 16.3 : 14.5,
+                                right: isEditing ? 14 : 15,
                                 top: isEditing ? 15.4 : 16,
                                 opacity: uploading ? 0 : 1,
                                 transition: "0.4s opacity ease"