FIX: pick-files-button component (#14045)

FIX: pick-files-button component (#14045)

A file should be accepted if it has supported extension OR supported MIME type.

diff --git a/app/assets/javascripts/discourse/app/components/pick-files-button.js b/app/assets/javascripts/discourse/app/components/pick-files-button.js
index b475288..a451c67 100644
--- a/app/assets/javascripts/discourse/app/components/pick-files-button.js
+++ b/app/assets/javascripts/discourse/app/components/pick-files-button.js
@@ -79,7 +79,7 @@ export default Component.extend({
   _haveAcceptedTypes(files) {
     for (const file of files) {
       if (
-        !(this._hasAcceptedExtension(file) && this._hasAcceptedMimeType(file))
+        !(this._hasAcceptedExtension(file) || this._hasAcceptedMimeType(file))
       ) {
         return false;
       }
diff --git a/app/assets/javascripts/discourse/tests/integration/components/pick-files-button-tests.js b/app/assets/javascripts/discourse/tests/integration/components/pick-files-button-tests.js
index 4c82e9d..b00d093 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/pick-files-button-tests.js
+++ b/app/assets/javascripts/discourse/tests/integration/components/pick-files-button-tests.js
@@ -17,58 +17,71 @@ function createBlob(mimeType, extension) {
 discourseModule(
   "Integration | Component | pick-files-button",
   function (hooks) {
+    const expectedExtension = ".json";
+    const expectedMimeType = "text/json";
+
     setupRenderingTest(hooks);
 
-    componentTest(
-      "it shows alert if a file with an unsupported extension was chosen",
-      {
-        skip: true,
-        template: hbs`
+    hooks.beforeEach(function () {
+      this.set("acceptedFileTypes", [expectedExtension, expectedMimeType]);
+      this.set("onFilesPicked", () => {});
+    });
+
+    componentTest("it doesn't show alert if a file has a supported MIME type", {
+      skip: true,
+      template: hbs`
         {{pick-files-button
           acceptedFileTypes=this.acceptedFileTypes
-          onFilesChosen=this.onFilesChosen}}`,
+          onFilesPicked=this.onFilesPicked}}`,
 
-        beforeEach() {
-          const expectedExtension = ".json";
-          this.set("acceptedFileTypes", [expectedExtension]);
-          this.set("onFilesChosen", () => {});
-        },
+      async test(assert) {
+        sinon.stub(bootbox, "alert");
 
-        async test(assert) {
-          sinon.stub(bootbox, "alert");
+        const wrongExtension = ".txt";
+        const file = createBlob(expectedMimeType, wrongExtension);
 
-          const wrongExtension = ".txt";
-          const file = createBlob("text/json", wrongExtension);
+        await triggerEvent("input[type='file']", "change", { files: [file] });
 
-          await triggerEvent("input#file-input", "change", { files: [file] });
+        assert.ok(bootbox.alert.notCalled);
+      },
+    });
 
-          assert.ok(bootbox.alert.calledOnce);
-        },
-      }
-    );
+    componentTest("it doesn't show alert if a file has a supported extension", {
+      skip: true,
+      template: hbs`
+        {{pick-files-button
+          acceptedFileTypes=this.acceptedFileTypes
+          onFilesPicked=this.onFilesPicked}}`,
+
+      async test(assert) {
+        sinon.stub(bootbox, "alert");
+
+        const wrongMimeType = "text/plain";
+        const file = createBlob(wrongMimeType, expectedExtension);
+
+        await triggerEvent("input[type='file']", "change", { files: [file] });
+
+        assert.ok(bootbox.alert.notCalled);
+      },
+    });
 
     componentTest(
-      "it shows alert if a file with an unsupported MIME type was chosen",
+      "it shows alert if a file has an unsupported extension and unsupported MIME type",
       {
         skip: true,
         template: hbs`
         {{pick-files-button
           acceptedFileTypes=this.acceptedFileTypes
-          onFilesChosen=this.onFilesChosen}}`,
-
-        beforeEach() {
-          const expectedMimeType = "text/json";
-          this.set("acceptedFileTypes", [expectedMimeType]);
-          this.set("onFilesChosen", () => {});
-        },
+          onFilesPicked=this.onFilesPicked}}`,
 
         async test(assert) {
           sinon.stub(bootbox, "alert");
 
+          const wrongExtension = ".txt";
           const wrongMimeType = "text/plain";
-          const file = createBlob(wrongMimeType, ".json");
+          const file = createBlob(wrongMimeType, wrongExtension);
 
-          await triggerEvent("input#file-input", "change", { files: [file] });
+          await triggerEvent("input[type='file']", "change", { files: [file] });
 
           assert.ok(bootbox.alert.calledOnce);
         },

GitHub sha: 46cdddbac9b04a9d992d1546368521e6d8b3d2b4

This commit appears in #14045 which was approved by jjaffeux. It was merged by AndrewPrigorshnev.