nishantmc / angular-material-fileupload Goto Github PK

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'

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?

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)

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'.

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.

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.

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)

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?

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.

Similar to: angular/angular#20575

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.

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.

It seems that there is no validation support to existing package.

Any chance are you going to add?

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">

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 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

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.

This looks cool and great job so far. I tried running npm i angular-material-fileupload
It installed fine but when i tried to compile it showed:

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"
}

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.

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.

the plugin is not at all working waste of time

I am getting this error when i try to upload a file. The Content-Type: multipart/form-data is set, but without boundary.

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.

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.

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

Hi, I have two isssues when I used it in html component:

and

Thanks a lot.

Bug

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"

OS

Windows 10 Pro

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
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

Hi Can you help with this ?

'mat-file-upload' is not a known element:

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.

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.

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:

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!

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

Maybe I missed it, but is there a callback function when a file has successfully uploaded?

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]

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?

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 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.

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.

Is there a way to make the upload start automatically as soon as it is added?

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",

It would be great to have an ability to pass not only custom HttpParams, but also custom FormData