diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
index 01ea712306f..997591fa335 100644
--- a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.js
@@ -11,21 +11,21 @@ ProgressBar.template = 'web_editor.ProgressBar';
 
 export class UploadProgressToast extends Component {
     setup() {
-        this.state = useState({ hide: false });
+        this.state = useState({
+            isVisible: false,
+            numberOfFiles: 0,
+        });
 
         useEffect((numberOfFiles) => {
-            if (numberOfFiles) {
-                this.state.hide = false;
+            if (numberOfFiles === 0) {
+                this.state.isVisible = false;
             }
+            if (numberOfFiles > this.state.numberOfFiles) {
+                this.state.isVisible = true;
+            }
+            this.state.numberOfFiles = numberOfFiles;
         }, () => [Object.keys(this.props.files).length]);
     }
-
-    get show() {
-        if (!this.props.files || !Object.keys(this.props.files).length) {
-            return false;
-        }
-        return !this.state.hide;
-    }
 }
 UploadProgressToast.defaultProps = {
     files: {},
diff --git a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
index ac8a864d0cd..c31620f3b39 100644
--- a/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
+++ b/addons/web_editor/static/src/components/upload_progress_toast/upload_progress_toast.xml
@@ -18,10 +18,8 @@
 
 <t t-name="web_editor.UploadProgressToast" owl="1">
     <div class="o_notification_manager o_upload_progress_toast">
-        <div t-if="show" class="o_notification position-relative show fade mb-2 border border-info bg-white" role="alert" aria-live="assertive" aria-atomic="true">
-            <button type="button" class="close o_notification_close" aria-label="Close" t-on-click="() => this.state.hide = true">
-                <i class="oi oi-close"/>
-            </button>
+        <div t-if="state.isVisible" class="o_notification position-relative show fade mb-2 border border-info bg-white" role="alert" aria-live="assertive" aria-atomic="true">
+            <button type="button" class="btn btn-close o_notification_close p-2" aria-label="Close" t-on-click="() => state.isVisible = false"/>
             <div class="o_notification_body ps-2 pe-4 py-2">
                 <div class="me-auto o_notification_content">
                     <div t-foreach="props.files" t-as="file" t-key="file" class="o_we_progressbar">