How to allow both files and folders in file uploader ?

[Savindu Jayasinghe]

Hello Team,
My requirement is to let a user upload files and folders in the some controller, but currently if we have folder upload available, we will be unable to upload files individually. Is there a possibility of doing both of these tasks in the same controller ? 

[Keerthana Rajendran]

Hi Savinduj, 

 

Thanks for contacting Syncfusion support.  

 

We would like to let you know that the directory upload feature is available only in EJ2 Uploader and not in EJ1 Uploadbox  

 

Documentation: https://ej2.syncfusion.com/angular/documentation/uploader/file-source/#directory-upload 

Demo: https://ej2.syncfusion.com/angular/demos/#/bootstrap5/uploader/default 

 

You have selected EJ1 Uploadbox in this ticket. Kindly confirm us whether you are using EJ1 or EJ2 component in your application. It will help us proceed further  

 

EJ1 Uploadbox: https://help.syncfusion.com/angular/uploadbox/getting-started  

EJ2 Uploader: https://ej2.syncfusion.com/angular/documentation/uploader/getting-started/ 

 

Please revert with these details to serve you better. 

 

Regards, 

Keerthana R. 

[Savindu Jayasinghe]

Hi Keerthana,

Yes I'm sorry for the misunderstanding, I meant to refer to EJ2 Uploader but accidently selected EJ1 Uploadbox.

Thanks,
Savindu J.

[Indrajith Srinivasan]

Hi Savinduj, 

 

Good day to you, 

 

We have validated your reported query “user upload files and folders in the same controller”. The HTML file upload type doesn’t have this support of adding both the files and directories. The usecase can be handled with uploader component, by dynamically updating the directoryUpload property. You can enable and disable the action by using a checkbox. We have also prepared a sample that tries to meet your requirements. 

 

app.component.html 

 

<div class="control-section"> 

  <div class="col-lg-9"> 

    <div class="control_wrapper"> 

      <ejs-uploader 

        #defaultupload 

        id="defaultfileupload" 

        [asyncSettings]="path" 

        [dropArea]="dropElement" 

        (removing)="onFileRemove($event)" 

      ></ejs-uploader> 

    </div> 

  </div> 

  <div class="col-lg-3 property-section"> 

    <div class="property-panel-section"> 

      <div class="property-panel-header">Properties</div> 

      <div class="property-panel-content"> 

        <ejs-checkbox 

          #checkbox 

          label="Enable/Disable folders upload" 

          [checked]="false" 

          (change)="changeHandler($event)" 

        ></ejs-checkbox> 

      </div> 

    </div> 

  </div> 

</div> 

 

 

 

app.component.ts 

 

public changeHandler: EmitType<Object> = () => { 

    this.uploadObj.directoryUpload = this.checkboxObj.checked; 

  }; 

 

 

Sample: https://stackblitz.com/edit/angular-rlgaqs?file=app.component.ts 

 

API link: https://ej2.syncfusion.com/angular/documentation/api/uploader/#directoryupload 

 

Please let us know if you have any concerns, 

 

Regards, 

Indrajith 

[Savindu Jayasinghe]

Hey  Indrajith ,

Thank you so much for you clarifying this inquiry  we had. The alternative method you suggested works well for our requirement, so we shall follow something similar to this. Thank you very much again for reply, its really appreciated 

Best Regards,
Savindu

[Gunasekar Kuppusamy]

Hi savinduj,

Thanks for the information.

We are glad that the provided solution helped from your end. Please let us know if you need further assistance.  

 

Regards,  

Gunasekar