upload: Don't render upload button instead of hiding.

Doesn't make sense to hide the upload button button later when
we can just not show it if the browser doesn't has support for
it.

web/src/compose_setup.js

@@ -103,8 +103,6 @@ export function initialize() {
     const update_compose_max_height = new ResizeObserver(resize.reset_compose_message_max_height);
     update_compose_max_height.observe(document.querySelector("#compose"));
 
-    upload.feature_check($("#compose .compose_upload_file"));
-
     function get_input_info(event) {
         const $edit_banners_container = $(event.target).closest(".edit_form_banners");
         const is_edit_input = Boolean($edit_banners_container.length);

web/src/message_edit.js

@@ -453,7 +453,7 @@ function edit_message($row, raw_content) {
     const max_file_upload_size = realm.max_file_upload_size_mib;
     let file_upload_enabled = false;
 
-    if (max_file_upload_size > 0) {
+    if (max_file_upload_size > 0 && upload.feature_check()) {
         file_upload_enabled = true;
     }
 
@@ -483,7 +483,6 @@ function edit_message($row, raw_content) {
     $form
         .find(".message-edit-feature-group .audio_link")
         .toggle(compose_call.compute_show_audio_chat_button());
-    upload.feature_check($(`#edit_form_${CSS.escape(rows.id($row))} .compose_upload_file`));
 
     const $message_edit_content = $row.find("textarea.message_edit_content");
     const $message_edit_countdown_timer = $row.find(".message_edit_countdown_timer");

web/src/ui_init.js

@@ -176,7 +176,7 @@ function initialize_compose_box() {
         $(
             render_compose({
                 embedded: $("#compose").attr("data-embedded") === "",
-                file_upload_enabled: realm.max_file_upload_size_mib > 0,
+                file_upload_enabled: realm.max_file_upload_size_mib > 0 && upload.feature_check(),
                 giphy_enabled: giphy.is_giphy_enabled(),
                 max_stream_name_length: realm.max_stream_name_length,
                 max_topic_length: realm.max_topic_length,

web/src/upload.js

@@ -26,11 +26,9 @@ export function compose_upload_cancel() {
     compose_upload_object.cancelAll();
 }
 
-// Show the upload button only if the browser supports it.
-export function feature_check($upload_button) {
-    if (window.XMLHttpRequest && new window.XMLHttpRequest().upload) {
-        $upload_button.removeClass("notdisplayed");
-    }
+export function feature_check() {
+    // Show the upload button only if the browser supports it.
+    return window.XMLHttpRequest && new window.XMLHttpRequest().upload;
 }
 
 export function get_translated_status(file) {

web/templates/compose_control_buttons.hbs

@@ -8,7 +8,7 @@
     </div>
     {{#if file_upload_enabled }}
     <div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Upload files' }}">
-        <a role="button" class="compose_control_button compose_upload_file zulip-icon zulip-icon-attachment notdisplayed" aria-label="{{t 'Upload files' }}" tabindex=0></a>
+        <a role="button" class="compose_control_button compose_upload_file zulip-icon zulip-icon-attachment" aria-label="{{t 'Upload files' }}" tabindex=0></a>
     </div>
     {{/if}}
     <div class="compose_control_button_container preview_mode_disabled" data-tippy-content="{{t 'Add video call' }}">

web/tests/compose.test.js

@@ -123,7 +123,6 @@ function test_ui(label, f) {
 function initialize_handlers({override}) {
     override(realm, "realm_available_video_chat_providers", {disabled: {id: 0}});
     override(realm, "realm_video_chat_provider", 0);
-    override(upload, "feature_check", noop);
     override(resize, "watch_manual_resize", noop);
     compose_setup.initialize();
 }
@@ -510,7 +509,6 @@ test_ui("initialize", ({override}) => {
     override(upload, "compose_upload_cancel", () => {
         uppy_cancel_all_called = true;
     });
-    override(upload, "feature_check", noop);
 
     compose_setup.initialize();
 

web/tests/compose_video.test.js

@@ -4,14 +4,13 @@ const {strict: assert} = require("assert");
 
 const events = require("./lib/events");
 const {mock_esm, set_global, with_overrides, zrequire} = require("./lib/namespace");
-const {run_test, noop} = require("./lib/test");
+const {run_test} = require("./lib/test");
 const $ = require("./lib/zjquery");
 const {current_user, page_params, realm} = require("./lib/zpage_params");
 
 const channel = mock_esm("../src/channel");
 const compose_closed_ui = mock_esm("../src/compose_closed_ui");
 const compose_ui = mock_esm("../src/compose_ui");
-const upload = mock_esm("../src/upload");
 mock_esm("../src/resize", {
     watch_manual_resize() {},
 });
@@ -70,8 +69,6 @@ function test(label, f) {
 test("videos", ({override}) => {
     realm.realm_video_chat_provider = realm_available_video_chat_providers.disabled.id;
 
-    override(upload, "feature_check", noop);
-
     stub_out_video_calls();
 
     compose_setup.initialize();
@@ -245,26 +242,20 @@ test("videos", ({override}) => {
     })();
 });
 
-test("test_video_chat_button_toggle disabled", ({override}) => {
-    override(upload, "feature_check", noop);
-
+test("test_video_chat_button_toggle disabled", () => {
     realm.realm_video_chat_provider = realm_available_video_chat_providers.disabled.id;
     compose_setup.initialize();
     assert.equal($(".compose-control-buttons-container .video_link").visible(), false);
 });
 
-test("test_video_chat_button_toggle no url", ({override}) => {
-    override(upload, "feature_check", noop);
-
+test("test_video_chat_button_toggle no url", () => {
     realm.realm_video_chat_provider = realm_available_video_chat_providers.jitsi_meet.id;
     page_params.jitsi_server_url = null;
     compose_setup.initialize();
     assert.equal($(".compose-control-buttons-container .video_link").visible(), false);
 });
 
-test("test_video_chat_button_toggle enabled", ({override}) => {
-    override(upload, "feature_check", noop);
-
+test("test_video_chat_button_toggle enabled", () => {
     realm.realm_video_chat_provider = realm_available_video_chat_providers.jitsi_meet.id;
     realm.realm_jitsi_server_url = "https://meet.jit.si";
     compose_setup.initialize();

web/tests/upload.test.js

@@ -40,14 +40,10 @@ function test(label, f) {
 }
 
 test("feature_check", ({override}) => {
-    const $upload_button = $.create("upload-button-stub");
-    $upload_button.addClass("notdisplayed");
-    upload.feature_check($upload_button);
-    assert.ok($upload_button.hasClass("notdisplayed"));
+    assert.ok(!upload.feature_check());
 
     override(window, "XMLHttpRequest", () => ({upload: true}));
-    upload.feature_check($upload_button);
-    assert.ok(!$upload_button.hasClass("notdisplayed"));
+    assert.ok(upload.feature_check());
 });
 
 test("get_item", () => {