How can I custom file manager upload dialog and call upload function without open default upload dialog.

[wongsathorn phorit]

I found the thread https://www.syncfusion.com/forums/149500/how-can-i-control-the-style-and-content-of-the-popups that looks similar. 

The solution is that thread is override DOM right?

But I can't find how to override the upload dialog with my own template with dropdown list, textbox, or any data  as custom data and add to request.

Is there any solution to do this? 

and next question is how I can call exactly upload function of upload dialog, I've read file-manager api 

I found the only one method about upload dialog like UploadFiles() that use to open upload dialog, can I call function like upload button in dialog from my custom dialog?

[Sharon Sanchez Selvaraj]

Hi Wongsathorn, 

 

Greetings from Syncfusion Support. 

 

We have checked with your reported query. You can customize the dialog based on your preference. Here, we have provided two ways, where the required action can be done. To avoid auto uploading, you can enable autoUpload as false in your uploadSettings API. 

 

In beforePopupOpen event, you can customize the dialog and uploadListCreate event helps in customizing each file before rendering within dialog. Refer to the code snippets below. 

 

 popupOpen(args: BeforePopupOpenCloseEventArgs) { 

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

      var input = document.createElement('button'); 

      input.innerText = 'Click'; 

      args.popupModule.dlgContainer 

        .querySelector('.e-dlg-content') 

        .append(input); 

    } 

  } 

   uploadListCreate(args: UploadListCreateArgs) { 

    var ele = document.querySelector('.e-upload.e-control-wrapper'); 

    var label = document.createElement('label'); 

    label.textContent = 'Enter comments:'; 

    var input = document.createElement('input'); 

    input.setAttribute('type', 'text'); 

    // You can update required controls here 

    ele.prepend(input); 

    ele.prepend(label); 

  } 

 

 

Refer to the API link: 

 

https://ej2.syncfusion.com/angular/documentation/api/file-manager/#uploadlistcreate 

 

Refer to the sample: 

 

https://stackblitz.com/edit/angular-dialog-customization-filemanager-lv3fat?file=app.component.ts 

 

If we have misunderstood, kindly share us clear details on your use case requirement to customize the dialog so that we can assist you promptly.  

 

Please get back to us if you need further assistance. 

 

Regards, 

 

Sharon Sanchez S. 

[wongsathorn phorit]

Thanks for that idea. It works if I need to append any context.

but, can I change template of (1) and call button (2) command if I don't want to use this popup?

[Indhumathy Loganathan]

Hi Wongsathorn, 

 

We have validated your requirement in File Manager component. Please find the answer for your queries. 

 

Query 1: How to change the file details in upload popup template 

 

In our uploadListCreate event, element is returned in the below format with arguments where you can customize the file details based on your requirement.  

 

 

 

For your reference, we have changed the status shown in the popup like below. 

 

  //Status value changed in popup 

  args.element.querySelector('.e-file-status').innerText = 'Are you sure to upload?'; 

 

Output: 

 

 

 

Similar to above code, you can change the details as per your wish. If you want to hide the entire file details, you can set display as none for the entire list and append the customized list you want to show in that particular element. 

 

Query 2: Call Upload action in another button 

 

We can hide the default upload button in the popup by setting display none and trigger the upload in an external ("Click") button by using the below code. 

 

  // Upload action will trigger for Click button 

  btn.onclick = function() { 

    (document.getElementsByClassName('e-file-upload-btn')[0]).click(); 

  }; 

 

You can find the sample demonstrating the solution from below link. 

 

https://stackblitz.com/edit/angular-dialog-customization-filemanager-jbnxuc?file=app.component.ts 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[kanishka raj]

I tried to implement this and the solution is working perfectly fine. there is one slight problem that 'click' button, label and input field are being rendered every time we click on upload.

I have tried removing the elements by id every time the popup is closed but its causes an error with other popups. Is there any way we can prevent this?

[Sivakumar ShunmugaSundaram]

Hi kanishka,

As per the shared details, we understand that you are facing an issue with the upload popup while trying to repeat the upload operation will create multiple “Click” buttons and input fields in the popup. We have checked the reported issue with a previously shared sample from our side and we are able to replicate the reported issue from our side. To overcome the issue, we suggest you add the below condition in popupopen and uploadListCreate event to avoid the mentioned element being rendered every time from your side. We have attached the modified sample for your reference.

Refer to the below code snippet.

[app.component.ts],

 

popupOpen(args: BeforePopupOpenCloseEventArgs) {

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

      if (document.getElementById('btn') == null) {

        var btn = document.createElement('button');

        btn.innerText = 'Click';

...

      }

    }

  }

  uploadListCreate(args: UploadListCreateArgs) {

    if (

      document.getElementById('lbl') == null &&

      document.getElementById('txt') == null

    ) {

      ...

      args.element.querySelector('.e-file-status').innerText =

        'Are you sure to upload?';

    } else {

      document.getElementById('txt').value = '';

    }

  }

 

Sample: https://stackblitz.com/edit/angular-dialog-customization-filemanager-quq16d?file=app.component.ts

Please check the shared sample and get back to us if you need any further assistance.

Regards,

Sivakumar S