bleenco/ngx-uploader

Angular File Uploader

ngx-uploader

Angular File Uploader

https://ngx-uploader.jankuri.me

Installation

Add ngx-uploader module as dependency to your project.

npm install ngx-uploader --save

or using yarn:

yarn add ngx-uploader

• app.module.ts is a sample how to to include ngx-uploader into your project.
• app.component.ts defines example how to handle events in component or service.
• app.component.html represents HTML template with usage examples of ngFileDrop and ngFileSelect directives.

Running demo on local machine

Building demo source code

npm run build:prod
node dist/api/index.js

Then open your browser at http://localhost:4900.

Running demo using Docker

docker build -t ngx-uploader .
docker run -it --rm -p 4900:4900 ngx-uploader

Again, you are ready to open your browser at http://localhost:4900.

LICENCE

MIT

ngx-uploader's Issues

angular2-polyfills.js:1243 Error: SyntaxError: Unexpected token <

Hi There,

when adding the ng2-oploader I got this run-time error: Error: SyntaxError: Unexpected token <(…) at angular2-polyfills.js:1243. Any reason why? I am using SystemJS to boostrap the app and I am using angular-quick-start 2.0.0-beta.9.

It will be very appreciated any help.
Thanks

Cannot resolve all parameters for 'NgFileSelect'

Hi,

