valor-software / ng2-file-upload Goto Github PK

View Code? Open in Web Editor NEW

1.9K 1.9K 660.0 18.92 MB

Easy to use Angular components for files upload

Home Page: http://valor-software.github.io/ng2-file-upload/

License: MIT License

TypeScript 59.70% JavaScript 3.65% HTML 9.61% CSS 27.03%

ng2-file-upload's People

Contributors

Stargazers

Watchers

Forkers

matthewdenobrega trippytango mih-tricom praxilian niczero toddgreenstein hlaiveling14 taylorludwig ashok-pal bensgroi sylvaindumont zatomik midroid guillaumeleone cmsdesigner peregrinator chenyukunjoshhub mii9000 mcl-de jpicornellhb jlacisbx nathasm ian-hamilton jdelgadoalfonso markhatchell ciriarte frickt heidermatos githubgabriela dharlanoliveira-zz pranen loganfreeman cm0s xiahl1990 vvh-empora imakshath nawalgupta fojt conclurer ngocnb-2nf tdonohue ahmelsayed jhiemer simonaco toktik namek supercube1 vipininnotical ediri hitkodev calvingferrando18 simon-sharp juperdog leninmon dannyjlaurence mrwogu ristken jelliotartz joncatmull at-fe-support leomendoza123 sandeep-loktra krepaski parksangkil ogix avinash9044001 zxshinxz ipoweb frankfqchen cheeyim utnas karlhiramoto manfredgit mkurdziel maciejgit ammar91 anubhavnpa guardianfree virajs lozzadude danielkucal limjoonae xaralis astenuz huhaixiang vecbralis lkavicky pavel-mxsf crownhuang bnormoyle deivide vipcalculus phreis codingthailand subhani1249 davidwilcox jeremyross ibrahim87 gold-vibes kfontaine-smartwave

ng2-file-upload's Issues

If you upload an image, can you display it straight?

If I use this to upload an image, can I get a straight reference to it or it as a base64, to display a preview immediately? If so, then how?

Nothing happens when I drag a file or browse to it

I recently installed this library in my project but wasn't able to get it working, following is my code, when I drag a file to the drag zone nothing happens (ie: uploader.queue.length is not changing from 0), I also tried to hook the event like: (file-over)="fileOverBase($event)" it's not fired either.

changing it to <input type="file" ng2-file-select [uploader]="uploader" /> also doesn't do anything.
There isn't any error on the console either.

What might be the cause to this ?

import {FILE_UPLOAD_DIRECTIVES} from "ng2-file-upload/ng2-file-upload";
import {FileUploader} from "ng2-file-upload/ng2-file-upload";

@Component({
  selector: 'app',
  template: require('./app.html'),
  directives:[SlideShowComponent,FILE_UPLOAD_DIRECTIVES]
})
export class App {
  uploader: FileUploader = new FileUploader({url: ''});
}

{{uploader.queue.length}}
    <div ng2-file-drop
         [uploader]="uploader" style="width:200px;height:200px;background-color: teal;">
      Base drop zone
    </div>

[Question] Uploading multipart/form-data

Is there a way to create a form in ng2 with your directive to upload the image and additional info like a username and stuff to a restapi?

Because I try to POST a user with an avatar using http to my Restapi and I can't get it to work. The api itself accepts multipart/form-data.

<div class="row">
                <div class="form-group col-xs-4 col-xs-offset-4">
                    <label for="image">Label</label>
                    <input type="file"
                    [(ngModel)]="wine.image"
                    ngControl="image" #image="ngForm">
                    <div [hidden]="image.valid" class="alert alert-danger">
                        Bild erforderlich!
                    </div>
                </div>
            </div>

angular 0.46.0 integration demo fix

Please support angular2-meteor project

Please support angular2-meteor project by providing a package on Atmosphere! Thanks!

code cleanup

make it easy for someone else to read and contribute

change the use of any (untyped) to typed (File, FileItem, DragEvent, ...), without adding a breakpoint or using regular expression hard to find what is calling what
rename file-drop to drop-zone as file can be dropped or user can paste
filtering should be initialized by drop-zone, FileUploader should only handle uploading and tracking state
FileSelect remove getOptions, you are reading getOptions from uploader and passing them back in, the uploader knows it's own options...
Unit Tests ...
... will add more (reading file-like-object and file-select)

Can't install because some dependency uses old /@reactivex/rxjs dependency

Hi,

I wanted to use the ng2-file-upload in one of my projects but I can't npm install it because some dependency of the project is using /@reactivex/rxjs as a subdependency. We have a Sonartype Nexus proxy set up which rejects the scope syntax.

