nishantmc / angular-material-fileupload Goto Github PK
View Code? Open in Web Editor NEWA fileupload component based on angular-material design
License: MIT License
A fileupload component based on angular-material design
License: MIT License
The current labels for "Remove all", "Upload all" and the progress ("x% of y...") are hardcoded into the components. Please enable them to be parameterized, so we can translate/change them in our apps.
imports: [
CommonModule,
MainRoutingModule,
HttpClientModule,
FormsModule,
ReactiveFormsModule,
MatFormFieldModule,
MatInputModule,
MatSelectModule,
MatOptionModule,
MatButtonModule,
MatSnackBarModule,
MatSidenavModule,
MatProgressSpinnerModule,
MatTableModule,
MatPaginatorModule,
MatSortModule,
MatDialogModule,
// MatDatepickerModule,
// MatNativeDateModule,
// MatMomentDateModule,
MatIconModule,
OwlDateTimeModule,
// OwlNativeDateTimeModule,
OwlMomentDateTimeModule,
MatFileUploadModule
]
Upload file
<input id="singleFile" type="file" [fileUploadInputFor]= "fileUploadQueue"/>
<mat-file-upload-queue #fileUploadQueue
[fileAlias]="'file'"
[httpUrl]="'http://localhost:8180/jax-rs-jersey-application-sample'">
<mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index">
Maybe I missed it, but is there a callback function when a file has successfully uploaded?
I am using a pre-signed url and am wanting to put that into the httpUrl. I cannot get any of my variables to work with this.
[httpUrl]="'{{ signed_url }}'">
Also sorry I am a total noob and im sure this is a stupid question lol
I am getting this error when i try to upload a file. The Content-Type: multipart/form-data is set, but without boundary.
I'm trying to use the component in a small project, based on Angular 6 + Material
ng build produces:
ERROR in ./node_modules/angular-material-fileupload/matFileUpload.esm.js Module not found: Error: Can't resolve 'rxjs/observable/merge' in 'c:\...\node_modules\angular-material-fileupload' ERROR in ./node_modules/angular-material-fileupload/matFileUpload.esm.js Module not found: Error: Can't resolve 'rxjs/operators/startWith' in 'c:\...\node_modules\angular-material-fileupload'
NullInjectorError: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
NullInjectorError: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.get (core.js:778)
at resolveToken (core.js:2564)
at tryResolveToken (core.js:2490)
at StaticInjector.get (core.js:2353)
at resolveToken (core.js:2564)
at tryResolveToken (core.js:2490)
at StaticInjector.get (core.js:2353)
at resolveNgModuleDep (core.js:26403)
at NgModuleRef_.get (core.js:27491)
at resolveDep (core.js:28021)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:34182)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:469)
at invokeTask (zone-evergreen.js:1603)
My package.json file:
{
"name": "",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.1.2",
"@angular/cdk": "^8.1.1",
"@angular/common": "~8.1.2",
"@angular/compiler": "~8.1.2",
"@angular/core": "^8.1.2",
"@angular/forms": "~8.1.2",
"@angular/material": "^8.1.1",
"@angular/platform-browser": "~8.1.2",
"@angular/platform-browser-dynamic": "~8.1.2",
"@angular/router": "~8.1.2",
"angular-material-fileupload": "^2.0.0",
"core-js": "^2.5.4",
"rxjs": "~6.5.2",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.801.2",
"@angular/cli": "~8.1.2",
"@angular/compiler-cli": "~8.1.2",
"@angular/language-service": "~8.1.2",
"@types/node": "~8.9.4",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.4.5"
}
}
Please help me with this.
Hi
Your component works very well for unauthenticated back ends, but I need to send a token to my api. I see in matFileUpload.component.ts that headers is commented out. Is there a reason for this? Maybe there's a work around?
I tried to fork and build but that's too hard for me - too many errors :/
Cheers
Similar to: angular/angular#20575
When i import MatFileUploadModule
and npm start
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'. node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
how can i fix it?
After including this library in my project and launching ng build or ng serve, I got these errors:
ERROR in ./node_modules/angular-material-fileupload/matFileUpload.esm.js
Module not found: Error: Can't resolve 'rxjs/observable/merge' in 'C:\myprojectt\node_modules\angular-material-fileupload'
ERROR in ./node_modules/angular-material-fileupload/matFileUpload.esm.js
Module not found: Error: Can't resolve 'rxjs/operators/startWith' in 'C:\myproject\node_modules\angular-material-fileupload'
I think this is due to your project referencing an outdated version of rxjs. In my project I'm using 6.2.1 which is the latest and it is compatible with Angular 6.
I got the below error message while making build using --prod. It's working for me in dev mode.
ERROR in ../angular-material-fileupload/matFileUpload.module.ts(13,2): Error during template compile of 'MatFileUploadModule'
Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'NgModule'
'NgModule' calls 'ɵmakeDecorator'.
node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/linker/query_list.d.ts(36,22): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/application_init.d.ts(26,21): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/ivy_switch.d.ts(8,54): error TS1254: A 'const' initializer in an ambient context must be a string or numeric literal.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/ivy_switch.d.ts(9,35): error TS1254: A 'const' initializer in an ambient context must be a string or numeric literal.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-material-fileupload/node_modules/@angular/common/http/src/response.d.ts(253,21): error TS1039: Initializers are not allowed in ambient contexts.
node_modules/angular-material-fileupload/node_modules/@angular/common/http/src/response.d.ts(259,19): error TS1039: Initializers are not allowed in ambient contexts.
Kindly resolve this ASAP. Thanks in advance!
Hi
I get this error with the latest version (v2.0.0) when I follow the exact steps mentioned on the doc:
FilingUploadDialogComponent.html:2 ERROR Error: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.push../node_modules/@angular/core/fesm5/core.js.NullInjector.get (core.js:8894)
at resolveToken (core.js:9139)
at tryResolveToken (core.js:9083)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
at resolveToken (core.js:9139)
at tryResolveToken (core.js:9083)
at StaticInjector.push../node_modules/@angular/core/fesm5/core.js.StaticInjector.get (core.js:8980)
at resolveNgModuleDep (core.js:21119)
at NgModuleRef_.push../node_modules/@angular/core/fesm5/core.js.NgModuleRef_.get (core.js:21808)
at resolveDep (core.js:22179)
I'm using:
"@angular/cdk": "6.1.0",
"@angular/common": "^7.2.4",
"@angular/compiler": "^7.2.4",
"@angular/core": "^7.2.4",
"@angular/forms": "^7.2.4",
"@angular/http": "^7.2.4",
"@angular/material": "6.1.0",
"@angular/platform-browser": "^7.2.4",
"@ngrx/core": "^1.2.0",
"@ngrx/effects": "^6.0.1",
"@ngrx/router-store": "^6.0.1",
"angular-material-fileupload": "^2.0.0",
Does this work with angular 5.2.0 ? when I am trying to install in my project and try to use it i get foloowing error -
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
Is there a way to make the upload start automatically as soon as it is added?
It should be error
, not event
used in error handler. Because of that, there is exception in console, and event is not sent when http status is different than 2xx.
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
Using this module with angular >= 7.1.4 breaks compilation and does not work.
All you have to do is insert this line in app.module.ts and it breaks.
import { MatFileUploadModule } from 'angular-material-fileupload';
I get the following error doing a prod build - but it works fine in dev mode.
ERROR in : Unexpected value 'MatFileUploadModule in C:/dev/blah/src/blah/node_modules/angular-material-fileupload/matFileUpload.module.d.ts' imported by the module 'DesignModule in C:/dev/blah/src/blah/src/app/design/design.module.ts'. Please add a @NgModule annotation.
Latest version of fileupload and Angular 5.
I have an existing file service for doing uploads. This component works fine with my API, but it would be cool if I could instead use my own service.
Again, I'll see if I can do this and PR.
How can I get the files selected. I watched exist a EventEmitter called onFileSelected but How can I used to obtain the list of files selected previous upload?
the plugin is not at all working waste of time
I installed this module usig below command
npm i angular-material-fileupload
After that when i try to restart my server using ng serve
i got this error
ERROR in Failed to find exported name of node (MatIconModule = /** @class */ (function () {
function MatIconModule() {
}
MatIconModule.decorators = [
{ type: NgModule, args: [{
imports: [MatCommonModule],
exports: [MatIcon, MatCommonModule],
declarations: [MatIcon],
},] },
];
return MatIconModule;
}())) in 'E:/midhun-projects/trinity-angular/node_modules/angular-material-fileupload/matFileUpload.esm.js'.
My ng --vserion
info
_ _ ____ _ ___
/ \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _|
/ △ \ | '_ \ / _` | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ \_\_| |_|\__, |\__,_|_|\__,_|_| \____|_____|___|
|___/
Angular CLI: 9.0.1
Node: 12.13.0
OS: win32 x64
Angular: 9.0.0
... animations, cdk, common, compiler, compiler-cli, core, forms
... language-service, material, material-moment-adapter
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.900.1
@angular-devkit/build-angular 0.900.1
@angular-devkit/build-optimizer 0.900.1
@angular-devkit/build-webpack 0.900.1
@angular-devkit/core 9.0.1
@angular-devkit/schematics 9.0.1
@angular/cli 9.0.1
@angular/flex-layout 9.0.0-beta.29
@ngtools/webpack 9.0.1
@schematics/angular 9.0.1
@schematics/update 0.900.1
rxjs 6.5.4
typescript 3.7.5
webpack 4.41.2
I installed angular-material-fileupload using
npm install angular-material-fileupload
and imported MatFileUploadModule into my Angular 6 application. Eventually I ended up with a bunch of compile errors:
ERROR in node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(14,44): error TS1005: ';' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(14,174): error TS1005: '(' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(15,5): error TS1128: Declaration or statement expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(18,16): error TS1005: ']' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(18,24): error TS1005: ',' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(18,25): error TS1136: Property assignment expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(18,34): error TS1005: ':' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(18,44): error TS1005: ',' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(21,15): error TS1005: ']' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(21,23): error TS1005: ',' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(21,24): error TS1136: Property assignment expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(21,33): error TS1005: ':' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(21,43): error TS1005: ',' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(24,22): error TS1005: ';' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(24,28): error TS1109: Expression expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(25,5): error TS1128: Declaration or statement expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(26,13): error TS1005: ',' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(26,19): error TS1005: ';' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(26,25): error TS1109: Expression expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(27,16): error TS1005: ';' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(27,22): error TS1109: Expression expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(28,16): error TS1005: ';' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(28,22): error TS1109: Expression expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(29,18): error TS1005: ';' expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(29,24): error TS1109: Expression expected. node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts(30,1): error TS1128: Declaration or statement expected.
The file node_modules/angular-material-fileupload/matFileUploadQueue/matFileUploadQueue.component.d.ts contains these line:
private _changeSubscription; /** Combined stream of all of the file upload remove change events. */ readonly fileUploadRemoveEvents: import("../../../../../../../Users/nchitham/workspace/angular-material-fileupload/node_modules/rxjs/internal/Observable").Observable<{}>; private files;
I think something went wrong here.
This file comes from registry.npmjs.org; direct link to the archive: https://registry.npmjs.org/angular-material-fileupload/-/angular-material-fileupload-1.0.0.tgz
It seems that there is no validation support to existing package.
Any chance are you going to add?
HTML:
<input id="singleFile" type="file" [fileUploadInputFor]= "fileUploadQueue"/>
<mat-file-upload-queue #fileUploadQueue
[fileAlias]="'file'"
[httpUrl]="'http://localhost:8080/api'">-->
<mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index">
This is working fine in Chrome but when I try this in IE 11 the upload icon and Upload All button both throw error:
ERROR TypeError: Object doesn't support property or method 'set'
ERROR CONTEXT [object Object]
ERROR in node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/container.d.ts(35,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/container.d.ts(40,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/container.d.ts(45,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/container.d.ts(50,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/container.d.ts(58,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/container.d.ts(79,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(50,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(56,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(66,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(68,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(70,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(79,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(87,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(94,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(103,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(109,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(111,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(113,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(115,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(122,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(131,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/interfaces/view.d.ts(137,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/render3/ng_dev_mode.d.ts(9,11): error TS2451: Cannot redeclare block-scoped variable 'ngDevMode'.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/sanitization/bypass.d.ts(23,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/sanitization/bypass.d.ts(31,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/sanitization/bypass.d.ts(39,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/sanitization/bypass.d.ts(47,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/sanitization/bypass.d.ts(55,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
node_modules/angular-material-fileupload/node_modules/@angular/core/src/sanitization/bypass.d.ts(63,5): error TS1169: A computed property name in an interface must directly refer to a built-in symbol.
Hi!
Great package, but I've got this issue running your example code. The 'fileUploadInputFor' on the element gives me that error. I'm running on
"@angular/animations": "^5.2.0", "@angular/cdk": "^5.2.4", "@angular/common": "^5.2.0", "@angular/compiler": "^5.2.0", "@angular/core": "^5.2.0", "@angular/forms": "^5.2.0", "@angular/http": "^5.2.0", "@angular/material": "^5.2.4", "@angular/platform-browser": "^5.2.0", "@angular/platform-browser-dynamic": "^5.2.0", "@angular/router": "^5.2.0", "angular-material-fileupload": "0.0.8", "core-js": "^2.4.1", "rxjs": "^5.5.6", "zone.js": "^0.8.19"
...and I imported the Modules
imports: [ BrowserModule, HttpClientModule, FormsModule, BrowserAnimationsModule, MaterialModule, MatFileUploadModule ],
(MaterialModule) is another export of all MaterialDesign modules.
Detailed error:
OrdersComponent.html:22 ERROR Error: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.get (core.js:1002)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1242)
at StaticInjector.get (core.js:1110)
at resolveToken (core.js:1300)
at tryResolveToken (core.js:1242)
at StaticInjector.get (core.js:1110)
at resolveNgModuleDep (core.js:10854)
at NgModuleRef.get (core.js:12087)
at resolveDep (core.js:12577)
Hi Can you help with this ?
'mat-file-upload' is not a known element:
I have found that using this component inside a parent-component that has an EventEmitter Output named submit, click the "Upload All" button fires this Event Emitter, possibly causing unexpected consequences for the application.
After updating to Angular 8.0.0 I have the following issue:
[1] ERROR in ./node_modules/angular-material-fileupload/matFileUpload.esm.js 15938:26-36
[1] "export 'DOCUMENT' (imported as 'DOCUMENT$1') was not found in '@angular/platform-browser'
The reason for this is that the DOCUMENT token has been removed from angular/platform-browser (angular/angular#28117). I tried to import DOCUMENT from angular/common, but without luck.
Is there a workaround or an idea by when this is fixed?
In the console:
[object Error]: {description: "Object doesn't support property or method 'set'", message: "Object doesn't support property or method 'set'", ngDebugContext: Object, ngErrorLogger: function() { [native code] }, number: -2146827850...}
Microsoft Edge 42.17134.1.0
HTML code:
<input id="singleFile" type="file" [fileUploadInputFor]= "fileUploadQueue"/> <mat-file-upload-queue #fileUploadQueue [fileAlias]="'file'" [httpUrl]="'http://localhost:8180/jax-rs-jersey-application-sample'"> <mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index"></mat-file-upload> </mat-file-upload-queue>
IE 11 it looks like below:
Chrome it looks like below:
index.html:37 Error: Unexpected token <
Evaluating http://localhost:56526/angular-material-fileupload
Evaluating http://localhost:56526/app/app.module.js
Evaluating http://localhost:56526/app/main.js
Loading app
at eval ()
at evaluate (evaluate.js:106)
at instantiate.js:394
at dynamicExecute (register-loader.js:665)
at doEvaluate (register-loader.js:612)
at ensureEvaluate (register-loader.js:520)
at register-loader.js:538
at Object.eval (app.module.ts:18)
at eval (app.module.ts:374)
at eval (app.module.ts:374)
below is my package.json
{
"name": "angular2-registration-login-example",
"version": "1.0.0",
"repository": {
"type": "git",
"url": "https://github.com/cornflourblue/angular2-registration-login-example.git"
},
"scripts": {
"start": "tsc && concurrently "npm run tsc:w" "npm run lite" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"module": "./esm5/service-worker.js",
"es2015": "./esm2015/service-worker.js",
"typings": "./service-worker.d.ts",
"license": "MIT",
"dependencies": {
"@angular/animations": "6.1.7",
"@angular/cdk": "^6.4.7",
"@angular/cli": "^6.2.1",
"@angular/common": "6.1.7",
"@angular/compiler": "6.1.7",
"@angular/core": "6.1.7",
"@angular/forms": "6.1.7",
"@angular/material": "6.4.7",
"@angular/platform-browser": "6.1.7",
"@angular/platform-browser-dynamic": "6.1.7",
"@angular/router": "6.1.7",
"angular-material-fileupload": "^1.0.1",
"babel-core": "^6.26.3",
"core-js": "^2.5.7",
"hammerjs": "^2.0.8",
"jquery": "^3.0.1",
"moment": "^2.22.2",
"ng2-bs3-modal": "^0.13.0",
"ng2-file-upload": "^1.3.0",
"rxjs": "^6.3.2",
"rxjs-compat": "^6.3.2",
"systemjs": "^0.20.19",
"systemjs-plugin-babel": "0.0.25",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@types/node": "^8.0.53",
"concurrently": "^3.1.0",
"lite-server": "^2.4.0",
"node-sass": "^4.9.3",
"raw-loader": "^0.5.1",
"sass-loader": "^7.0.3",
"typescript": "^2.6.1",
"babel-loader": "^7.1.5",
"babel-preset-es2015": "^6.24.1"
},
"angularCompilerOptions": {
"skipTemplateCodegen": true,
"skipMetadataEmit": false,
"strictMetadataEmit": true,
"annotationsAs": "decorators",
"noImplicitAny": false
}
}
I have this error after adding angular-material-fileupload to my app. Funny thing is I cannot reproduce this error in https://stackblitz.com/edit/angular-materia-file-upload. But I don't think this is fault of my error in my code cause error is pointing to matFileUpload.esm.js.MergeMapOperator and I don't use this one.
"dependencies": {
"@angular/animations": "^7.0.3",
"@angular/cdk": "^7.0.2",
"@angular/common": "^7.0.3",
"@angular/compiler": "^7.0.3",
"@angular/core": "^7.0.3",
"@angular/forms": "^7.0.3",
"@angular/http": "^7.0.3",
"@angular/material": "^7.0.2",
"@angular/platform-browser": "^7.0.3",
"@angular/platform-browser-dynamic": "^7.0.3",
"@angular/router": "^7.0.3",
"@fortawesome/angular-fontawesome": "^0.3.0",
"@fortawesome/fontawesome-free": "^5.5.0",
"@fortawesome/fontawesome-svg-core": "^1.2.8",
"@fortawesome/free-brands-svg-icons": "^5.5.0",
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"@ngrx/effects": "^7.0.0-beta.0",
"@ngrx/entity": "^7.0.0-beta.0",
"@ngrx/router-store": "^7.0.0-beta.0",
"@ngrx/store": "^7.0.0-beta.0",
"@ngrx/store-devtools": "^7.0.0-beta.0",
"@ngx-translate/core": "^11.0.0",
"@ngx-translate/http-loader": "^4.0.0",
"angular-material-fileupload": "^2.0.0",
"bootstrap": "^4.1.3",
"browser-detect": "^0.2.28",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"ngx-pipes": "^2.3.10",
"rxjs": "^6.3.3",
"uuid": "^3.3.2",
"web-animations-js": "^2.2.5",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "^0.13.2",
"@angular-extensions/testing-library": "^3.0.3",
"@angular/cli": "^7.0.4",
"@angular/compiler-cli": "^7.0.3",
"@angular/language-service": "^7.0.3",
"@commitlint/cli": "^7.2.1",
"@commitlint/config-conventional": "^7.1.2",
"@compodoc/compodoc": "^1.1.7",
"@types/jasmine": "~3.3.9",
"@types/jasminewd2": "^2.0.5",
"@types/node": "^11.9.4",
"all-contributors-cli": "^6.1.1",
"codelyzer": "~4.5.0",
"express": "^4.16.4",
"husky": "~1.1.3",
"jasmine-core": "~3.3.0",
"jasmine-marbles": "^0.4.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.0.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.4",
"karma-jasmine": "~2.0.1",
"karma-jasmine-html-reporter": "~1.4.0",
"karma-spec-reporter": "~0.0.32",
"lint-staged": "^8.1.4",
"ngrx-store-freeze": "^0.2.4",
"npm-run-all": "^4.1.5",
"pa11y-ci": "^2.1.1",
"prettier": "^1.14.3",
"protractor": "^5.4.1",
"puppeteer": "^1.9.0",
"rimraf": "^2.6.2",
"standard-version": "5.0.0",
"ts-node": "~8.0.2",
"tslint": "~5.12.1",
"typescript": "~3.2.4",
"webpack-bundle-analyzer": "^3.0.3"
}
core.js:6014 ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
NullInjectorError: StaticInjectorError(AppModule)[FileUploadInputFor -> ElementRef]:
StaticInjectorError(Platform: core)[FileUploadInputFor -> ElementRef]:
NullInjectorError: No provider for ElementRef!
at NullInjector.get (core.js:855)
at resolveToken (core.js:17513)
at tryResolveToken (core.js:17439)
at StaticInjector.get (core.js:17265)
at resolveToken (core.js:17513)
at tryResolveToken (core.js:17439)
at StaticInjector.get (core.js:17265)
at resolveNgModuleDep (core.js:30392)
at NgModuleRef_.get (core.js:31577)
at resolveDep (core.js:32142)
at resolvePromise (zone-evergreen.js:797)
at resolvePromise (zone-evergreen.js:754)
at zone-evergreen.js:858
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (core.js:39679)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at drainMicroTaskQueue (zone-evergreen.js:559)
the component works fine.. but when trying to build a production release i got the following error:
ERROR in : Unexpected value 'MatFileUploadModule in [MyProject]/node_modules/angular-material-fileupload/matFileUpload.module.d.ts' imported by the module 'AppModule in [MyProject]/src/app/app.module.ts'. Please add a @NgModule annotation.
Hi , Getting below error while upload the file.
StaticInjectorError(AppModule)[MatFileUpload -> MatFileUploadQueue]:
StaticInjectorError(Platform: core)[MatFileUpload -> MatFileUploadQueue]:
NullInjectorError: No provider for MatFileUploadQueue!
My package.json is:
{
"name": "ace",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "~7.2.0",
"@angular/cdk": "~7.3.3",
"@angular/common": "~7.2.0",
"@angular/compiler": "~7.2.0",
"@angular/core": "~7.2.0",
"@angular/flex-layout": "^7.0.0-beta.23",
"@angular/forms": "~7.2.0",
"@angular/material": "^7.3.3",
"@angular/platform-browser": "~7.2.0",
"@angular/platform-browser-dynamic": "~7.2.0",
"@angular/router": "~7.2.0",
"angular-material-fileupload": "^2.0.0",
"core-js": "^2.5.4",
"hammerjs": "^2.0.8",
"ngx-infinite-scroll": "^7.1.0",
"rxjs": "~6.3.3",
"rxjs-compat": "^6.4.0",
"time-ago-pipe": "^1.3.2",
"tslib": "^1.9.0",
"zone.js": "~0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.12.0",
"@angular-devkit/build-ng-packagr": "~0.12.0",
"@angular/cli": "~7.2.3",
"@angular/compiler-cli": "~7.2.0",
"@angular/language-service": "~7.2.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"@types/node": "~8.9.4",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"ng-packagr": "^4.2.0",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tsickle": ">=0.34.0",
"tslib": "^1.9.0",
"tslint": "~5.11.0",
"typescript": "~3.2.2"
}
}
Can some one please suggest what I am missing here.
It would be great if there was a way to verify the file size and type after dopping them. I guess this just needs and event handler on the queue?
I'll see if I can fork and make a PR.
I've been trying to figure out how and where an uploaded file goes, but I can only manage to get a 404 for the path I create.
The HTML side of things is basically unchanged, save for changing the [httpURL] value.
<label for="singleFile">Upload file:</label>
<input class='file-upload' id="singleFile" type="file" [fileUploadInputFor]="fileUploadQueue" />
<br>
<mat-file-upload-queue #fileUploadQueue [fileAlias]="'file'" [httpUrl]="'http://localhost:4200/sample'">
<mat-file-upload [file]="file" [id]="i" *ngFor="let file of fileUploadQueue.files; let i = index"></mat-file-upload>
</mat-file-upload-queue>
Here's what I get after I upload a file:
POST http://localhost:4200/sample 404 (Not Found)
| scheduleTask | @ | zone.js:2935
-- | -- | -- | --
| ZoneDelegate.scheduleTask | @ | zone.js:407
| onScheduleTask | @ | zone.js:297
| ZoneDelegate.scheduleTask | @ | zone.js:401
| Zone.scheduleTask | @ | zone.js:232
| Zone.scheduleMacroTask | @ | zone.js:255
| scheduleMacroTaskWithCurrentZone | @ | zone.js:1092
| (anonymous) | @ | zone.js:2967
| proto.(anonymous function) | @ | zone.js:1372
| (anonymous) | @ | http.js:2366
| Observable._trySubscribe | @ | Observable.js:172
| Observable.subscribe | @ | Observable.js:160
| subscribeToResult | @ | subscribeToResult.js:23
| MergeMapSubscriber._innerSub | @ | mergeMap.js:138
| MergeMapSubscriber._tryNext | @ | mergeMap.js:135
| MergeMapSubscriber._next | @ | mergeMap.js:118
| Subscriber.next | @ | Subscriber.js:92
| ScalarObservable._subscribe | @ | ScalarObservable.js:51
| Observable._trySubscribe | @ | Observable.js:172
| Observable.subscribe | @ | Observable.js:160
| MergeMapOperator.call | @ | mergeMap.js:92
| Observable.subscribe | @ | Observable.js:157
| MatFileUpload.upload | @ | matFileUpload.esm.js:150
| (anonymous) | @ | matFileUpload.esm.js:57
| QueryList.forEach | @ | core.js:6394
| MatFileUploadQueue.uploadAll | @ | matFileUpload.esm.js:57
| (anonymous) | @ | MatFileUploadQueue.html:3
| handleEvent | @ | core.js:13547
| callWithDebugContext | @ | core.js:15056
| debugHandleEvent | @ | core.js:14643
| dispatchEvent | @ | core.js:9962
| (anonymous) | @ | core.js:10587
| (anonymous) | @ | platform-browser.js:2628
| ZoneDelegate.invokeTask | @ | zone.js:421
| onInvokeTask | @ | core.js:4740
| ZoneDelegate.invokeTask | @ | zone.js:420
| Zone.runTask | @ | zone.js:188
| ZoneTask.invokeTask | @ | zone.js:496
| invokeTask | @ | zone.js:1517
| globalZoneAwareCallback | @ | zone.js:1543
Any clarification on this would be greatly appreciated.
It would be great to have an ability to pass not only custom HttpParams, but also custom FormData
There is error when I include this in the project.
angular-material-fileupload : version 0.0.9
ERROR in
/angular-material-fileupload/matFileUpload.esm.js
Module not found: Error: Can't resolve 'rxjs/operators/startWith' in 'D:\Code........\node_modules\angular-material-fileupload'
@ ./~/angular-material-fileupload/matFileUpload.esm.js 4:0-68
@ ./ClientApp/app/shared.module.ts
@ ./ClientApp/app/bankdata/bank-data.module.ts
@ ./ClientApp/app/app.module.ts
@ ./ClientApp/app/main.ts
##Versions
"@angular/animations": "~4.4.5",
"@angular/cdk": "2.0.0-beta.12",
"@angular/common": "~4.4.5",
"@angular/compiler": "~4.4.5",
"@angular/core": "~4.4.5",
"@angular/material": "2.0.0-beta.12"
Windows 10 Pro
It's not obvious from a UX standpoint when an upload "completes". Right now, the queue stays there until you delete the file you just uploaded, which negates the purpose of having an upload function in the first place.
Allow upload to page without having to upload to an external website or server.
I just need the component to load on the page and the page will extract the csv/excel data using a js library.
Hello
Thank you for your excellent library.
My server returns some data to the client after the file uploaded. Can I access the response using this library? The uploaded event doesn't give me the final answer.
Thank you in advance.
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.