ng2-file-upload

Progress Bar in ng2-file-upload in Angular 6

家住魔仙堡 提交于 2020-01-05 07:18:24
问题 Id like to create a progress bar to my file upload. The Upload I'm using is: https://www.npmjs.com/package/ng2-file-upload. app.component.html <div class="container-fluid"> <div class="row"> <div class="col-md-12"> <input type="file" name="myFile" ng2FileSelect [uploader]="uploader" /> </div> </div> <div class="row"> <div class="col-md-12"> <button type="button" class="btn btn-success btn-s" (click)="uploader.uploadAll()" [disabled]="!uploader.getNotUploadedItems().length"> Upload an Image <

ng2-file-upload doesn't trigger the controller method .net core web api

不问归期 提交于 2019-12-25 09:13:43
问题 The upload method doesn't trigger a controller method when Content-Type set to 'multipart/form-data'. If Content-Type set to 'application/json' method will triggered but file object will be null. Here is my client(angular 4) implementation: public uploader = new FileUploader({ url: "/api/mycontroller/uploadfile", allowedFileType: ["pdf"], headers: <Headers[]>[ //{ name: 'Content-Type', value: 'application/json' } { name: 'Content-Type', value: 'multipart/form-data' } ] }); save() { //... this

Multiple form-data file upload parameters

流过昼夜 提交于 2019-12-11 04:12:32
问题 I'd like to use the ng2-file-upload component on the client side and everything works so far but now I have to pass an additional parameter with every file that contains an identifier the file is attached to. I try to set the additionalParameter property of the FileUploader object in TypeScript: this.uploader.options.additionalParameter = {"issueId": result.data.id}; On the server I have the following method that is working except I don't get the additional parameter (issueId) set above. (

Files not uploading with ng2-file-upload

耗尽温柔 提交于 2019-12-11 01:23:03
问题 I'm trying to implement this library to upload images to a folder server: When I click on "upload" button the server returns inmediately to the listener this.uploader.onCompleteItem on my fileUpload.ts component: ImageUpload:uploaded: FileItem {url: "http://127.0.0.1:5000/api/uploadPhoto", headers: Array(0), withCredentials: false, formData: Array(0), isReady: false…}alias: "file"file: FileLikeObjectformData: Array(0)headers: Array(0)index: undefinedisCancel: falseisError: falseisReady:

How to return response with ng2-file-upload

房东的猫 提交于 2019-12-04 00:34:24
问题 I am using ng2-file-upload in angular 4. Is there any way to return custom data from server? How would we access it in ts file? 回答1: You should be using uploader onSuccessItem and onErrorItem callbacks: import { Component } from '@angular/core'; import {FileUploader, FileItem, ParsedResponseHeaders} from "ng2-file-upload"; @Component({ selector: 'upload-file', template: ` <input type="file" ng2FileSelect [uploader]="uploader"> `, }) export class UploadFileComponent { uploader:FileUploader;

How to return response with ng2-file-upload

人走茶凉 提交于 2019-12-01 03:26:57
I am using ng2-file-upload in angular 4. Is there any way to return custom data from server? How would we access it in ts file? You should be using uploader onSuccessItem and onErrorItem callbacks: import { Component } from '@angular/core'; import {FileUploader, FileItem, ParsedResponseHeaders} from "ng2-file-upload"; @Component({ selector: 'upload-file', template: ` <input type="file" ng2FileSelect [uploader]="uploader"> `, }) export class UploadFileComponent { uploader:FileUploader; ngOnInit(): void { this.uploader = new FileUploader({ url: 'http://url.to/upload', headers: [{name:'Accept',

Angular 2: Can't bind to 'uploader' since it isn't a known property of 'input'

◇◆丶佛笑我妖孽 提交于 2019-11-30 13:51:58
问题 Im trying to integrate ng2-file-upload module into my application. And im getting this template error: Can't bind to 'uploader' since it isn't a known property of 'input' UPDATE folder str: /src/app/app.module.ts /src/app/components/layout/ layout.module.ts other layout components files /category-items category-items.module.ts category-items.component.ts in layout.module.ts import { LayoutComponent } from './layout.component'; declarations: [ LayoutComponent, in category-items.module.ts