Using Dropzone.js with Angular 2

Dropzone.js is a file upload plugin that provides us with the ability to Drag and Drop as well as preview uploaded files. I have been using this plugin with core js for some time now and after recently i had to use it with Angular 2 as well.

Here is how i set it up.  Remember i am using typescript flavor of Angular 2.

Add dropzone script to index page

Configure systemjs

Create a dropzone Typescript component

This component has most of the dropzone properties and indicates file upload progress through EventEmitters.

Import the dropzone component into your app component

Use in your view

And …

Tweak the component and view according to your need.

alexey

alexey

Application developer, movie buff, occasional reader and a huge Manchester United fan.
alexey
  • MavroLabs

    Hey thank you for this info. I get the following error, though, from the component that I created:

    broccoli_type_script_compiler-input_base_path-lrIxfUQM.tmp/0/src/app/dropzone/dropzone.component.ts (12, 23): Cannot find name ‘Dropzone’.

    Note the capital ‘D’ for Dropzone. Any ideas?

  • James

    One thing I don’t exactly get (at least in development) is why you need to include the dropzone.js link in index. Wouldn’t I want to use the SystemJS thing to identify the dependency for that in the component and have it loaded when that component is being used?

    • dxmaestro

      Hi. Thanks for pointing that out. That was a typo. I was missing a big ‘OR’ in there. And of course you don’t need to add reference to both at the same time.

  • Stevie Starosciak

    I’m also getting the issue src/app/dropzone/dropzone.component.ts:11:23
    Cannot find name ‘Dropzone’., even though I installed the typings via the command npm install –save-dev @types/dropzone

    Any idea?

  • Stevie Starosciak

    So when I embed the:

    element into my view, I keep getting an error: EXCEPTION: Invalid dropzone element. I’m able to use a simple form element like this:

    But any time I try to use the component, it gives me that error

    • dxmaestro

      The “Invalid dropzone element” occurs when the element you are trying to bind for dropzone does not exist or is invalid. Please make sure you have the class or id (class imageDropzone in this case) present in the template.

  • Thomas Kennedy

    Are there any sample files?

  • Rushikesh Kshirsagar

    Hello,
    I have added all necessary code as mentioned in blog. But I am not able to see dropzone on browser.
    Error in console is :
    zone.js:1382 GET http://localhost:4200/api/getCsrf 404 (Not Found)
    Uncaught Response {_body: “Cannot GET /api/getCsrf↵”, status: 404, ok: false, statusText: “Not Found”, headers: Headers…}

    Can you please help me. Thank you.

    • dxmaestro

      This error is not about dropzone. It’s about your app not being able to get csrf token.

      • Rushikesh Kshirsagar

        Hello there,
        My application is returning me index.html script on following function.
        this._http.get(“api/getCsrf”).subscribe(data=> {

        I did some workaround but I got another error which is
        EXCEPTION: Invalid dropzone element.
        I also tried to add one css class and DOM element with Id by reading comment below but it could not help me.
        I made some changes to get error free code but could not able to see dropzone on my HTML. I am really stucked at this since 3 days.
        Can you please help me to understand that how I can add class or id for imageDropzone. As i already tried it but could not produce anything.

      • Thomas Kennedy

        I am having the same issues. Can you anymore direction?

        • Thomas Kennedy

          I am using Sails.js as my backend. I was able to enable csrf tokens and its path to get the token is /csrf. This fixed the above issue. Now I have encountered the Exception:Invalid drop zone element. Any suggestions on this one? The below response isn’t clear to me

          • dxmaestro

            The “Invalid dropzone element” occurs when the element you are trying to
            bind for dropzone does not exist or is invalid. Please make sure you
            have the class or id (class imageDropzone in this case) present in the
            template.

          • Thomas Kennedy

            Thanks, but now i get EXCEPTION: Invalid clickable option provided. Please provide a CSS selector, a plain HTML element or a list of those.

            any ideas on this one?

          • dxmaestro

            That again is a dropzone related error. Dropzone needs this element you are binding it to at the time of initialization, which in this case is when the component initializes.

  • Dalachi Ismael

    i have this problem , if you have a solution please!:

    Error: Typescript found the following errors:
    D:/Angular2/dropzone4/tmp/broccoli_type_script_compiler-input_base_path-bMqNNIje.tmp/0/src/app/dropzone.component.ts (14, 23): Cannot find name ‘Dropzone’.
    D:/Angular2/dropzone4/tmp/broccoli_type_script_compiler-input_base_path-bMqNNIje.tmp/0/src/app/dropzone.component.ts (73, 34): Cannot find name ‘Dropzone’.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (D:Angular2node_modulesangular-clilibbroccolibroccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (D:Angular2node_modulesangular-clilibbroccolibroccoli-typescript.js:43:10)