This was an issue with old angular alphas but has been fixed by moving the rxjs package out of the @ReactiveX scope and referencing it directly (see ReactiveX/rxjs#706).

Could you have a look into your dependencies if you've included some with this package and maybe update them if they have a newer version available?

Duplicate identifier errors when compiling as a part of another project

Hi, I don't know how to properly compile a project that uses ng2-file-upload because it causes many TS2300: Duplicate identifier *whatever* error.
The cause is that my project as well as ng2-file-upload import angular2.d.ts:

In my main.ts:

/// <reference path="../../../node_modules/angular2/angular2.d.ts" />

While ng2-file-upload has its own linked as dependecy in node_modules/ng2-file-upload/node_modules/angular2/angular2.d.ts.

Actually, I haven't used any 3rd party library with Angular2 so this might not be related to ng2-file-upload in the end.

ng2-file-select broken

queueLimit is never initialized but the queueLimit filter is set in the constructor causing every file to fail being added.

Unable to set form's "name" on file upload

The FileItem object set the alias to "file", and there is no easy way to change this. This makes it impossible to have a general backend that can determine action of the uploaded file based on the "name=file" form data.

I currently have to file drop's on my view, each with a distinct role. But, both are uploaded with a name of "file", so I don't know which is which.

Suggest adding an actual "name" input to the ng2-file-drop that can override the "alias" field for that item.

Listeners

Hi,
i see you have on uploader support for event like onComplete etc. Is posible to register listener for this events?

ng2-file-drop api change (discussion)

Use case: simplify onDragOver highlighting

<div ng2-file-drop
        [ng-class]="{'nv-file-over': hasBaseDropZoneOver}"
        file-over)="fileOverBase($event)"
        [uploader]="uploader"
        class="my-drop-zone">

could be changed to

   /* default style applied to drop zones on over */
.ng2-drop-zone-dragover {
  border: dashed 3px green;
}

<div ng2-file-drop
        [uploader]="uploader"
        class="my-drop-zone">

@Directive({
  selector: '[ng2-file-drop]',
  host: {
    ...
    '[class.ng2-drop-zone-dragover]': 'isFileOver',
  }
})
export class FileDrop {
...

onDrop(event:DragEvent):void {
  ...
  this.isFileOver = false;
}

Callback after item.upload()

I need a callback on success/fail of item.upload() but I can't find information on that.
Basically a way to get the image/file url after upload complete.

Auth token support

New version on npm

Can we get a new version on npm with the latest changes? I would like to be able to pull in #43.

Thanks

Unexpected token < loading directives

I just did the npm install for these components per the instructions:

npm i ng2-file-upload --save

I then try to use the component as follows:

import {FileSelect, FileUploader} from 'ng2-file-upload';

and then

@Component({
  selector: 'search-criteria-samples',
  templateUrl: 'app/search-criteria-by-samples.html',
  directives: [FILE_UPLOAD_DIRECTIVES, FileUploader]
})

Initially, I got the "unexpected token" error reported by others. Having found the example code for the System config suggested when someone raised this issue, I was able to make some progress:

System.config({
            packages: {
              app: {
                format: 'register',
                defaultExtension: 'js'
              },
              'node_modules/ng2-file-upload': {},
              'node_modules/ng2-bootstrap': {}
            },
            paths: {
                "ng2-file-upload": "node_modules/ng2-file-upload/ng2-file-upload",
                "ng2-bootstrap"  : "node_modules/ng2-bootstrap/ng2-bootstrap"
            }
          });

Of course, I also installed ng2-bootstrap. With this configuration, I am able to specify the FILE_UPLOAD_DIRECTIVES as a directive and use the ng2-file-select tag. However:

When I try to also use the FileUpload directive in the directives array, I get this error on loading the page:
system-polyfills.src.js:1340 Potentially unhandled rejection [3] Error: No Directive annotation found on FileUploader
I still get the Unexpected Token error when trying to use the Alert directive. Given the system configuration above, I am doing this:
import {Alert} from 'ng2-bootstrap';

To no avail.

Getting uncaught exception error

Hi,

I am getting this following error when i am using this module:

EXCEPTION: Error: Uncaught (in promise): Template parse errors:
Can't bind to 'ngclass' since it isn't a known native property ("/Orbita_LOGO.png" alt="App Logo" style="height:80px;" class="img-responsive"/><div ng2-file-drop="" [ERROR ->][ngclass]="{'nv-file-over': hasBaseDropZoneOver}" (file-over)="fileOverBase($event)" [uploader]="uplo"): ForgotpasswordComponent@0:327

Please help me resolve it

Progress bar not updating

The item progressbar is not updating the view on _onProgress, only if _onSuccess is called the progress is set at 100%. While console.log(this.progress), inside file-item-|>_onProgress gives the correct number.

feature request: restrict types of files that are uploaded

Can you add functionality to restrict the types of files that are uploaded? For example, allow gifs & jpegs only, etc?

after item on queue

is there any kind of method that launches an event after a file is set into the uploader queue?

FILE_UPLOAD_DIRECTIVES can't be found

Trying to import FILE_UPLOAD_DIRECTIVES as shown in demo, it can't be resolved, but the FileUploader is loading fine as both of them supposed imported at same time.

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';

System.js Loading Example

I think it would be helpful for adoption if there was an example of how to use this library with the Sysetm.js module loading that is in the current Angular2 documentation and examples.

This module loading business is new to many (including my self) and the config seems very specific, brittle and sparsely documented. So I think It would be helpful to the project and the community if there was an example of how to integrate the file uploader into the quick start project for example which uses the System.js loader in the browser.

Commit the changes to support angular 2 beta13

Please commit the following changes to make ng2-file-upload working in latest beta 13.

components/file-upload/file-uploader.ts
private _queueLimitFilter() { return this.queueLimit === undefined || this.queue.length < this.queueLimit; }

We are finding difficult to make changes manually to make it working on all the system.

can we have segregated sample with angular beta 7 version

it is very tightly coupled demo code.
It would be great if we have sample in simple and separated code.

Highly appreciated for the help and contribution.

support for Amazon Storage

Hi,

I need a clarification about the file storage. Is it possible that we can store the files/images directly in the amazon webserver. Does this module supports for amazon storage?

Beta.1 looses added file

Hi I copied 100% your example code and it works with beta.0. But when I upgrade to beta.1 the file I add with the select-file-directive is lost in the addToQueue-function. It enters the "list.map...." but gets lost in there and afterwards the queue stays empy.

Error after adding

After adding a package to my project I get an error:

ERROR in ./~/ng2-file-upload/ng2-file-upload.ts
Module build failed: Error: Could not find the following rules specified in the configuration:
no-trailing-comma
sort-object-literal-keys

If I manually remove this strings from node-modules/ng2-file-upload tslint file no error Appeared. However, after this the component does not work and I don't know if it works at all. I always get an "_failFilterIndex: 1" in uploader object after trying to load a file.

with angular2 beta 0

couldn't use with anular2 beta 0;
Unexpected token <

Can't find subcomponents (file-select, file-drop, file-uploader)

I am having problem with finding the sub-components. I am using Visual Studio with a .Net core project and Angular2 2.0.0-beta.6 and ng2-file-upload 1.0.0-beta.1.

In my component I have this:

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';
...
directives: [FILE_UPLOAD_DIRECTIVES],

With this import intellisense works and it will build. However, at runtime I cannot find some of the sub-components and I get these errors:

GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select 404
Error: XHR error (404 Not Found) loading http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-select(…)
GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-drop 404
GET http://localhost:54675/node_modules/ng2-file-upload/components/file-upload/file-uploader 404 (Not Found)

I have verified that those paths are correct and the ts and js exist.

In index.html I have this:

        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            },
            map: {
                'ng2-file-upload': 'node_modules/ng2-file-upload/ng2-file-upload.js'
            }
        });

      System.import('app/boot')
            .then(null, console.error.bind(console));

