Stack Overflow
Stack Overflow

Questions tagged [ng2-file-upload]

Easy to use Angular2 directives for files.

Quick start

  1. A recommended way to install ng2-file-upload is through npm package manager using the following command:

    npm i ng2-file-upload --save

    Alternatively, you can download it in a ZIP file.

  2. Currently, ng2-file-upload contains two directives: ng2-file-select and ng2-file-drop. ng2-file-select is used for 'file-input' field of form and ng2-file-drop is used for area that will be used for dropping of file or files.

  3. More information regarding using of ng2-file-upload is located in demo and demo sources.

API for ng2FileDrop

Properties

uploader - (FileUploader) - uploader object. See using in demo

Parameters supported by this object:

  • url - URL of File Uploader's route authToken
  • Auth token that will be applied as 'Authorization' header during file send.

  • disableMultipart - If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.

  • itemAlias - item alias (form name redefenition) formatDataFunction - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.

  • formatDataFunctionIsAsync - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.

  • parametersBeforeFiles - States if additional parameters should be appended before or after the file. Defaults to false.

Events

  • fileOver - it fires during 'over' and 'out' events for Drop Area; returns boolean: true if file is over Drop Area, false in case of out. See using in ts demo and html demo

  • onFileDrop - it fires after a file has been dropped on a Drop Area; you can pass in $event to get the list of files that were dropped. i.e. (onFileDrop)="dropped($event)"

GitHub Link: https://github.com/valor-software/ng2-file-upload

104 questions
2
votes
0 answers

File Uploader specific to object inside *ngFor Angular

I have a discussion forum webapp. Where user POSTS a question. I am using ng2-file-upload. As my Discussion Forum lists down using *ngFor loop, each discussion have a "comment" input box in which they can upload the image ad well. As image is…
shahakshay94
  • 145
  • 1
  • 2
  • 13
2
votes
0 answers

Files not uploading with ng2-file-upload

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:…
Hanzo
  • 1,839
  • 4
  • 30
  • 51
2
votes
1 answer

ng2-file-upload ASP.NET Core MVC - Chunk Upload Progress

I'm using the ng2-file-upload package hitting an ASP.NET Core backend. https://github.com/valor-software/ng2-file-upload Using the base example, trying to test a large file upload ~50MB. The file eventually uploads, but no progress/chunk action is…
aherrick
  • 19,799
  • 33
  • 112
  • 188
1
vote
1 answer

ng2-file-upload@3.0.0 not working after update Angular 13 to Angular 14

I migrated Angular 13 to Angular 14, and I was forced to update ng2-file-upload library to version 3.0.0 For some reason, I got this error now when uploading a file: Error: Unexpected value of the `Content-Length` header provided. Expecting either a…
Danilo Bassi
  • 119
  • 1
  • 1
  • 9
1
vote
0 answers

How to change or configure the request timeout interval in ng2-file-upload angular 8

We have an application where backend api takes more than 2 min to send the response. So I would like to increase the time out interval for file upload request using ng2-file-upload.
Poojitha G
  • 11
  • 2
1
vote
1 answer

ng2-file-upload, new FileUpload() does not create new instance for an additional component, when looping with *ngFor

I have multiple formats, which i loop over (with ngFor) to create new components. Every component has the ng2-file-upload implemented via the constructor (new FileUploader()). However, if I add a new file and display it, it is also added/displayed…
connectedMind
  • 421
  • 4
  • 17
1
vote
1 answer

Asynchronous upload File with ng2-file-upload

I am using the ng2-file-upload module to upload large files. The upload is done with a backend coded in java Since the import of those files takes quite a long time, the http connection created between frontend and backend makes the nginx server…
rCod
  • 11
  • 2
1
vote
0 answers

IE 11 ng2 File upload issue in angular 6

I have written code for file upload using ng2file upload in angular6. Able to upload multiple files successfully in firefox, chrome and edge but not working for IE11. onSelectedFile() event is triggering twice in Ie11. I have tried below code: …
Vinay Reddy
  • 11
  • 2
1
vote
0 answers

ng2-file-upload single request clearQueue() not working

The uploader multiple files in one request so customized file uploads after getting a response using clearQueue() not working get single file only removed core.js:3926 ERROR TypeError: Cannot read property 'abort' of undefined at…
sridharan
  • 2,011
  • 10
  • 36
  • 61
1
vote
1 answer

Not able to upload `.flv` - file(s) with ng2-file-upload

Here is my mime types: allowedMimeType = [ 'image/jpeg', 'video/x-msvideo', 'application/x-troff-msvideo', 'video/avi', 'video/msvideo', 'video/x-msvideo', 'application/x-shockwave-flash', …
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
1
vote
0 answers

Problem uploading an image on the cloudinary using ng2-file-upload

Im uploading the photo with angular to the backend(Core 2.2), but I'm having an error.When I select photo and when I click upload, this is what i get: Photo 1 And I dont know why i get : POST http://localhost:4200/undefinedusers/4/photos It…
nikola niki
  • 11
  • 2
1
vote
1 answer

ng2-file-upload: How to change the form-data name for file upload

I am currently using this code for file upload (Angular 2+): upload() { let inputEl: HTMLInputElement = this.inputEl.nativeElement; let fileCount: number = inputEl.files.length; let formData = new FormData(); if (fileCount > 0) { // a file…
TommyF
  • 381
  • 1
  • 7
  • 22
1
vote
1 answer

Customizing ng2-file-upload

I am trying to customize default ng2-file-upload, but it's not coming well as per requirement. Can any one help me out. Requirement HTML
Felix Christo
  • 301
  • 1
  • 3
  • 19
1
vote
1 answer

How to display previously uploaded files using ng2-file-upload

I'm using ng2-file-upload, the files get uploaded properly but I want to display previously uploaded files as well, I have called an API and stored all the previously uploaded files in an array in the component but how to display that on HTML…
Angular
  • 161
  • 1
  • 4
  • 17
1
vote
1 answer

Upload images into a file server and store the url to the image using nodejs

I am implementing a web app using MEAN Stack and Angular 6. There I want to submit a form with file upload. '.png' files should be uploaded. I want to save the file in a different file server and send the url to the image.Currently I upload files…
RMD
  • 311
  • 1
  • 7
  • 22
1 2
3
4 5 6 7