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
0
votes
0 answers

how can i integrate ng2-file-upload in for data with body in Angular14

i want to now how can i intgrate ng2-file-upload with form data using Nestjs And Angular , I'm new in Angular i want to upload file with formdata uploader: FileUploader = new FileUploader({ url: URL }); this.form = new FormGroup({ Nom:…
syrine
  • 1
0
votes
1 answer

How to get error logs in NPM ng2-file-upload in Angular 5?

I am using npm ng2-file-upload package to upload an image file to S3. I am using onErrorItem hook to know if any error, and I am getting item.isError as true, this.uploader.onErrorItem = ((item, response, status, headers): any => { // response="";…
Rahul Chouhan
  • 109
  • 7
0
votes
1 answer

Angular Ng2-file-Upload Upload.all() not uploading file to API

Am trying to Upload Files mp4 and jpg extensions, I have 2 separate Fileuploader instance, with some custom validation imposed on 2 separate FileUploader, I have a upload button, onclick of the upload button am pushing Files in 2 FileUploader to a…
balajivaishnav
  • 2,795
  • 4
  • 23
  • 38
0
votes
1 answer

how to submit input data along with ng2 file upload angular ionic

Please I want to send some text data with file upload(ng2 file upload) in angular ionic. I am new to angular and ionic as well. I have tried so many options but I don't seem to get a way out. I am using Php as a backend.I am able to send the file…
brain johnson
  • 1
  • 1
  • 4
0
votes
0 answers

ng2 file upload - send file and form at the same time

I got simple form like:
JF.rad
  • 7
  • 4
0
votes
2 answers

How can I send additional parameters via ng2-file-upload when I upload a file

I have created two selects and want to send their values as parameters to the backend during upload. Do you know how to do that? Can you help me please? My Code: // Select Forms // Month form this.sendMonthsForm = this.fb.group({ …
user10114552
0
votes
2 answers

How to upload photo (ng2-file-upload) Angular cannot read property 'push' of undefined

I'm trying to upload new photo for Recipe, and this is kind of working. Photo is uploading but i have an error in console and to see new photo i have to refresh browser. I'm using asp.net core as model and controller and angular as a view How to…
user12465572
0
votes
2 answers

Creating an Observable that binds to an existing function

I've been trying to bind the onCompleteItem array function from the ng2-file-upload package to an RxJS Observable method that I can subscribe to. Here is function I'm talking about: onCompleteItem(item: FileItem, response: string, status: number,…
LatentDenis
  • 2,839
  • 12
  • 48
  • 99
0
votes
2 answers

Angular ng2-file-upload Input File Filter not working for PNG in Internet Explorer

I am using the file uploader from ng2-file-upload with filetype restriction. However everytime i choose a png file with the Internet Explorer 11, it is not added into the queue. All the other allowed filetypes are working. Here is the code with the…
mahpgnaohhnim
  • 63
  • 1
  • 8
0
votes
1 answer

ng2-file-upload doesn't work when I do not have office installed

I tested the ng2-file-upload on my vm without any office installed, and I am trying to upload a file with a file type of .doc & .docx and it keeps me going to this condition -> this.uploader.onWhenAddingFileFailed = (item, filter, options) => { } is…
Raniel Quirante
  • 315
  • 2
  • 15
0
votes
3 answers

How to display image thumbnail using angular image upload

I am using ng2-file-upload to upload the image. Everything works well but after i choose image, it'll display selected image thumbnail. Please review my stackblitz Link Thanks in Advance
kumara
  • 877
  • 4
  • 19
  • 43
0
votes
2 answers

How to appropriately change the filename for ng2-file-uploader in angular

I want to change the name of my image in angular via the ng2-file-uploader and then pass it to my multer in my node.js. Everything is working fine. I am able to receive the image and it is being stored in my upload directory on server side. It is…
Steven Anderson
  • 147
  • 12
0
votes
1 answer

How to set `minimum` file size for upload

I am using ng2-file-upload for file upload requirement with my angular application. in this directive i can able to set the maxFileSize - but the thing is, there is a way to upload just empty file. so i am looking for a solution to prevent the empty…
user2024080
  • 1
  • 14
  • 56
  • 96
0
votes
1 answer

How do I use ng2-file-upload with devise token auth?

I am currently trying to use the ng2-file-upload along with devise token auth.: https://devise-token-auth.gitbook.io/devise-token-auth/conceptual. File uploader currently handles the http request directly and hence, I did not use with angular token…
Venomoustoad
  • 1,203
  • 1
  • 14
  • 38
0
votes
1 answer

Angular 6 ng2-file-upload send list with file

I have this piece of code in my Angular project and have used ng2-file-upload for uploading images. export class Product { id: string; name: string; imageUrl: string; productCategoryId: string; shopId: string; …
amin mohammadi
  • 901
  • 2
  • 15
  • 33
1 2 3 4
5
6 7