feat: upload document and file in one request

Author: Yelinz

addon/adapters/application.js

@@ -1,6 +1,7 @@
 import { inject as service } from "@ember/service";
 import OIDCJSONAPIAdapter from "ember-simple-auth-oidc/adapters/oidc-json-api-adapter";
 
+// when adding a new adapter, make sure to add it to the test app aswell
 export default class ApplicationAdapter extends OIDCJSONAPIAdapter {
   @service("alexandria-config") config;
   @service session;

addon/adapters/document.js

@@ -0,0 +1,23 @@
+import ApplicationAdapter from "./application";
+
+export default class DocumentAdapter extends ApplicationAdapter {
+  ajaxOptions(url, type, options) {
+    const ajaxOptions = super.ajaxOptions(url, type, options);
+
+    if (type === "POST") {
+      // Remove content type for updating and creating records so the content
+      // type will be defined by the passed form data
+      delete ajaxOptions.headers["content-type"];
+    }
+
+    return ajaxOptions;
+  }
+
+  createRecord(store, type, snapshot) {
+    const url = this.buildURL(type.modelName, null, snapshot, "createRecord");
+
+    const data = store.serializerFor(type.modelName).serializeCreate(snapshot);
+
+    return this.ajax(url, "POST", { data });
+  }
+}

addon/models/document.js

@@ -15,6 +15,7 @@ export default class DocumentModel extends LocalizedModel {
   @attr modifiedByUser;
   @attr modifiedByGroup;
   @attr date;
+  @attr content; // needed for upload
 
   @belongsTo("category", { inverse: "documents", async: true }) category;
   @hasMany("tag", { inverse: "documents", async: true }) tags;

addon/serializers/document.js

@@ -1,3 +1,22 @@
 import { LocalizedSerializer } from "ember-localized-model";
 
-export default class DocumentSerializer extends LocalizedSerializer {}
+export default class DocumentSerializer extends LocalizedSerializer {
+  serializeCreate(snapshot) {
+    const data = snapshot.attributes();
+    const content = data.content;
+    delete data.content;
+    data.category = snapshot.belongsTo("category").id;
+
+    const formData = new FormData();
+
+    formData.append(
+      "data",
+      new Blob([JSON.stringify(data)], {
+        type: "application/vnd.api+json",
+      }),
+    );
+    formData.append("content", content);
+
+    return formData;
+  }
+}

addon/services/alexandria-documents.js

@@ -62,23 +62,18 @@ export default class AlexandriaDocumentsService extends Service {
     for (const file of files) {
       if (
         category.allowedMimeTypes &&
-        !category.allowedMimeTypes.includes(file.type)
+        !category.allowedMimeTypes.includes(
+          file.type ?? mime.getType(file.name.split(".").pop()),
+        )
       ) {
-        // file.type is empty for Outlook msg files, see
-        // https://stackoverflow.com/questions/55687631/which-mime-type-can-i-use-for-msg-file-using-file-object
-        if (
-          !category.allowedMimeTypes.includes("application/vnd.ms-outlook") ||
-          !file.name.endsWith(".msg")
-        ) {
-          return this.notification.danger(
-            this.intl.t("alexandria.errors.invalid-file-type", {
-              category: category.name,
-              types: category.allowedMimeTypes
-                .map((t) => mime.getExtension(t))
-                .join(", "),
-            }),
-          );
-        }
+        return this.notification.danger(
+          this.intl.t("alexandria.errors.invalid-file-type", {
+            category: category.name,
+            types: category.allowedMimeTypes
+              .map((t) => mime.getExtension(t))
+              .join(", "),
+          }),
+        );
       }
     }
 
@@ -90,20 +85,11 @@ export default class AlexandriaDocumentsService extends Service {
             metainfo: this.config.defaultModelMeta.document,
             createdByGroup: this.config.activeGroup,
             modifiedByGroup: this.config.activeGroup,
+            content: file,
           });
+          // must be set outside for localized model
           documentModel.title = file.name;
           await documentModel.save();
-
-          const fileModel = this.store.createRecord("file", {
-            name: file.name,
-            variant: "original",
-            document: documentModel,
-            createdByGroup: this.config.activeGroup,
-            modifiedByGroup: this.config.activeGroup,
-            content: file,
-          });
-          await fileModel.save();
-
           return documentModel;
         }),
       );

tests/acceptance/documents-test.js

