How to configure angular2-dropzone-wrapper

Question

I'm trying to get angular2-dropzone-wrapper from https://github.com/zefoy/ngx-dropzone-wrapper to work, but having troubles.

I did

npm install angular2-dropzone-wrapper --save

This results in a new folder named angular2-dropzone-wrapper in my node_modules folder. In my package.json I now have "angular2-dropzone-wrapper": "^2.0.3"

In my app.modules.ts I added

import { DropzoneModule, DropzoneConfig, DropzoneConfigInterface, DropzoneDirective } from "angular2-dropzone-wrapper";

And added DropzoneModule to my

@NgModule({
  imports: [

To my page component ts-file I added

private dropZoneConfig: DropzoneConfigInterface;

In my constructor I add (VS2015 is giving me IntelliSense):

    this.dropZoneConfig.server = this.url;
    this.dropZoneConfig.acceptedFiles = "*.xml";

In my HTML page I add

<dropzone [config]="dropZoneConfig" [message]="'Click or drag images here to upload'"></dropzone>

When I now load the page I get this console error:

GET http://localhost:3000/dropzone 404 (Not Found)
 Error: Error: XHR error (404 Not Found) loading http://localhost:3000/dropzone
    at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/node_modules/zone.js/dist/zone.js:698:29)
    at ZoneDelegate.invokeTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:265:35)
    at Zone.runTask (http://localhost:3000/node_modules/zone.js/dist/zone.js:154:47)
    at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/node_modules/zone.js/dist/zone.js:335:33)
Error loading http://localhost:3000/dropzone as "dropzone" from http://localhost:3000/node_modules/angular2-dropzone-wrapper/dist/lib/dropzone.component.js

I think this means the dropzone component can't be found or is not properly configured. I've been searching for days for a working example but can't find it.

Does anybody knows what is going wrong?

Edit I just did an npm update and got these errors:

+-- reflect-metadata@0.1.10
+-- UNMET PEER DEPENDENCY rxjs@5.0.0-beta.12
+-- typescript@2.2.1
`-- UNMET PEER DEPENDENCY zone.js@0.6.26

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for  fsevents@1.1.1: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN angular2-dropzone-wrapper@2.0.3 requires a peer of rxjs@^5.0.0 but  none was installed.
npm WARN angular2-dropzone-wrapper@2.0.3 requires a peer of zone.js@^0.7.0 but none was installed.

How to solve these? They look related to my problem. I also made some additional configuration changes and now I'm getting this error in the console:

Error: TypeError: ctorParameters.map is not a function

Looking ctorParameters.map is not a function in angular2-mdl it looks I need to do something with the version numbers of my dependencies, but I'm not sure what.

score 0 · Answer 1 · answered Feb 23 '17 at 13:21

I've found the problem. I also needed to import dropzone AND I needed to upgrade my Angular2 version from v2.0.0 to v2.4.8

So my systemjs.config.js looks like this:

var map {
    "dropzone": "node_modules/dropzone/dist/",
    "angular2-dropzone-wrapper": "node_modules/angular2-dropzone-wrapper"
};
var packages = {
    "dropzone": { "main": "dropzone.js", "defaultExtension": "js" },
    'angular2-dropzone-wrapper': { "main": "index.js", "defaultExtension": "js" }
}

My app.modules.ts is also changed:

import { DropzoneModule } from "angular2-dropzone-wrapper/dist/index";

I can now upload my files. I do have more question about dropzone but will ask them in a seperate question.

How to configure angular2-dropzone-wrapper

1 Answers1