Drag drop is not working

[Namita]

Hi

I am using uploader but not able to drag the file. It is downloading instead.

I am not applying any css.

Here is my code. Please help.

Html:-

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

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

              

</ejs-uploader>

Ts:-

export class FlexUploaderComponent {

  //baseUrl = environment.baseUrl;

  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() {

  }

[Sureshkumar P]

Hi Namita, 

 

Based on your shared information with provided sample. you have set the wrong dropElement to the uploader component. Please refer the below code example to achieve your requirement. 

 

Please find the code example here: 

[sample.html] 

 

<div class="control_wrapper"> 

            <ejs-uploader #defaultupload id='defaultfileupload' [asyncSettings]='path' [dropArea]='dropElement' (removing)='onFileRemove($event)'></ejs-uploader> 

        </div> 

 

[sample.component.ts] 

 @ViewChild('defaultupload') 

    public uploadObj: UploaderComponent; 

 

public dropElement: HTMLElement; 

ngOnInit() { 

    this.dropElement = document.getElementsByClassName('control_wrapper')[0] as HTMLElement; 

} 

 

 

We have created the sample based on your requirement. please find the sample here: https://stackblitz.com/edit/angular-2xl4x7-xykbdt?file=app.component.ts  

 

Regards, 

Sureshkumar P