bleenco / ngx-uploader Goto Github PK
View Code? Open in Web Editor NEWAngular File Uploader
Home Page: https://ngx-uploader.jankuri.me
License: MIT License
Angular File Uploader
Home Page: https://ngx-uploader.jankuri.me
License: MIT License
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?
For every Angular release it is breaking up(dependencies) , if possible can we reduce delay
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);
}
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
Most of the issues here (autoupload, cancel, extensions,...) are already supported through the options field, so what about actually documenting those features? :)
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
Thanks
C
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
I use the ionic2
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 there any css file or something that shows uploader as it is in demo page?
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\"}]}"
}
]
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')。
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
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?
Nice Work, but i cant see any test case
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 :)
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
Hi
Wondering how can we get started on client side s3 upload? How do you think we should go about extending it?
Cheers
Pratik
Property 'findIndex' does not exist on type 'any[]'.
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
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?
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
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.
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
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;
}
}
}
I want to upload an image with 74 x 74 size.
It's nice to change the color of drop area, for example.
sorry . it's my problem. ignore it
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)) + '%';
}
}
$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.
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.
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.
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?
make.js
script should also provide bundle that is not dependant on SystemJS loader.
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.
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.
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
this happens when I try to include the drag and drop version from the demo
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.
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
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
Is it possible?
Does it support functionality to show thumbnail of the image right after dropping/uploading it?
If not, any plans to implement it soon?
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!
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...
Does ng2-uploader needs a back-end api? I need it to upload and later download pdf files.
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.
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.