Dropzone js with angular 4

Question

Is anyone used dropzone Js library with angular 2 or 4 before ? and if there is some useful examples or links thanks

Reimers

npmjs.com/package/angular2-dropzone-wrapper check this\ – Popover

Answer 1

There is an Angular 5+ wrapper for Dropzone that can be found here.

Ramp

Answer 2

Maybe it's a bit late, after some research I found these info to make work dropzone 5.0.2 with Angular 5:

• put dropzone.js library under src/js/ (create the js dir, if not already created)
• add js/dropzone.js in the list of scripts in .angular-cli.json

• As described here, run the following command in cmd/shell, at the root of your angular project (where .angular-cli.json is located):

  npm install --save @types/dropzone
  

• Now you are able to import dropzone in your typescript classes like this:

  import * as dropzone from 'dropzone';
  

You may also integrate it as an Angular component (Angular 2+) like described it this article.

WARNING: I didn't test it, thus, maybe, something is missing or wrong. I finally used another library.

Corned

which library do you used ? thnks ! – Overbalance

I use ng2-file-upload (github.com/valor-software/ng2-file-upload) – Corned

You can see an example of usage here: valor-software.com/ng2-file-upload – Corned

Answer 3

If you're not bound to dropzone.js since it's not optimized for use with Angular I might suggest the following library to you.

I've written a highly customizable Angular component which implements Drag'n'Drop behavior. It returns a list of the dropped files as an output event.
This can be found here.

After you imported the module you have access to the component:

<ngx-dropzone [multiple]="false" [maxFileSize]="2000"></ngx-dropzone>

You have some options to set and it comes with a decent default styling (screenshots can be found in the GitHub repo). If you want to, you can even take your own div container with your custom styles and hover effects and put it in the dropzone. Details on this can be found in the API description.

<ngx-dropzone [customContent]="customDropzone" (filesDropped)="onFilesDropped($event)">
<ng-template #customDropzone>
    <div class="custom-dropzone">
        This is my custom content
    </div>
</ng-template>

Jainism