I am facing an issue when using ng2-uploader:
EXCEPTION: Error: Uncaught (in promise): Cannot resolve all parameters for 'NgFileSelect'(?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 'NgFileSelect' is decorated with Injectable.

Please let me know how to resolve this issue.

No Directive annotation found on NgFileSelect

Actually, after adding a package to my project, I get an error:

No Directive annotation found on NgFileSelect

which appears in browser console and project does'n work.

Show image thumbnail

Does it support functionality to show thumbnail of the image right after dropping/uploading it?
If not, any plans to implement it soon?

/node_modules/ng2-uploader/ng2-uploader.js not found

After upgrading to 0.5, I get the error that ng2-uploader can not be found. Looking under the node_modules folder, looks like the ng2-uploader.js file is not being generated from the .ts file. This was not the case with earlier versions.
Folder structure with version 0.5.0 after npm install:

ng2-uploader
|--node_modules
|--src
|--ng2-uploader.ts
|--package.json
|--README.md
|--tsconfig.json

Worked fine with 0.3.5. File structure with version 0.3.5
ng2-uploader
|--bundles
|--config
|--src
|--tests
|--ng2-uploader.d.ts
|--ng2-uloader.js
|--ng2-uploader.js.map
|--ng2-uploader.ts
|--package.json
|--README.md
|--tsconfig.json

'ng-file-select' since it isn't a known native property.

Hi,
Thanks for the nice directive,
I am new to angular 2

I am getting this exception Can't bind to 'ng-file-select' since it isn't a known native property.
even though I am adding following in my component

import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
and added directive too
directives: [UPLOAD_DIRECTIVES]
Please help.

Uploading a new file before the first completes will duplicate

When I upload large files (or attempt to upload a new file while one is still uploading) I notice that it will duplicate the upload.

It seems the files are not being marked as uploading so the filter below will queue them up again.

uploadFilesInQueue(): void {
    let newFiles = this._queue.filter((f) => { return !f.uploading; });
    newFiles.forEach((f) => {
        this.uploadFile(f);
    });
};

I added a fix in the method uploadFile to set the uploading attribute to true, but I am unsure if this is correct.

This seems to only occur when I attempt to upload multiple files before the first one has finished, if the file upload is complete before I upload the second it will work fine, but once you attempt to upload multiple at the same time it appears to duplicate.

This is my code:

upload.html

<div class="col-md-12">
  <div class="box" [ng-file-drop]="options" (onUpload)="handleDropUpload($event)">
    <h3>Upload Mod</h3>
    <i class="fa fa-hand-grab-o icon is-small"></i> Drop files here
    <div *ngFor="#file of dropResp">
      <h4>{{ file.originalName }}</h4>
      <div class="progress">
        <div class="progress-bar" [style.width]="getProgress(file)"></div>
        <span class="percent">{{ getProgress(file) }}</span>
      </div>
    </div>
  </div>
</div>

upload.ts

import { CORE_DIRECTIVES, FORM_DIRECTIVES, NgClass, NgStyle } from 'angular2/common';
import { UPLOAD_DIRECTIVES } from 'ng2-uploader/ng2-uploader';
import { ModService } from '../../services/index';

@Component({
    selector: 'upload-form',
    directives: [UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES],
    templateUrl: 'client/app/+mods/components/upload.component.html'
})
export class UploadForm {
    zone: NgZone;
    options: Object;
    dropProgress: number = 0;
    dropResp: any[] = [];

    constructor(private modService: ModService) {
        this.zone = new NgZone({ enableLongStackTrace: false });
        this.options = {
            url: this.modService.baseURL,
            authTokenPrefix: 'Bearer',
            authToken: localStorage.getItem('jwt')
        };
    }

    handleDropUpload(data): void {
        let index = this.dropResp.findIndex(x => x.id === data.id);
        if (index === -1) {
            this.dropResp.push(data);
        }
        index = this.dropResp.findIndex(x => x.id === data.id);
        this.zone.run(() => {
            this.dropResp[index] = data;
        });
    }

    getProgress(file) {
        let total = file.progress.total;
        let uploaded = file.progress.loaded;
        return Math.floor(uploaded / (total / 100)) + '%';
    }
}

Request : Keep update with Angular Version(dependency breakages)

For every Angular release it is breaking up(dependencies) , if possible can we reduce delay

Can't bind to 'uploader' since it isn't a known native property

I had this working before the release candidate upgrade. Now it compiles but I get this runtime error:

EXCEPTION: Template parse errors:
Can't bind to 'uploader' since it isn't a known native property ("-over': hasBaseDropZoneOver}"
                 (fileOver)="fileOverBase($event)"
                 [ERROR ->][uploader]="uploader"
                 class="well my-drop-zone">
                <!--<h3>Upload Fi"): FileUploadComponent@10:17
Can't bind to 'uploader' since it isn't a known native property ("
                <!--<h3>Upload Files</h3>-->

                <input type="file" ng2-file-select [ERROR ->][uploader]="uploader" multiple /><br />

Here is a snippet from my component.ts:

@Component({
    selector: 'file-upload',
    templateUrl: 'app/components/fileUpload/fileUpload.component.html',
    directives: [FILE_UPLOAD_DIRECTIVES, NgClass, NgStyle, CORE_DIRECTIVES, FORM_DIRECTIVES]
})

export class FileUploadComponent {
    public uploader: FileUploader = null;
    public hasBaseDropZoneOver: boolean = false;
    public hasAnotherDropZoneOver: boolean = false;

    constructor(private _config: ConfigService, private _sessionService: SessionService) {
        this.uploader = new FileUploader({ url: this._config.getUrl('/api/fileupload/upload') });
        this.uploader.authToken = 'Bearer ' + this._sessionService.Session.id_token;
    }

And here is the relevant markup in the template where the error occurs.

            <div ng2-file-drop
                 [ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
                 (fileOver)="fileOverBase($event)"
                 [uploader]="uploader"
                 class="well my-drop-zone">
                <!--<h3>Upload Files</h3>-->

                <input type="file" ng2-file-select [uploader]="uploader" multiple /><br />

Any ideas?

Why UploadFile is not exposed?

If you expose UploadFile we can use it as parameter type of fileUpload event. As we are using typescript provide the type is a good approach.

fails to load 'angular2/core.js'

could not able to use this component with angular2 latest release rc.3 or rc.4.
it gives error cannot found module angular2/core when running in system.js environment
can you please help me
thank you

TypeScript compilation problem

Hi, I'm going crazy.

My application still does not recognize the Directive, while the example code works fine.
Here's what I've done now:

system.config.js

var map = {
   ...
    'ng2-uploader':               'node_modules/ng2-uploader',
  };

  var packages = {
     ...
    'ng2-uploader':               { main: 'ng2-uploader.js', defaultExtension: 'js' },
  };

my component

import { UPLOAD_DIRECTIVES } from 'ng2-uploader';

directives: [UPLOAD_DIRECTIVES]

It still does not work. The error is in my opinion a compilation problem. Let me explain:

Code exemple of ng2-uploader.js (into node_modules/ng2-uploader)

"use strict";
function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var ng2_uploader_1 = require('./src/services/ng2-uploader');
var ng_file_select_1 = require('./src/directives/ng-file-select');
var ng_file_drop_1 = require('./src/directives/ng-file-drop');
__export(require('./src/services/ng2-uploader'));
__export(require('./src/directives/ng-file-select'));
__export(require('./src/directives/ng-file-drop'));
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = {
    directives: [ng_file_select_1.NgFileSelect, ng_file_drop_1.NgFileDrop],
    providers: [ng2_uploader_1.Ng2Uploader]
};
exports.UPLOAD_DIRECTIVES = [ng_file_select_1.NgFileSelect, ng_file_drop_1.NgFileDrop];
//# sourceMappingURL=ng2-uploader.js.map

My app code of ng2-uploader.js (into node_modules/ng2-uploader)

import { Ng2Uploader } from './src/services/ng2-uploader';
import { NgFileSelect } from './src/directives/ng-file-select';
import { NgFileDrop } from './src/directives/ng-file-drop';
export * from './src/services/ng2-uploader';
export * from './src/directives/ng-file-select';
export * from './src/directives/ng-file-drop';
export default {
    directives: [NgFileSelect, NgFileDrop],
    providers: [Ng2Uploader]
};
export var UPLOAD_DIRECTIVES = [NgFileSelect, NgFileDrop];
//# sourceMappingURL=/Users/jan/Dev/github/ng2-uploader/ng2-uploader.js.map

It seems that typescript has not properly compiled library files. Here's my tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist/"
  }
}

I do not see the problem. Anyone has had this error? thank you for any help :)

Can I specify a callback function for when the file is successfully uploaded?

Thanks
C

an error

sorry . it's my problem. ignore it

enhancement: add extra form parameters when uploading file

in component, pass in extra params in formParams :

options: Object = {
url: environment.backendUrl + '/upload',
formParams : [JSON.parse('{"name": "accountId", "value":"3"}')]
};

in ng2-uploader.js:

Ng2Uploader.prototype.uploadFile = function (file) {
....
form.append(this.fieldName, file, file.name);

                var arrayLength = this.formParams.length;

                for (var i = 0; i < arrayLength; i++) {
                    form.append(this.formParams[i].name,this.formParams[i].value);
                }

Programatically upload

Can we programatically upload instead of when the user clicks the file?

Example: We need to save some other data which also has picture, so first we save the data normally, than call the request to save the photo?

Ty

Edit: I can see that Ng2Uploader service exists, but I cannot see an example.

Documentation update ;)

Most of the issues here (autoupload, cancel, extensions,...) are already supported through the options field, so what about actually documenting those features? :)

Support for dropping files on element

First of all thanks for this great but simple library.

I'd like to see support for creating drop zones to drop files. Would be nice!

src/services/ng2-uploader.js references to angular2/core which breaks

Although src/services/ng2-uploader.ts correctly references to @angular/core but the transpiled verson src/services/ng2-uploader.js still references to angular2/core which I think is incorrect.

When I use ng2-uploader in my project, I got error complaining about angular2 not existed.

It's possible that the version uploaded to npmjs is bad.

Can't upload the same file twice

When uploading the same file again - even after switching to another view (e.g. component) and back again - nothing happens.

It is probably intended behavior when the uploader is visible and you just upload the same file again (you can see that in the demo site). But in my case I switch to another component (i.e. click a menu button and go to another view via routing) and then navigate to the upload component again to upload the same file. Nothing happens. Can I maybe reset the uploader in some way when my component is constructed, as a workaround?

can we resize image before uploading it ?

I want to upload an image with 74 x 74 size.

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

I use the ionic2

1. import {UPLOAD_DIRECTIVES} from 'ng2-uploader/ng2-uploader';
2. directives: [UPLOAD_DIRECTIVES],

then an error

/Users/SupeRodv2/dev4living/HeyCommunity/HeyCommunity-frontend/node_modules/ng2-uploader/ng2-uploader.ts:1
import {Ng2Uploader} from './src/services/ng2-uploader';
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

🆘 help me

Is possible to cancel an upload?

Is it possible?

ng2-uploader needs a back-end api?

Does ng2-uploader needs a back-end api? I need it to upload and later download pdf files.

any plan on fixing typescript error? should be pretty simple one

$APP_ROOT/node_modules/ng2-uploader/ng2-uploader.ts(1,1): error TS2654: Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition.

$APP_ROOT/node_modules/ng2-uploader/ng2-uploader.ts(1,1): error TS6053: File '$APP_ROOT/node_modules/ng2-uploader/node_modules/angular2/typings/browser.d.ts' not found.

connect err!

I got a err!

POST http://localhost:9000/law/file/upload

"NetworkError: 404 Not Found - http://localhost:9000/law/file/upload"
upload
（course：CORS less 'Access-Control-Allow-Origin'）。

Client Side S3 upload

Hi

Wondering how can we get started on client side s3 upload? How do you think we should go about extending it?

Cheers
Pratik

Uploader Canvas

Is there any css file or something that shows uploader as it is in demo page?

Is there any event for drop over on file-drop?

It's nice to change the color of drop area, for example.

Integrating in angularcli

Is there any tutorial or example for adding ng2-uploader to angularcli?

I posted the full question and details here:
http://stackoverflow.com/questions/38565757/import-ng2-uploader-in-angularcli

Updates

Property 'findIndex' does not exist on type 'any[]'.

data.done is set instead of data.error despite of HTTP 500

The pasted error below is not an error with the uploader (server/auth), but it is not recognized by ng2-uploader and the flags are set wrong.

XMLHttpRequest cannot load ....... No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 500.

Duplicate Identifier ES6 Shim Typings

Are you able to remove the es6 shim typings reference? When you have it identified globally in your project, you get a duplicate identifier error.

Provide standalone bundle

make.js script should also provide bundle that is not dependant on SystemJS loader.

req to update the dependencies to Rc4

error TS2654: Exported external package typings file cannot contain tripleslash references.

This happens when I simply try to import:
import {UPLOAD_DIRECTIVES} from "ng2-uploader/ng2-uploader";

I've attached the entire console output (it also said something about gulp, but after a restart it didn't anymore, only the 2 TS errors):
console_output.txt

