Merge pull request #14542 from craftcms/bugfix/cloud-uploader

Fix broken JS on Cloud uploader when changing dirs

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fixed a bug where `craft\helpers\DateRange::dateIntervalByTimePeriod()` wasn’t accounting for DST changes.
 - Fixed a bug where programmatically-updated `<textarea>`s weren’t triggering autosaves. ([craftcms/ckeditor#172](https://github.com/craftcms/ckeditor/issues/172))
+- Fixed a JavaScript error that could occur when navigating between asset folders, when a JavaScript-based uploader was registered. ([#14542](https://github.com/craftcms/cms/pull/14542))
 
 ## 4.8.1 - 2024-03-05
 

src/web/assets/cp/src/js/AssetIndex.js

@@ -206,14 +206,7 @@ Craft.AssetIndex = Craft.BaseElementIndex.extend(
 
     createUploadInputs: function () {
       this.$uploadButton?.remove();
-      // removing this input via this.uploader?.$fileInput and this.$uploadInput doesn't work;
-      // if the input gets multiplied in the source code, the event's won't fire as expected;
-      let $uploadInput = this.getButtonContainer().find(
-        '[name="assets-upload"]'
-      );
-      if ($uploadInput.length) {
-        $uploadInput.remove();
-      }
+      this.$uploadInput?.remove();
 
       this.$uploadButton = $('<button/>', {
         type: 'button',
@@ -257,7 +250,6 @@ Craft.AssetIndex = Craft.BaseElementIndex.extend(
           Garnish.hasAttr(this.$source, 'data-can-upload')
         ) {
           this.uploader?.destroy();
-          this.$uploadInput.insertBefore(this.$uploadButton);
           this.$uploadButton.removeClass('disabled');
 
           const options = {
@@ -301,14 +293,9 @@ Craft.AssetIndex = Craft.BaseElementIndex.extend(
       this.currentFolderId = currentFolder?.folderId;
 
       if (!this.settings.foldersOnly && this.currentFolderId) {
-        if (
-          this.uploader &&
-          typeof this.uploader.uploader.fileupload('instance') !== 'undefined'
-        ) {
-          this.uploader.setParams({
-            folderId: this.currentFolderId,
-          });
-        }
+        this.uploader?.setParams({
+          folderId: this.currentFolderId,
+        });
 
         // will the user be allowed to move items in this folder?
         const canMoveSubItems = !!currentFolder.canMoveSubItems;

src/web/assets/cp/src/js/BaseElementIndex.js

@@ -1990,12 +1990,12 @@ Craft.BaseElementIndex = Garnish.Base.extend(
         this.updateFilterBtn();
       }
 
+      this.onSelectSource();
+
       this.sourcePath =
         this.sourcePaths[this.sourceKey] ||
         this.$source.data('default-source-path');
 
-      this.onSelectSource();
-
       if (this.settings.context === 'index') {
         const urlParams = Craft.getQueryParams();
         urlParams.source = this.sourceKey;

src/web/assets/cp/src/js/Uploader.js

@@ -24,23 +24,19 @@ Craft.Uploader = Craft.BaseUploader.extend(
 
       this._onFileAdd = this.onFileAdd.bind(this);
       this.$element.on('fileuploadadd', this._onFileAdd);
-
-      // Update our reference to this.$fileInput if it is being replaced on change
-      if (this.uploader.fileupload('option', 'replaceFileInput')) {
-        this.$element.bind('fileuploadchange', this.updateFileInput.bind(this));
-      }
-    },
-
-    updateFileInput: function (event, data) {
-      this.$fileInput = data.fileInputClone || data.fileInput;
     },
 
     /**
      * Set uploader parameters.
      */
     setParams: function (paramObject) {
       this.base(paramObject);
-      this.uploader.fileupload('option', {formData: this.formData});
+
+      // Only set params if the uploader has been initialized
+      // It won't be if the input is disabled
+      if (this.uploader.data('blueimpFileupload')) {
+        this.uploader.fileupload('option', {formData: this.formData});
+      }
     },
 
     /**
@@ -128,6 +124,7 @@ Craft.Uploader = Craft.BaseUploader.extend(
       autoUpload: false,
       sequentialUploads: true,
       maxFileSize: Craft.maxUploadSize,
+      replaceFileInput: false,
       createAction: 'assets/upload',
       replaceAction: 'assets/replace-file',
       deleteAction: 'assets/delete-asset',