drag and drop not working

[Namita]

Hi

 I am using File uploader but I am not able to drag the file. When I am dragging then on droping, it is downloading the file.

Here is my code, Please help.

in html:- 

<ejs-uploader #chunkupload id='chunkfileupload' [maxFileSize]=104857600 [asyncSettings]='path' [dropArea]='dropElement'

              (uploading)="onFileUpload($event);" (removing)="onFileRemove($event)" [allowedExtensions]="AllowedFileTypes">

              

</ejs-uploader>

in ts file:- 

 baseUrl = 'http://localhost:60346/api/';

  @Input() TargetPath: string;

  @Input() AllowedFileTypes: string;

  supportingDocumentList: any[] = [];

  @Output() PostUploadEvent = new EventEmitter();

  public dropElement: HTMLElement = document.getElementsByClassName('control-fluid')[0] as HTMLElement;

  public path: Object = {

  

    saveUrl: this.baseUrl + '/FileUploader/Save',

    removeUrl: this.baseUrl + '/FileUploader/Remove',

    chunkSize: 2000000

  };

  constructor() {

  }

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Namita,

Greetings from Syncfusion support.

We have checked your query. On examining the provided code snippet, you have used dropArea property only where you can drop the files. If you want to customize the drop area, then we suggest you to use that property. If you haven’t configured, then you can drag and drop files in the input element. For your convenience, we have made sample. Please find the sample in the below link.

Sample Link: https://stackblitz.com/edit/angular-pxdtmm-6tzdxq?file=app.component.ts

If we misunderstood your query, kindly get back to us with some more elaboration or if possible try to replicate the reported issue in the provided sample, that will help us to validate this issue further and provide you the better solution from our end.

Regards, 

Jeyanth. 

[Namita]

Not resolved, when I m dragging then it is downloading the file instead of uploading.

Please do needful

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Namita,

Thanks for your update.

We suspect that file is downloading due to drop area is not properly configured. So we suggest you to ensure the same. If still issue persists, kindly share the below information to validate this issue further and to provide you the better solution.

1. Code snippet of uploader rendering part. 

2. Video which demonstrates the issue with replication procedure.

Thanks,
Jeyanth.

[Namita]

not resolved yet

sending code snippet of ts,html and css file

[Jeyanth Muthu Pratheeban Sankara Subramanian]

Hi Namita,

Thanks for your update.

We have checked based on the details shared. Unfortunately, we could not replicate the reported issue and the drag and dropped file is uploading instead of downloading in our end. Please find the ensured sample below. If possible, try to replicate the issue in the attached sample.

Sample Link       : https://stackblitz.com/edit/angular-pxdtmm-6tzdxq?file=app.component.html
Video Link          : https://www.syncfusion.com/downloads/support/forum/156986/ze/Uploader_Drag_And_Drop-339848457 

Regards,  

Jeyanth