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

ng2 fileupload is not working in angular7?

I have an angular8 app in which i want to send file on server.I am using ng2-file-upload. Here is my component.ts import { FileUploader, FileLikeObject } from 'ng2-file-upload'; const URL = `${environment.api_base_url}/files`; public uploader:…
ahsan
  • 277
  • 1
  • 5
  • 18
2
votes
1 answer

How to reset file input form after uploading the image in Angular?

We have 2 issues connected with selecting files and uploading it. The first issue is that when you upload an image the file name is still staying in the input. Here is the code. OnFileSelected(event) { const file: File = event[0]; …
user8978302
2
votes
1 answer

How to get file name instead of path with ngModel and ng2-file-upload?

I need to get the file name of the input when is selected and save it to the database, but the only thing it seems to show is the fakepath of the file. //component.html
…
tw3R
  • 68
  • 8
2
votes
1 answer

Angular 6 : Can't bind to 'uploader'

I am trying to upload a video for that I used ng2-file-upload module into my application. This is the error which I got : ERROR in : Can't bind to 'uploader' since it isn't a known property of 'input'. (">single
Abderrahim
  • 651
  • 2
  • 11
  • 25
2
votes
1 answer

How can i change 'ng2-file-upload' default behavior to change the name attribute of the file input to 'file'

I'm trying to build a form in angular in which i will upload 2 different photos. I am using 'multer' on nodejs and 'ng2-file-upload' in angular. I need a unique identifier for each photos in order to be able to handle them right. multer is set to…
codingnighter2000
  • 497
  • 1
  • 7
  • 24
2
votes
3 answers

angular ng2 file upload issue

I am trying to upload different documents. But the problem comes when i choose a file 2nd time it gets added to fileArray, it don't get replaced. For example, i have choosen a picture for 1st input. Then i decided to choose different picture for the…
Farhan
  • 751
  • 1
  • 9
  • 17
2
votes
1 answer

How to send form input values through formdata on beforeonloaditem in ng2-file upload

component : import { FileUploader } from 'ng2-file-upload/ng2-file-upload'; const URL = 'http://localhost:4200/api/ticketsystem/createticket'; public uploader: FileUploader = new FileUploader({ url: URL, itemAlias: 'file' }); …
user7240891
2
votes
1 answer

How can I send an image in base64 with ng2-file-upload?

The title is my question, how I can send an image in base64 with ng2-file-upload? My code in Angular 4: public uploader: FileUploader = new FileUploader({ url: URL, allowedMimeType: ['application/pdf', 'image/jpeg', 'image/png'], …
Maicon e Nanda Blumenau
  • 113
  • 1
  • 9
2
votes
0 answers

how to keep track which file is uploaded in ng2-file-upload

I have many files and input tags lets say I have these files i.e profileImage (JPEG), Certificate (pdf),ID card (.docx) . I am using this link for file uploading file on server. here is only input tag. my server will response with their address of…
Asad
  • 3,070
  • 7
  • 23
  • 61
2
votes
0 answers

How to use ng2-file-upload to post a request without the file?

I come across a question about ng2-file-upload, If I use it to upload at least a file, it works well. But if I do not select any file, it will crash and reload, and I can't get any error. Anyone know how to use ng2-file-upload to post a request…
ZhangXu
  • 131
  • 10
2
votes
1 answer

Resize image before upload using ng2-file-upload

How can I resize image before upload when using ng2-file-upload? In pure JavaScript I'd load image to Canvas, then resize. Does ng2-file-upload have hany events allowing to pre-process uploades files? Any example?
Sfisioza
  • 3,830
  • 6
  • 42
  • 57
2
votes
1 answer

what is the exact mimetype for doc and docx while using ng2FileSelect

Currently, I'm using ng2FileSelect for my file uploading in angular 4 projects. I looked up on the internet for the mime-type for allowing doc and docx, after What is a correct mime type for docx, pptx etc? reading through this, I made my changes as…
Abhishek Ekaanth
  • 2,511
  • 2
  • 19
  • 40
2
votes
1 answer

Why do I get "TypeError: Reflect.getOwnMetadata is not a function"

I'm working on File Upload with Angular2 and Node.js with ng2-File-Upload but while running my project i got an error related to Reflect.getOwnMetadata here is the error shown : and here is my systemjs.config.js (function (global) { …
bxxb
  • 740
  • 1
  • 9
  • 20
2
votes
1 answer

preventing browser from loading a file drop outside the drop tag

I have implemented file drop using ng2 file upload . The problem i am facing is that when the file is dropped outside the drop area browser opens it. Is there any way to prevent this event ? angular2/4
Sachin Jijo
  • 121
  • 8
2
votes
1 answer

How to check duration of video in Angular 4.3.1 using ng2-file-upload?

I am using ng2-file-upload for uploading videos and maximum duration of uploading is 15 minutes. So how can I get it's duration just before uploading it to server? These extensions are allowed only :- -.MOV -.MPEG4 -.AVI -.FLV -.3FPP -.WebM and…
Garima
  • 1,566
  • 2
  • 11
  • 14
1
2
3 4 5 6 7