CODEWITHSUNDEEP
angulardropzone.js
Abdelrahman Hussien
Abdelrahman Hussien

Reputation: 505

Dropzone js with angular 4

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

Upvotes: 10

Views: 13677

Answers (3)

Peter Freeman
Peter Freeman

Reputation: 91

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>

Upvotes: 0

Aymen Turki
Aymen Turki

Reputation: 115

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.

Upvotes: 3

dvlsc
dvlsc

Reputation: 544

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

Upvotes: 8

Related Questions