"error TS2654: Exported external package typings file cannot contain tripleslash references. Please contact the package author to update the package definition."
"error TS6053: File 'D:/wamp/www/mysite/node_modules/ng2-uploader/node_modules/angular2/typings/browser.d.ts' not found."

If I remove the reference /// (from both .ts and .d.ts) like it says in #25, then I don't get any errors, console says everything went fine, but the uploader doesn't work. Actually, if I modify anything in my app while having the uploader imported (let's say even a simple text), then build (no errors), then refresh... nothing's changed. All files remain like they were before including the uploader, so I guess nothing transcompiles... even if console says so. But without ng2-upload, everything's fine. That's really weird...

False Boolean options revert back to defaults

Hi, having trouble setting bool options, maybe I'm missing something, but for eg:

  options: Object = {
    url: 'http://localhost:10050/upload',
    autoUpload: false
  };

The following line in the service will always return the default again (true)
this.autoUpload = options && options.autoUpload || this.autoUpload;

Maybe something like this instead:
this.autoUpload = options && options.autoUpload !== false;

I can submit a PR later if you agree,
Cheers

Sourcemap hardcoded path

When including the library in an Angular2 Typescript JSPM environment, I receive errors regarding the loading of SourceMaps. The path to the SourceMap seems to contain hardcoded elements, causing the load to fail.

