FIX: Show error message if no uploads are allowed (#19133)

It used to fail without displaying an error message if no upload
extensions were authorized. This also disables the button in the
first place to avoid displaying an error to the user (the error
will be displayed only when drag and dropping a file).

app/assets/javascripts/discourse/app/components/uppy-image-uploader.js

@@ -7,10 +7,22 @@ import { isEmpty } from "@ember/utils";
 import lightbox from "discourse/lib/lightbox";
 import { next } from "@ember/runloop";
 import { htmlSafe } from "@ember/template";
+import { authorizesOneOrMoreExtensions } from "discourse/lib/uploads";
 
 export default Component.extend(UppyUploadMixin, {
   classNames: ["image-uploader"],
-  uploadingOrProcessing: or("uploading", "processing"),
+  disabled: or("notAllowed", "uploading", "processing"),
+
+  @discourseComputed(
+    "currentUser.staff",
+    "siteSettings.{authorized_extensions,authorized_extensions_for_staff}"
+  )
+  notAllowed() {
+    return !authorizesOneOrMoreExtensions(
+      this.currentUser?.staff,
+      this.siteSettings
+    );
+  },
 
   @discourseComputed("imageUrl", "placeholderUrl")
   showingPlaceholder(imageUrl, placeholderUrl) {

app/assets/javascripts/discourse/app/lib/uploads.js

@@ -64,6 +64,7 @@ export function validateUploadedFile(file, opts) {
   let staff = user && user.staff;
 
   if (!authorizesOneOrMoreExtensions(staff, opts.siteSettings)) {
+    dialog.alert(I18n.t("post.errors.no_uploads_authorized"));
     return false;
   }
 

app/assets/javascripts/discourse/app/templates/components/uppy-image-uploader.hbs

@@ -3,9 +3,9 @@
     <div class="placeholder-overlay" style={{this.placeholderStyle}}></div>
   {{/if}}
   <div class="image-upload-controls">
-    <label class="btn btn-default pad-left no-text {{if this.uploadingOrProcessing "disabled"}}">
+    <label class="btn btn-default pad-left no-text {{if this.disabled "disabled"}}">
       {{d-icon "far-image"}}
-      <PickFilesButton @fileInputDisabled={{this.uploadingOrProcessing}} @fileInputClass="hidden-upload-field" @acceptedFormatsOverride="image/*" />
+      <PickFilesButton @fileInputDisabled={{this.disabled}} @fileInputClass="hidden-upload-field" @acceptedFormatsOverride="image/*" />
     </label>
 
     {{#if this.imageUrl}}

app/assets/javascripts/discourse/tests/unit/lib/uploads-test.js

@@ -138,6 +138,38 @@ discourseModule("Unit | Utility | uploads", function () {
     );
   });
 
+  test("shows error message when no extensions are authorized", function (assert) {
+    this.siteSettings.authorized_extensions = "";
+    this.siteSettings.authorized_extensions_for_staff = "";
+
+    sinon.stub(dialog, "alert");
+    assert.notOk(
+      validateUploadedFiles([{ name: "test.jpg" }], {
+        user: User.create(),
+        siteSettings: this.siteSettings,
+      })
+    );
+    assert.ok(
+      dialog.alert.calledWith(I18n.t("post.errors.no_uploads_authorized"))
+    );
+  });
+
+  test("shows error message when no extensions are authorized for staff", function (assert) {
+    this.siteSettings.authorized_extensions = "";
+    this.siteSettings.authorized_extensions_for_staff = "";
+
+    sinon.stub(dialog, "alert");
+    assert.notOk(
+      validateUploadedFiles([{ name: "test.jpg" }], {
+        user: User.create({ staff: true }),
+        siteSettings: this.siteSettings,
+      })
+    );
+    assert.ok(
+      dialog.alert.calledWith(I18n.t("post.errors.no_uploads_authorized"))
+    );
+  });
+
   test("staff can upload anything in PM", function (assert) {
     const files = [{ name: "some.docx" }];
     this.siteSettings.authorized_extensions = "jpeg";

config/locales/client.en.yml

@@ -3286,6 +3286,7 @@ en:
           one: "Sorry, you can only upload %{count} file at a time."
           other: "Sorry, you can only upload %{count} files at a time."
         upload_not_authorized: "Sorry, the file you are trying to upload is not authorized (authorized extensions: %{authorized_extensions})."
+        no_uploads_authorized: "Sorry, no files are authorized to be uploaded."
         image_upload_not_allowed_for_new_user: "Sorry, new users can not upload images."
         attachment_upload_not_allowed_for_new_user: "Sorry, new users can not upload attachments."
         attachment_download_requires_login: "Sorry, you need to be logged in to download attachments."