chore(deps): change ng2* dependencies to peerDependencies

Steps taken:

$ npm install ng2-file-upload --save
added line "import {FileDrop} from 'ng2-file-upload';" to a Component
compiled

package.json dependencies:

  "dependencies": {
    "angular2": "2.0.0-beta.2",
    "bootstrap": "^3.3.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "font-awesome": "^4.5.0",
    "grunt": "^0.4.5",
    "load-grunt-tasks": "^3.4.0",
    "ng2-file-upload": "^0.46.0",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "systemjs": "^0.19.9",
    "typescript": "^1.7.5",
    "zone.js": "0.5.10"
  },

Result:

node_modules/angular2/manual_typings/globals-es6.d.ts(18,3): error TS2300: Duplicate identifier 'Object'.
node_modules/angular2/manual_typings/globals-es6.d.ts(19,3): error TS2300: Duplicate identifier 'Array'.
node_modules/angular2/manual_typings/globals-es6.d.ts(20,3): error TS2300: Duplicate identifier 'Map'.
node_modules/angular2/manual_typings/globals-es6.d.ts(21,3): error TS2300: Duplicate identifier 'Set'.
node_modules/angular2/manual_typings/globals-es6.d.ts(22,3): error TS2300: Duplicate identifier 'Date'.
node_modules/angular2/manual_typings/globals-es6.d.ts(23,3): error TS2300: Duplicate identifier 'RegExp'.
node_modules/angular2/manual_typings/globals-es6.d.ts(24,3): error TS2300: Duplicate identifier 'JSON'.
node_modules/angular2/manual_typings/globals-es6.d.ts(25,3): error TS2300: Duplicate identifier 'Math'.
node_modules/angular2/manual_typings/globals-es6.d.ts(27,3): error TS2300: Duplicate identifier 'Reflect'.
node_modules/angular2/manual_typings/globals-es6.d.ts(28,3): error TS2300: Duplicate identifier 'zone'.
node_modules/angular2/manual_typings/globals-es6.d.ts(29,3): error TS2300: Duplicate identifier 'getAngularTestability'.
node_modules/angular2/manual_typings/globals-es6.d.ts(30,3): error TS2300: Duplicate identifier 'getAllAngularTestabilities'.
node_modules/angular2/manual_typings/globals-es6.d.ts(32,3): error TS2300: Duplicate identifier 'setTimeout'.
node_modules/angular2/manual_typings/globals-es6.d.ts(33,3): error TS2300: Duplicate identifier 'clearTimeout'.
node_modules/angular2/manual_typings/globals-es6.d.ts(34,3): error TS2300: Duplicate identifier 'setInterval'.
node_modules/angular2/manual_typings/globals-es6.d.ts(35,3): error TS2300: Duplicate identifier 'clearInterval'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(6,14): error TS2300: Duplicate identifier 'PropertyKey'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(9,5): error TS2300: Duplicate identifier 'done'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(10,5): error TS2300: Duplicate identifier 'value'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(248,5): error TS2300: Duplicate identifier 'EPSILON'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(283,5): error TS2300: Duplicate identifier 'MAX_SAFE_INTEGER'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(290,5): error TS2300: Duplicate identifier 'MIN_SAFE_INTEGER'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(346,5): error TS2300: Duplicate identifier 'flags'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(498,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(561,5): error TS2300: Duplicate identifier 'size'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(570,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(581,5): error TS2300: Duplicate identifier 'size'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(590,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(605,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/angular2/typings/es6-shim/es6-shim.d.ts(619,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(9,5): error TS2300: Duplicate identifier 'export='.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(16,3): error TS2300: Duplicate identifier 'defaults'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(18,3): error TS2300: Duplicate identifier 'VERSION'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(20,3): error TS2300: Duplicate identifier 'INPUT_START'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(21,3): error TS2300: Duplicate identifier 'INPUT_MOVE'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(22,3): error TS2300: Duplicate identifier 'INPUT_END'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(23,3): error TS2300: Duplicate identifier 'INPUT_CANCEL'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(25,3): error TS2300: Duplicate identifier 'STATE_POSSIBLE'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(26,3): error TS2300: Duplicate identifier 'STATE_BEGAN'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(27,3): error TS2300: Duplicate identifier 'STATE_CHANGED'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(28,3): error TS2300: Duplicate identifier 'STATE_ENDED'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(29,3): error TS2300: Duplicate identifier 'STATE_RECOGNIZED'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(30,3): error TS2300: Duplicate identifier 'STATE_CANCELLED'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(31,3): error TS2300: Duplicate identifier 'STATE_FAILED'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(33,3): error TS2300: Duplicate identifier 'DIRECTION_NONE'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(34,3): error TS2300: Duplicate identifier 'DIRECTION_LEFT'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(35,3): error TS2300: Duplicate identifier 'DIRECTION_RIGHT'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(36,3): error TS2300: Duplicate identifier 'DIRECTION_UP'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(37,3): error TS2300: Duplicate identifier 'DIRECTION_DOWN'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(38,3): error TS2300: Duplicate identifier 'DIRECTION_HORIZONTAL'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(39,3): error TS2300: Duplicate identifier 'DIRECTION_VERTICAL'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(40,3): error TS2300: Duplicate identifier 'DIRECTION_ALL'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(42,3): error TS2300: Duplicate identifier 'Manager'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(43,3): error TS2300: Duplicate identifier 'Input'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(44,3): error TS2300: Duplicate identifier 'TouchAction'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(46,3): error TS2300: Duplicate identifier 'TouchInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(47,3): error TS2300: Duplicate identifier 'MouseInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(48,3): error TS2300: Duplicate identifier 'PointerEventInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(49,3): error TS2300: Duplicate identifier 'TouchMouseInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(50,3): error TS2300: Duplicate identifier 'SingleTouchInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(52,3): error TS2300: Duplicate identifier 'Recognizer'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(53,3): error TS2300: Duplicate identifier 'AttrRecognizer'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(54,3): error TS2300: Duplicate identifier 'Tap'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(55,3): error TS2300: Duplicate identifier 'Pan'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(56,3): error TS2300: Duplicate identifier 'Swipe'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(57,3): error TS2300: Duplicate identifier 'Pinch'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(58,3): error TS2300: Duplicate identifier 'Rotate'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(59,3): error TS2300: Duplicate identifier 'Press'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(73,3): error TS2300: Duplicate identifier 'domEvents'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(74,3): error TS2300: Duplicate identifier 'enable'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(75,3): error TS2300: Duplicate identifier 'preset'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(76,3): error TS2300: Duplicate identifier 'touchAction'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(77,3): error TS2300: Duplicate identifier 'cssProps'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(85,3): error TS2300: Duplicate identifier 'contentZooming'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(86,3): error TS2300: Duplicate identifier 'tapHighlightColor'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(87,3): error TS2300: Duplicate identifier 'touchCallout'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(88,3): error TS2300: Duplicate identifier 'touchSelect'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(89,3): error TS2300: Duplicate identifier 'userDrag'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(90,3): error TS2300: Duplicate identifier 'userSelect'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(119,15): error TS2300: Duplicate identifier 'HammerInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(197,15): error TS2300: Duplicate identifier 'MouseInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(202,15): error TS2300: Duplicate identifier 'PointerEventInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(207,15): error TS2300: Duplicate identifier 'SingleTouchInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(212,15): error TS2300: Duplicate identifier 'TouchInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(217,15): error TS2300: Duplicate identifier 'TouchMouseInput'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(229,3): error TS2300: Duplicate identifier 'defaults'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(316,15): error TS2300: Duplicate identifier 'TouchAction'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(329,3): error TS2300: Duplicate identifier 'x'.
node_modules/angular2/typings/hammerjs/hammerjs.d.ts(330,3): error TS2300: Duplicate identifier 'y'.
node_modules/angular2/typings/zone/zone.d.ts(3,15): error TS2300: Duplicate identifier 'Zone'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(14,3): error TS2300: Duplicate identifier 'Object'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(15,3): error TS2300: Duplicate identifier 'Array'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(16,3): error TS2300: Duplicate identifier 'Map'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(17,3): error TS2300: Duplicate identifier 'Set'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(18,3): error TS2300: Duplicate identifier 'Date'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(19,3): error TS2300: Duplicate identifier 'RegExp'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(20,3): error TS2300: Duplicate identifier 'JSON'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(21,3): error TS2300: Duplicate identifier 'Math'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(23,3): error TS2300: Duplicate identifier 'Reflect'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(24,3): error TS2300: Duplicate identifier 'zone'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(25,3): error TS2300: Duplicate identifier 'getAngularTestability'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(26,3): error TS2300: Duplicate identifier 'getAllAngularTestabilities'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(28,3): error TS2300: Duplicate identifier 'setTimeout'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(29,3): error TS2300: Duplicate identifier 'clearTimeout'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(30,3): error TS2300: Duplicate identifier 'setInterval'.
node_modules/ng2-file-upload/node_modules/angular2/manual_typings/globals-es6.d.ts(31,3): error TS2300: Duplicate identifier 'clearInterval'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(6,14): error TS2300: Duplicate identifier 'PropertyKey'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(9,5): error TS2300: Duplicate identifier 'done'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(10,5): error TS2300: Duplicate identifier 'value'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(248,5): error TS2300: Duplicate identifier 'EPSILON'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(283,5): error TS2300: Duplicate identifier 'MAX_SAFE_INTEGER'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(290,5): error TS2300: Duplicate identifier 'MIN_SAFE_INTEGER'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(346,5): error TS2300: Duplicate identifier 'flags'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(498,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(561,5): error TS2300: Duplicate identifier 'size'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(570,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(581,5): error TS2300: Duplicate identifier 'size'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(590,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(605,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/ng2-file-upload/node_modules/angular2/typings/es6-shim/es6-shim.d.ts(619,5): error TS2300: Duplicate identifier 'prototype'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(9,5): error TS2300: Duplicate identifier 'export='.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(16,3): error TS2300: Duplicate identifier 'defaults'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(18,3): error TS2300: Duplicate identifier 'VERSION'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(20,3): error TS2300: Duplicate identifier 'INPUT_START'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(21,3): error TS2300: Duplicate identifier 'INPUT_MOVE'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(22,3): error TS2300: Duplicate identifier 'INPUT_END'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(23,3): error TS2300: Duplicate identifier 'INPUT_CANCEL'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(25,3): error TS2300: Duplicate identifier 'STATE_POSSIBLE'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(26,3): error TS2300: Duplicate identifier 'STATE_BEGAN'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(27,3): error TS2300: Duplicate identifier 'STATE_CHANGED'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(28,3): error TS2300: Duplicate identifier 'STATE_ENDED'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(29,3): error TS2300: Duplicate identifier 'STATE_RECOGNIZED'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(30,3): error TS2300: Duplicate identifier 'STATE_CANCELLED'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(31,3): error TS2300: Duplicate identifier 'STATE_FAILED'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(33,3): error TS2300: Duplicate identifier 'DIRECTION_NONE'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(34,3): error TS2300: Duplicate identifier 'DIRECTION_LEFT'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(35,3): error TS2300: Duplicate identifier 'DIRECTION_RIGHT'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(36,3): error TS2300: Duplicate identifier 'DIRECTION_UP'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(37,3): error TS2300: Duplicate identifier 'DIRECTION_DOWN'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(38,3): error TS2300: Duplicate identifier 'DIRECTION_HORIZONTAL'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(39,3): error TS2300: Duplicate identifier 'DIRECTION_VERTICAL'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(40,3): error TS2300: Duplicate identifier 'DIRECTION_ALL'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(42,3): error TS2300: Duplicate identifier 'Manager'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(43,3): error TS2300: Duplicate identifier 'Input'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(44,3): error TS2300: Duplicate identifier 'TouchAction'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(46,3): error TS2300: Duplicate identifier 'TouchInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(47,3): error TS2300: Duplicate identifier 'MouseInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(48,3): error TS2300: Duplicate identifier 'PointerEventInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(49,3): error TS2300: Duplicate identifier 'TouchMouseInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(50,3): error TS2300: Duplicate identifier 'SingleTouchInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(52,3): error TS2300: Duplicate identifier 'Recognizer'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(53,3): error TS2300: Duplicate identifier 'AttrRecognizer'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(54,3): error TS2300: Duplicate identifier 'Tap'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(55,3): error TS2300: Duplicate identifier 'Pan'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(56,3): error TS2300: Duplicate identifier 'Swipe'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(57,3): error TS2300: Duplicate identifier 'Pinch'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(58,3): error TS2300: Duplicate identifier 'Rotate'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(59,3): error TS2300: Duplicate identifier 'Press'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(73,3): error TS2300: Duplicate identifier 'domEvents'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(74,3): error TS2300: Duplicate identifier 'enable'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(75,3): error TS2300: Duplicate identifier 'preset'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(76,3): error TS2300: Duplicate identifier 'touchAction'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(77,3): error TS2300: Duplicate identifier 'cssProps'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(85,3): error TS2300: Duplicate identifier 'contentZooming'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(86,3): error TS2300: Duplicate identifier 'tapHighlightColor'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(87,3): error TS2300: Duplicate identifier 'touchCallout'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(88,3): error TS2300: Duplicate identifier 'touchSelect'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(89,3): error TS2300: Duplicate identifier 'userDrag'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(90,3): error TS2300: Duplicate identifier 'userSelect'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(119,15): error TS2300: Duplicate identifier 'HammerInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(197,15): error TS2300: Duplicate identifier 'MouseInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(202,15): error TS2300: Duplicate identifier 'PointerEventInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(207,15): error TS2300: Duplicate identifier 'SingleTouchInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(212,15): error TS2300: Duplicate identifier 'TouchInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(217,15): error TS2300: Duplicate identifier 'TouchMouseInput'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(229,3): error TS2300: Duplicate identifier 'defaults'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(316,15): error TS2300: Duplicate identifier 'TouchAction'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(329,3): error TS2300: Duplicate identifier 'x'.
node_modules/ng2-file-upload/node_modules/angular2/typings/hammerjs/hammerjs.d.ts(330,3): error TS2300: Duplicate identifier 'y'.
node_modules/ng2-file-upload/node_modules/angular2/typings/zone/zone.d.ts(3,15): error TS2300: Duplicate identifier 'Zone'.

Add an Option to Include File Full Path

Currently, the object file only include name, size, type and lastModified. It would be nice to also include a full path of the file selected. Thank you.

Problem with Content-Type at Upload

Hi,

I tried to use the uploader with a flac-file. My problem was that the content-type is not correct
"audio/flac" and instead I had something strange like this
"multipart/form-data; boundary=----WebKitFormBoundary4EO5NLaexhX6MTbl"

It was easy to fix it manually by adding this line to in the file-uploader._xhrTransport function

xhr.setRequestHeader('Content-Type',item.file.type);

I hope you can add this support soon, because our backend is a bit picky with content-types.

uncaught exception: SyntaxError: expected expression, got '<'

I have installed the module as per the instructions

I have written like this in the ts file:

1.import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';

@component({
selector: 'sd-forgot',
moduleId: module.id,
templateUrl: '/components/signup/components/forgotpassword.component.jade',
directives: [MATERIAL_DIRECTIVES, NgForm, FILE_UPLOAD_DIRECTIVES, FileUploader],
providers: [AuthService]
})
I have called the directives like this for filedrop

// class FileDrop
@directive({
selector: '[ng2-file-drop]',
properties: ['uploader'],
events: ['fileOver'],
host: {
'(drop)': 'onDrop($event)',
'(dragover)': 'onDragOver($event)',
'(dragleave)': 'onDragLeave($event)'
}
})

When the run the application i am getting this error : uncaught exception: SyntaxError: expected expression, got '<'
Evaluating http://localhost:3001/node_modules/ng2-file-upload.js

Please help me out how to solve this issue

feat(upload): Client Side S3 upload

Wondering if this is in the roadmap....

Cannot resolve all parameters for 'FileDrop'(?)

I'm getting the following error when I use the FileSelect directive:

Cannot resolve all parameters for 'FileSelect'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'FileSelect' is decorated with Injectable.

I'm using Angular version 2.0.0-beta.2, and I've closely followed the demo code. Not sure if I'm doing something wrong or this is really an issue. Any suggestions?

Thanks.

Compilation errors

Sorry, I really don't know ehere is prob;em, maybe in my tsconfig settings, but when I installed you project via npm and then trying compile my project I have following errors

message TS6032: File change detected. Starting incremental compilation...
error TS6059: File 'node_modules/ng2-file-upload/components/file-upload/file-drop.ts' is not under 'rootDir' 'app/src'. 'rootDir' is expected to contain all source files.
error TS6059: File 'node_modules/ng2-file-upload/components/file-upload/file-item.ts' is not under 'rootDir' 'app/src'. 'rootDir' is expected to contain all source files.
error TS6059: File 'node_modules/ng2-file-upload/components/file-upload/file-like-object.ts' is not under 'rootDir' 'app/src'. 'rootDir' is expected to contain all source files.
error TS6059: File 'node_modules/ng2-file-upload/components/file-upload/file-select.ts' is not under 'rootDir' 'app/src'. 'rootDir' is expected to contain all source files.
error TS6059: File 'node_modules/ng2-file-upload/components/file-upload/file-uploader.ts' is not under 'rootDir' 'app/src'. 'rootDir' is expected to contain all source files.

This is my tsconfig file.

{
  "version": "1.6.2",
  "compilerOptions": {
    "target": "ES5",
    "module": "commonjs",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "../dist",
    "rootDir": "."    
  }        
}

Version of typesctipt is 1.6.2

Update the dependencies

Please update the deps

"angular2": "2.0.0-beta.0"
"rxjs": "5.0.0-beta.0"

Uncaught SyntaxError: Unexpected token < - Under Ng2.Beta.0

Using: [email protected], [email protected]

Trying to use the Demo verbatim. Basing off of NG2's Quickstart (SystemJS based).
The error occurs when SystemJS attempts to inject the Script tag.

To reproduce:

Follow NG2 5-min quickstart
Add ng2-file-upload: $ npm i [email protected] --save
Update app/app.component.ts and app/app.component.html. Which are taken directly from upload demo. (Attached below)
Run npm start

Sample Project:
ng2FileUpload.zip

Code works in beta.7 does not work in beta.13

Error:

EXCEPTION: Error: Uncaught (in promise): Cannot resolve all parameters for 'FileSelect'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'FileSelect' is decorated with Injectable.

Code:

/// <reference path="../../../typings/angular2.d.ts" />

import {Component, Input, OnChanges}  from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle} from 'angular2/common';
import {FILE_UPLOAD_DIRECTIVES, FileUploader} from 'ng2-file-upload';

@Component({
    selector: 'uploader',
    template: `
        <div class="navbar navbar-default">
            <div class="navbar-header">
                <a class="navbar-brand" href>{{ title }}</a>
            </div>
        </div>

        <div class="expand-to-child">
            <div class="col-md-3">
                <input type="file" ng2-file-select />
            </div>

            <div class="col-md-9">
                <table class="table">
                    <thead>
                    <tr>
                        <th width="50%">Name</th>
                        <th>Size</th>
                        <th>Progress</th>
                        <th>Status</th>
                        <th>Actions</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="#item of uploader.queue">
                        <td><strong>{{ item?.file?.name }}</strong></td>
                        <td *ngIf="uploader.isHTML5" nowrap>{{ item?.file?.size/1024/1024 | number:'.2' }} MB</td>
                        <td *ngIf="uploader.isHTML5">
                            <div class="progress" style="margin-bottom: 0;">
                                <div class="progress-bar" role="progressbar" [ngStyle]="{ 'width': item.progress + '%' }"></div>
                            </div>
                        </td>
                        <td class="text-center">
                            <span *ngIf="item.isSuccess">Uploaded.</span>
                            <span *ngIf="item.isCancel">Canceled.</span>
                            <span *ngIf="item.isError">Error occurs. Contact Developers</span>
                        </td>
                        <td nowrap>
                            <button type="button" class="btn btn-success btn-xs"
                                    (click)="item.upload()" [disabled]="item.isReady || item.isUploading || item.isSuccess">
                                <span class="glyphicon glyphicon-upload"></span> Upload
                            </button>
                            <button type="button" class="btn btn-danger btn-xs"
                                    (click)="item.remove()">
                                <span class="glyphicon glyphicon-trash"></span> Remove
                            </button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    `,
    directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
})
export class UploaderComponent implements OnChanges {
    @Input('isInitializable') private isInitializable;
    @Input('baseUrl') private baseUrl;
    @Input('title') private title;
    private uploader: FileUploader = new FileUploader({url: ''});

    constructor(){
    }

    ngOnChanges(change) {
        if ('isInitializable' in change && change.isInitializable) {
            this.onReadyToInitialize();
        }

        if ('baseUrl' in change) {
            this.onReadyToInitialize();
        }
    }

    onReadyToInitialize() {
        this.uploader.url = this.baseUrl;
        this.uploader.queueLimit = 1;
    }
}

File upload fails

I've added the package to the project.
When I try to upload a file uploader object does not change except appears additional property
"_failFilterIndex": 1. And nothing happens...
What could it be?

Specify a url for a call to remove a file from the server

Removing the file from the client queue is only the first step. If the file had already been uploaded then the remove should allow you to make a call to the server to remove the file there as well.

Automatically add XMLHttpRequest header?

Hey, I was thinking that FileUploader class could automatically add X-Requested-With: XMLHttpRequest header. I think it makes sense because all requests are Ajax request, although I'm not sure this is correct behaviour according to the standard.
I've noticed there's already commented out setRequestHeader() so at least it would be nice if I could set it manually.

Can I set item.withCredentials to false?

I have been having a problem with the post. When I click 'upload all' the progress bar moves but it never actually posts the file. I don't see any errors.

I stumbled across the problem on line 329 of file-uploader.ts.
xhr.withCredentials = item.withCredentials;

If I change this to xhr.withCredentials = false; it will work.

Is there a way to set this as a property from outside?

I am setting the authToken. When withCredentials is false I get the post on the server side and it is authenticated. My angular2 client is a different site than the webApi it calls. CORS is setup and I am getting the post when withCredential is false.
I'm not really sure what this is doing but I know if has something to do with cross-site scripting.

Can I set it to false from outside?
Is that the proper fix?

Demo broken

The demo, that is available at URL http://valor-software.com/ng2-file-upload/ is broken.

The cause is CORS, as the URL of the POST is https://evening-anchorage-3159.herokuapp.com/api/.
The first CORS request, with HTTP verb, is done but the response of the server send :
Access-Control-Allow-Origin: http://valor-software.github.io
So the browser prevent the POST call as the allowed URL is not the requesting URL : http://valor-software.com is not http://valor-software.github.io.

This bug of the demo seems to highlight another bug : while the upload was blocked by CORS, the gauge of the queue progress indicates that the treatment is terminated !

Integrating both simple uploader and drop zone together

Using drop zone uploader, is it possible that whenever i click inside drop zone it opens the window to select file and shows the uploaded file name?

feature request: change css on drop over

when mouse over drop zone, I recommend changing CSS to modify dropzone style

nice project

I will integrate into: http://ng2.javascriptninja.io

Problem when queueLimit is undefined

When I drag and drop a file nothing happens. I don't see the file in the upload queue but I don't get an error.

I have tracked it down to an issue in file-uploader.ts. This variable is defined:
public queueLimit:number;

If I give is a default value it works. Ex:
public queueLimit:number = 100;

When the typescript has no value (public queueLimit:number) the javascript does not have this variable defined in the FileUploader funciton (lines 20).
When the type has a value (public queueLimit:number = 100;) the javascript gets' the variable with the value on line 28..

Not working when loading through node_modules

This does not work:

Importing in component

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from "ng2-file-upload";

System js config:

System.config({
            defaultJSExtensions: true,
            map: {
                'dragula': 'node_modules/dragula/dist/dragula.min',
                'ng2-dragula/ng2-dragula': 'node_modules/ng2-dragula/ng2-dragula',
                'ng2-file-upload': 'node_modules/ng2-file-upload/ng2-file-upload'
            },
            packages: {
                angular2: { defaultExtension: false },
                rxjs: { defaultExtension: false }
            }
        });

But this works:

import {FILE_UPLOAD_DIRECTIVES, FileUploader} from "../../../vendor/ng2-file-upload/ng2-file-upload";

System.config({
            defaultJSExtensions: true,
            map: {
                'dragula': 'node_modules/dragula/dist/dragula.min',
                'ng2-dragula/ng2-dragula': 'node_modules/ng2-dragula/ng2-dragula'
            },
            packages: {
                angular2: { defaultExtension: false },
                rxjs: { defaultExtension: false }
            }
        });

Its not like I get any errors when I drop a file on the drop zone. It just does not work.

Need event to fire on a file drop

Currently, I have no way to tell when a file is dropped. I would like to be able to fire an event on the drop, such that I can perform other actions -- such as manually modifying the FileItem in the queue to alter the alias field's fixed value, and then perform selective uploads.

As it is now, I either have to set autoUpload=true, which means I can't alter the queue entries, or I have to have an external event that can call the upload functions.

autoUpload should be an instantiation parameter for Uploader

Currently, I have to manually set "uploader.autoUpload = true" procedurally after I instantiate new Uploader. It seems a natural choice would be to allow autoUpload:true as part of the instantiation arguments to Uploader.

Is:

this.uploader = new FileUploader({url: this.uploadUrl});
this.uploader.autoUpload = true;

Should be:

this.uploader = new FileUploader({url: this.uploadUrl, autoUpload:true});