This is the error I'm getting:

Failed to parse SourceMap: https://***:8500/Users/jan/Dev/github/ng2-uploader/index.js.map

File selection dialog keeps showing up repeatedly in Microsoft Edge / Win 10

This issue seems to be present only when using Microsoft Edge browser on Windows 10:

Once you click on the 'Choose file' button, the Windows File selection dialog opens up. If you cancel the dialog, it will close for an instant an then it'll reopen again. This keeps happening forever. Ultimately you're only left with one choice, i.e. to kill the browser process through Windows Task Manager.

I'm testing this on:
Microsoft Edge 25.10586.0.0
Microsoft EdgeHTML 13.10586
Windows 10

Unable to find typings in the package

After latest update from 0.5.2 to 0.5.4, this error gets thrown:

Error: ENOENT: no such file or directory, open '~/node_modules/ng2-uploader/typings/index.d.ts'

Is it due to the missing typings along with the package?

browser.d.ts not found - Angular2 v2.0.0-beta.13

File ng2-uploader/node_modules/angular2/typings/browser.d.ts is not found.

To get around it I had to remove /// <reference path="node_modules/angular2/typings/browser.d.ts" /> from ng2-uploader.ts and ng2-uploader.d.ts

Module parse failed: /srv/bubble/users/ar/finalysio/repo/node_modules/ng2-uploader/ng2-uploader.ts Line 1: Unexpected token

