File manager overlalp with custom ejs-uploader

[Mayko Estevez]

Hi,

I'm having an issue with the file manager. I added a custom upload by disbling the default uploader and creating a pop-up with my own design and with the ejs-uploader inside.

My bug is that when I try to upload a file with my customized pop-up, it worksthe  first time and second time but at some point file manager auto upload the file skipping the uploader event that I built.

This is how I disabled upload popup from the file manager to use my own popup

// When trying to open popup
public onBeforePopupOpen(args: BeforePopupOpenCloseEventArgs): void {
switch (args.popupName) {
      case 'Upload':
        args.cancel = true;
        break;

    }
}


// When clicking on toolbak
public onToolbarClick(args: ToolbarClickEventArgs) {

  // When item click is upload I open my dialog and disable upload object
  args.cancel = true;
 this.fileManagerInstance?.uploadDialogObj?.element?.remove();

 // open popup

 }

My custom uploader looks like this 

HTML

<ejs-uploader
            #templateUpload
            id="templateUpload"
            [autoUpload]="false"
            maxFileSize="4294967295"
            [dropArea]="dropArea"
            (selected)="onFileSelect($event)"
          >
  </ejs-uploader>

TS file

onFileSelect(args: SelectedEventArgs): void {
    // Manipulating the selection
}

WHen the bug happens this onFileSelect is being skiped and fiel is uploaded directly like skiping the ejs-uploader event and uploading teh file from the file manager direclty.

[Praveen Sellappan]

Hi Mayko,

Thanks for reaching out about this issue. You can disable the File Manager’s default upload by handling the beforeSend event: check if the operation is an upload, and set args.cancel = true. This stops the built-in upload request.

To prevent the Upload popup from opening, you can continue using your current approach. However, please note: if you don’t cancel the upload in beforeSend and only cancel the Upload dialog, the File Manager will continue the upload internally.

You mentioned that you’re using an external uploader in your popup. Could you clarify how you trigger that popup?

• Do you open it via an external button click?
• Are you adding a custom toolbar item?
• Or are you triggering the popup exactly where you cancel the built-in popup opening?

Also, in your popup:

• Do you place a button to start the upload manually?
• When that button is clicked, do you perform the upload operation there?

To prevent files from being uploaded automatically, set the autoUpload property to false so files are not auto-uploaded.

Code snippet:

<ejs-filemanager

      [uploadSettings]="uploadSettings" (beforeSend)="onBeforeSend($event)">

    </ejs-filemanager>

 

   public uploadSettings?: object;

 

this.uploadSettings = { autoUpload: false };

 

public onBeforeSend(args: BeforeSendEventArgs): void {

    if (args.action === 'Upload') {

      args.cancel = true;

    }

  }

 

After implementing the above both cancel the upload in beforeSend and set autoUpload to false then still experience the issue, please share the following that will help us to investigate further:

• A minimal reproducible sample with the same configuration (or a Stack Blitz sample that replicates the issue).
• More details about your layout, how you configured the external upload functionality, and how the upload operation is performed.

Looking forward to your feedback.

Regards,

Praveen Sellappan