Drag And Drop In Angular 2

What happens when you are working with Angular 2+  and you want to add a functionality of Drag and Drop file Upload. I found several Solutions to this problem, and many seem a bit intimidation for a beginner While tackling this problem I found a plugin named fileDroppa provided by npm.

Here is a single basic command to add fileDroppa to your Project

i.e, npm install ng-fileDroppa --save

Using this Command the Package name will be automatically added to our Package.json or in Node_Modules 

Now Import the package  into an app.module file

Here is the basic Syntax of fileDroppa

<fileDroppa         [url]="'https://180.154.20.01/image/upload_file'"
                    [autoUpload]="false"
                    [showFilesList]="true"
                    [beforeRequest]="beforeRequest"
                    [beforeFileUpload]="beforeFileUpload"
                    [beforeAddFile]="beforeAddFile"
                    (filesUpdated)="filesUpdated($event)"
                    (fileUploaded)="fileUploaded($event)">
</fileDroppa>

Here is the brief of Required Parameters in fileDroppa

• URL: it is required to make Post Request
•  

• AutoUpload: If it is True files will be automatically uploaded once Selected or Dropped
•  

• ShowFilesList: If False files will be hidden
•  

• BeforeRequest: callback which is called before File will be posted to a server. Good chance to set request header or update XHR request
•  

• BeforeFileUpload: callback which is

• the called before the specific file is uploaded, called with a formData object.
•  

• BeforeAddFile: callback which is called once you drop or select file and before a file is added to fileDroppa file store. It can be used to validate file for example by its type or size.
•  

• • Multiple : If True set multiple attribute of hidden file file tag.Default True.
  •  

• • • • FilesUpdated : Callback which will be fired once when files are updated.
      •  

• • • • • • • • FileUploaded : Callback which will be fired once when file uploaded Successfully.