Any ideas? Using angular2 beta.8

ERROR in ./~/ng2-uploader/ng2-uploader.ts
Module parse failed: /srv/bubble/users/ar/finalysio/repo/node_modules/ng2-uploader/ng2-uploader.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {Ng2Uploader} from './src/services/ng2-uploader';
| import {NgFileSelect} from './src/directives/ng-file-select';
| import {NgFileDrop} from './src/directives/ng-file-drop';
 @ ./application/src/app/_people/components/PeopleFormCmp/PeopleFormCmp.ts 13:21-57

EXCEPTION: TypeError: Cannot set property 'endSourceSpan' of null

this happens when I try to include the drag and drop version from the demo

traceur 404 (Not Found)

Hi there!
Trying to run package with angular2 5 min quickstart (https://angular.io/docs/ts/latest/quickstart.html) and getting 404 error with traceur.
I've attached result "project". Probably, I am doing something wrong with settings. Can you look?

angular2.zip

Typescript duplicates in dependencies' typings

I'm not sure why but, while on the first app run it worked, I couldn't compile typescript files any longer because I was gettins errors such as:

     node_modules/ng2-uploader/typings/globals/es6-collections/index.d.ts(28,5): error TS2300: Duplicate identifier 'size'.
   node_modules/ng2-uploader/typings/globals/es6-promise/index.d.ts(8,15):: error TS2300: Duplicate identifier 'Promise'.

I solved the issue by commenting out completely those 2 files.
But this shouldn't be normal (to need overriding an external module)

Tested on Angular RC2

Module parse failed: Unexpected token

Hello

I cannot get yout library to compile. How am I supposed to get around this?

ERROR in ./~/ng2-uploader/ng2-uploader.ts
Module parse failed: /var/www/html/project/node_modules/ng2-uploader/ng2-uploader.ts Unexpected token (14:30)
You may need an appropriate loader to handle this file type.

Repeat File Upload in Multiple File Upload Mode

when use multiple file upload and select some file it works first time but for next click upload button some file uploaded that not selected in second select.
for example i select w1.png and w2.png in first select and get :

[
    {
        "id": "cebix3crsd3id7wx9a4i",
        "originalName": "w1.png",
        "size": 54366,
        "progress": {
            "total": 54545,
            "loaded": 54545,
            "percent": 100
        },
        "done": true,
        "error": false,
        "abort": false,
        "status": 200,
        "statusText": "OK",
        "response": "{\"status\":true,\"data\":[{\"originalName\":\"w1.png\",\"generatedName\":\"12a17845159bb6f163185cf355a76388.png\"}]}"
    },
    {
        "id": "3ydm925djwf8fvo6tuik9",
        "originalName": "w2.png",
        "size": 56772,
        "progress": {
            "total": 56951,
            "loaded": 56951,
            "percent": 100
        },
        "done": true,
        "error": false,
        "abort": false,
        "status": 200,
        "statusText": "OK",
        "response": "{\"status\":true,\"data\":[{\"originalName\":\"w2.png\",\"generatedName\":\"66b8d4c2d04e47155a82c48ca45c7422.png\"}]}"
    }
]

but in second select w3 and w4 but w2 repeate in file upload:

[
    {
        "id": "cebix3crsd3id7wx9a4i",
        "originalName": "w1.png",
        "size": 54366,
        "progress": {
            "total": 54545,
            "loaded": 54545,
            "percent": 100
        },
        "done": true,
        "error": false,
        "abort": false,
        "status": 200,
        "statusText": "OK",
        "response": "{\"status\":true,\"data\":[{\"originalName\":\"w1.png\",\"generatedName\":\"12a17845159bb6f163185cf355a76388.png\"}]}"
    },
    {
        "id": "3ydm925djwf8fvo6tuik9",
        "originalName": "w2.png",
        "size": 56772,
        "progress": {
            "total": 56951,
            "loaded": 56951,
            "percent": 100
        },
        "done": true,
        "error": false,
        "abort": false,
        "status": 200,
        "statusText": "OK",
        "response": "{\"status\":true,\"data\":[{\"originalName\":\"w2.png\",\"generatedName\":\"66b8d4c2d04e47155a82c48ca45c7422.png\"}]}"
    },
    {
        "id": "mbosv2vmmhlymohia4i",
        "originalName": "w2.png",
        "size": 56772,
        "progress": {
            "total": 56951,
            "loaded": 56951,
            "percent": 100
        },
        "done": true,
        "error": false,
        "abort": false,
        "status": 200,
        "statusText": "OK",
        "response": "{\"status\":true,\"data\":[{\"originalName\":\"w2.png\",\"generatedName\":\"14fdbbd9f2f0e32abda58b6c98c1890c.png\"}]}"
    },
    {
        "id": "108f6cbe8ftaoyh3q5mi",
        "originalName": "w3.png",
        "size": 18965,
        "progress": {
            "total": 19144,
            "loaded": 19144,
            "percent": 100
        },
        "done": true,
        "error": false,
        "abort": false,
        "status": 200,
        "statusText": "OK",
        "response": "{\"status\":true,\"data\":[{\"originalName\":\"w3.png\",\"generatedName\":\"96b4e3e3c9b5948c818ff05a9cf605bd.png\"}]}"
    },
    {
        "id": "152nyba8m2pvd276i529",
        "originalName": "w4.png",
        "size": 41110,
        "progress": {
            "total": 41289,
            "loaded": 41289,
            "percent": 100
        },
        "done": true,
        "error": false,
        "abort": false,
        "status": 200,
        "statusText": "OK",
        "response": "{\"status\":true,\"data\":[{\"originalName\":\"w4.png\",\"generatedName\":\"4a53c35207871c14b290d1024415ea74.png\"}]}"
    }
]

0.5.12 No Directive annotation found on NgFileSelect

angular rc4

import { Component, Input } from "@angular/core";
import { UPLOAD_DIRECTIVES } from "ng2-uploader/ng2-uploader";

@Component({
  selector: 'common-upload',
  template: require('./common-upload.html'),
  directives: [UPLOAD_DIRECTIVES],
})
export class CommonUploadComponent {

  @Input() url: string;

  uploadFile: any;
  options: Object = {
    url: this.url
  };

  handleUpload(data): void {
    if (data && data.response) {
      data = JSON.parse(data.response);
      this.uploadFile = data;
    }
  }
}

Support for allowed file extensions

We should provide support for allowed file extensions. If file extension don't match the provided allowed extensions uploader won't start the upload.
https://developer.mozilla.org/en-US/docs/Web/API/Blob/type

where the testcases

Nice Work, but i cant see any test case