@@ -158,12 +158,16 @@ module("Acceptance | documents", function (hooks) {
 
     assert.dom("[data-test-document]").doesNotExist();
     this.assertRequest("POST", "/api/v1/documents", (request) => {
-      const attributes = JSON.parse(request.requestBody).data.attributes;
-      assert.strictEqual(
-        attributes.title.en,
-        "test-file.txt",
-        "correct title is set",
-      );
+      request.requestBody
+        .get("data")
+        .text()
+        .then((data) => {
+          assert.strictEqual(
+            JSON.parse(data).title.en,
+            "test-file.txt",
+            "correct title is set",
+          );
+        });
     });
     await triggerEvent("[data-test-upload] [data-test-input]", "change", {
       files: [new File(["Ember Rules!"], "test-file.txt")],

tests/dummy/app/adapters/document.js

@@ -0,0 +1,23 @@
+import ApplicationAdapter from "./application";
+
+export default class DocumentAdapter extends ApplicationAdapter {
+  ajaxOptions(url, type, options) {
+    const ajaxOptions = super.ajaxOptions(url, type, options);
+
+    if (type === "POST") {
+      // Remove content type for updating and creating records so the content
+      // type will be defined by the passed form data
+      delete ajaxOptions.headers["content-type"];
+    }
+
+    return ajaxOptions;
+  }
+
+  createRecord(store, type, snapshot) {
+    const url = this.buildURL(type.modelName, null, snapshot, "createRecord");
+
+    const data = store.serializerFor(type.modelName).serializeCreate(snapshot);
+
+    return this.ajax(url, "POST", { data });
+  }
+}

tests/dummy/mirage/config.js

@@ -10,7 +10,10 @@ export default function makeServer(config) {
       this.timing = 400;
 
       this.resource("categories", { only: ["index", "show"] });
-      this.resource("documents");
+      this.resource("documents", { except: ["create"] });
+      this.post("/documents", function (schema) {
+        return schema.documents.create();
+      });
       this.resource("tags", { except: ["delete"] });
       this.resource("marks", { only: ["index"] });
 
@@ -23,8 +26,6 @@ export default function makeServer(config) {
         });
       });
 
-      this.put("/file-upload", () => new Response(201, {}, {}));
-
       this.get("/files/multi", () => new Response(200, {}, {}));
     },
   });

tests/dummy/mirage/factories/file.js

@@ -7,7 +7,6 @@ export default Factory.extend({
   createdAt: () => faker.date.past(),
   name: () => faker.system.fileName(),
   variant: "original",
-  uploadUrl: "/api/v1/file-upload",
   downloadUrl: () => faker.internet.url(),
   checksum: () => `sha256:${faker.git.commitSha({ length: 64 })}`,
 });

tests/unit/services/alexandria-documents-test.js

@@ -28,18 +28,14 @@ module("Unit | Service | alexandria-documents", function (hooks) {
     );
 
     // Each file generates three requests.
-    assert.strictEqual(requests.length, files.length * 2);
+    assert.strictEqual(requests.length, files.length);
 
     // Files will be uploaded in parallel. So, we cannot know the order.
     const documentRequests = requests.filter((request) =>
       request.url.endsWith("documents"),
     );
-    const fileRequests = requests.filter((request) =>
-      request.url.endsWith("files"),
-    );
 
     assert.strictEqual(documentRequests.length, files.length);
-    assert.strictEqual(fileRequests.length, files.length);
   });
 
   test("it restricts mime type", async function (assert) {

tests/unit/services/alexandria-tags-test.js

@@ -17,15 +17,16 @@ module("Unit | Service | alexandria-tags", function (hooks) {
     const service = this.owner.lookup("service:alexandria-tags");
     const store = this.owner.lookup("service:store");
 
-    const document = await store.createRecord("document").save();
+    const documentId = this.server.create("document").id;
+    const document = await store.findRecord("document", documentId);
     const tag = await store.createRecord("tag", { name: "T1" }).save();
 
     await service.add(document, tag);
 
     assert.deepEqual(
       requests.map((request) => request.method),
       [
-        "POST", // Create document
+        "GET", // Get document
         "POST", // Create tag
         "PATCH", // Add tag to document
       ],
@@ -39,15 +40,20 @@ module("Unit | Service | alexandria-tags", function (hooks) {
 
     const service = this.owner.lookup("service:alexandria-tags");
     const store = this.owner.lookup("service:store");
-
-    const document = await store.createRecord("document").save();
+    const categoryId = this.server.create("category").id;
+    const document = await store
+      .createRecord("document", {
+        category: await store.findRecord("category", categoryId),
+      })
+      .save();
     const tag = "T1";
 
     await service.add(document, tag);
 
     assert.deepEqual(
       requests.map((request) => request.method),
       [
+        "GET", // Get category
         "POST", // Create document
         "GET", // search for existing tag
         "POST", // Create tag
@@ -64,15 +70,16 @@ module("Unit | Service | alexandria-tags", function (hooks) {
     const service = this.owner.lookup("service:alexandria-tags");
     const store = this.owner.lookup("service:store");
 
-    const document = await store.createRecord("document").save();
+    const documentId = this.server.create("document").id;
+    const document = await store.findRecord("document", documentId);
     const tag = (await document.tags)[0];
 
     await service.remove(document, tag);
 
     assert.deepEqual(
       requests.map((request) => request.method),
       [
-        "POST", // Create document
+        "GET", // Get document
         "PATCH", // Remove tag from document
       ],
     );