fix(image-upload): ensure accept attribute of uploader is populated c…

…orrectly
StackExchange · Apr 24, 2024 · 9edcb68 · 9edcb68
1 parent 93bf622
commit 9edcb68
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 3 deletions.
diff --git a/src/shared/prosemirror-plugins/image-upload.ts b/src/shared/prosemirror-plugins/image-upload.ts
@@ -133,7 +133,8 @@ export class ImageUploader extends PluginInterfaceView<
         super(INTERFACE_KEY);
 
         const randomId = generateRandomId();
-        const acceptedFileTypes = uploadOptions.acceptedFileTypes || [];
+        const acceptedFileTypes =
+            uploadOptions.acceptedFileTypes || defaultAcceptedFileTypes;
         this.isVisible = false;
         this.uploadOptions = uploadOptions;
         this.validateLink = validateLink;
@@ -146,7 +147,7 @@ export class ImageUploader extends PluginInterfaceView<
         this.uploadField = document.createElement("input");
         this.uploadField.type = "file";
         this.uploadField.className = "js-image-uploader-input v-visible-sr";
-        this.uploadField.accept = acceptedFileTypes?.join(", ");
+        this.uploadField.accept = acceptedFileTypes.join(", ");
         this.uploadField.multiple = false;
         this.uploadField.id = "fileUpload" + randomId;
 
@@ -187,7 +188,7 @@ export class ImageUploader extends PluginInterfaceView<
         // add the caption element to the cta container
         const ctaContainer =
             this.uploadContainer.querySelector(".js-cta-container");
-        const acceptedFileTypesString = acceptedFileTypes?.length
+        const acceptedFileTypesString = acceptedFileTypes.length
             ? acceptedFileTypes.join(", ").replace(/image\//g, "")
             : "";
 

diff --git a/test/shared/prosemirror-plugins/image-upload.test.ts b/test/shared/prosemirror-plugins/image-upload.test.ts
@@ -151,12 +151,56 @@ describe("image upload plugin", () => {
             expect(validationMessage.classList).not.toContain("d-none");
         });
 
+        it("should accept jpeg, png and gif by default if no acceptedFileTypes option is provided", async () => {
+            showImageUploader(view.editorView);
+            expect(uploader.uploadField.accept).toBe(
+                "image/jpeg, image/png, image/gif"
+            );
+
+            await expect(
+                uploader.showImagePreview(
+                    mockFile("some jpeg file", "image/jpeg")
+                )
+            ).resolves.toBeUndefined();
+            expect(findValidationMessage(uploader).classList).toContain(
+                "d-none"
+            );
+
+            await expect(
+                uploader.showImagePreview(
+                    mockFile("some png file", "image/png")
+                )
+            ).resolves.toBeUndefined();
+            expect(findValidationMessage(uploader).classList).toContain(
+                "d-none"
+            );
+
+            await expect(
+                uploader.showImagePreview(
+                    mockFile("some gif file", "image/gif")
+                )
+            ).resolves.toBeUndefined();
+            expect(findValidationMessage(uploader).classList).toContain(
+                "d-none"
+            );
+
+            await expect(
+                uploader.showImagePreview(
+                    mockFile("some bmp file", "image/bmp")
+                )
+            ).rejects.toBe("invalid filetype");
+            expect(findValidationMessage(uploader).textContent).toBe(
+                "Please select an image (jpeg, png, gif) to upload"
+            );
+        });
+
         it("should accept files that match those provided in the acceptedFileTypes option", async () => {
             setupTestVariables({
                 acceptedFileTypes: ["image/bmp"],
             });
 
             showImageUploader(view.editorView);
+            expect(uploader.uploadField.accept).toBe("image/bmp");
 
             await expect(
                 uploader.showImagePreview(