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

Angular 6 ng2-file upload can't read property of queue as undefined

Using Angular 6 to upload pictures to the server with Valor Software's ng2 file uploader and consistently getting errors. The thing is, I've used ng2 file uploader before with Visual Studio Code and it worked fine. This project was started with…
J.G.Sable
  • 1,258
  • 4
  • 26
  • 62
0
votes
1 answer

How to change Request method post in angular

I am using ng2-file-upload Plugin i need to change request method to POST but its showing option public uploader: FileUploader = new FileUploader({ url: URL, disableMultipart : false, autoUpload: true, method: 'post', itemAlias:…
sridharan
  • 2,011
  • 10
  • 36
  • 61
0
votes
1 answer

Angular: Can't bind to 'uploader' but FileUploadModule is imported in same module

I've got a strange problem while using the [uploader] file drop directive from ng2-file-upload. The Angular complier output is: Can't bind to 'uploader' since it isn't a known property of 'div'. I searched for any similar Problems on this site,…
Benjamin Ifland
  • 137
  • 1
  • 10
0
votes
2 answers

Error 400 when uploading a file in Angular 2+

So am trying to upload a file using angular 7 /ng2-file-upload , but I could not manage to do so, because I get error 400 (field name is required) and the problem is I could not find a way to add (key name / field name) to the file. Here is an…
Jake Weary
  • 401
  • 1
  • 4
  • 17
0
votes
2 answers

Get width and height of image with ng2-file-upload

I want to get and check the width and height of an uploaded image using ng2-file-upload and Angular 6. My code so far is: constructor() { this.uploader = this.initializeUploader("url"); } public uploader; private initializeUploader(url:…
SAM
  • 742
  • 10
  • 24
0
votes
1 answer

ng2FileUpload library - adding multiple formData

I added to 'uploader.onBeforeUploadItem' method code as below: item.formData['creator'] = { id: user.id, name: user.name, avatar: user.avatar }; item.formData['content'] = 'value'; And beside of that I add a file from input type…
Adam Jakś
  • 63
  • 1
  • 8
0
votes
1 answer

Uploading large tiff files in nodejs

I am developing a web app using MEAN Stack and Angular 6. I want to upload tiff files(maps) with large file size.(max size is around 1.4 GB).I used 'ng2fileUpload' and 'multer' for that but it does not allow to store large files. Is there any good…
RMD
  • 311
  • 1
  • 7
  • 22
0
votes
1 answer

'ng2-file-upload' error in Angular 6- Can't bind to 'uploader' since it isn't a known property of 'input'

I am developing a web application using Angular 6. This is my folder structure. app | pages | dashboard | maps In maps component I am uploading files using 'ng2-file-upload'. This is my 'maps.component.html'
RMD
  • 311
  • 1
  • 7
  • 22
0
votes
1 answer

Sending form data along with files upload in angular6 displays error title1 and title2 not found

This code uses ng2-file-upload in angular 6 to upload file and it works fine. Now I want to send form data along with the file.To this effect, I have added two form input title1 and title2 and here is how am implementing it the fileupload. This was…
jmarkatti
  • 621
  • 8
  • 29
0
votes
0 answers

I am trying to use ng2-file-upload in my project. But , am unable to integrate the packge into my UI.

I am developing a website in Angular 6 and want to use ng2-file-upload in my project. I have done everything according to the instructions in the link. Still am getting error in the UI. The error is compiler.js:486 Uncaught Error: Unexpected value…
BlizZard
  • 587
  • 5
  • 22
0
votes
1 answer

Angular2+ File Upload with ng2-file-upload - Child component keeps calling Parent Component functions

I have a parent component in which I have 2 input type="file" elements which call the function getFileForParent() on file change : And in my child component I have one :
Aniruddha Gohad
  • 253
  • 3
  • 21
0
votes
2 answers

Using “ng2-file-upload” with Angular 2 and Typescript, can't upload file above, 1MB

I am trying to upload a file of a size above 1Mb and is complaining about the big size. I set the size to 50 MB but this seems to not taking effect. What am i doing wrong? Please help @Component({ moduleId: module.id, //define…
Ndinelago
  • 1
  • 1
  • 4
0
votes
2 answers

ng2-file-upload: file maxFileSize limited to size < 1MB in Angular 2 using typescript

Here is my code. I am not able to upload any file with a size morethan 1 mb but i have set my maxFileSize to 50mb, please help, what am i doing wrong? @Component({ moduleId: module.id, //define the element to be selected from the html…
Ndinelago
  • 1
  • 1
  • 4
0
votes
1 answer

Multer on Node.js throws { Error: Unexpected field... }

I'm using Angular with ng2-file-upload. I'm getting an error: { Error: Unexpected field at makeError (C:\Users\cDotsp27598345\Desktop\Projects\ZeoliteGlobal\node_modules\multer\lib\make-error.js:12:13) at wrappedFileFilter…
Simeon Nakov
  • 978
  • 3
  • 14
  • 32
0
votes
1 answer

Have to build every time to view an image after upload Angular 4/Express

I'm using ng2-file-upload and multer to upload images in my application. The upload itself works fine apart from an error message I get after every upload. { Error: ENOENT: no such file or directory, unlink…
aframestor
  • 176
  • 6
1 2 3 4 5
6
7