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
1
vote
3 answers

Angular6 Rename the File to be Uploaded

I am using Angular6 and NodeJS for my API. MY application is a School Software where I should save Students Images with their Registration Numbers. I am using ng2-file-upload in Angular for File Uploads and Multer in NodeJS, Upload is working…
Gvs Akhil
  • 2,165
  • 2
  • 16
  • 33
1
vote
0 answers

Unable to upload file with form data from angular to sails.js using ng2-file-upload

My app.component.html contains app.component.ts contains this.uploader = new FileUploader({…
Tech Team
  • 109
  • 13
1
vote
0 answers

Multipart not working with Angular 4 HttpClient

I have following code which uses HttpClient /** * This method used to upload file on server with other details. * * @param {FormData} formData - This parameter have data about keyId, KeyValue and docCatId * @param {string} url - This parameter…
Pankaj Saboo
  • 1,125
  • 1
  • 8
  • 27
1
vote
1 answer

Multiple form-data file upload parameters

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…
Perrier
  • 2,753
  • 5
  • 33
  • 53
1
vote
0 answers

How to zip a file before upload using ng2-file-upload and JSZIP

How we can zip a file before uploading in ng2-file-upload ? Will JSZip be helpful?
user3050267
  • 71
  • 1
  • 9
1
vote
1 answer

How to set 'Access-Control-Allow-Credentials' header to upload a file in angular 4?

I am working on angular 4 app, In which, I have a requirement to upload a file on form submit, for this I am using ng2-file-upload plugin. But I faced a problem to upload file. I am creating a upload.php file completing uploading process.…
Tarnjeet Singh
  • 846
  • 1
  • 11
  • 30
1
vote
2 answers

Unexpected token. A constructor, method, accessor, or property was expected in Typescrcipt

I am trying to Callback after item.upload() using ng2-file-upload in angular 4 but i am getting an error as 'Unexpected token. A constructor, method, accessor, or property was expected' and ' Declaration or statement expected' Below is the my…
user3301440
  • 800
  • 6
  • 13
  • 27
1
vote
0 answers

ng2-file-upload is not working correctly for one component but is for another

I am using ng2-file-upload for 2 different components but essentially the same code. I copy and pasted the component code that is working to the component code that is not. The issue is after I upload a file, nothing happens. I have to click upload…
Jonathan Corrin
  • 1,219
  • 4
  • 17
  • 42
1
vote
0 answers

Angular file uploading to variable

I'm trying to upload image to variable using drop area and I found out ng2-file-upload but it only uploads to url. Is there any way I can trick it, or maybe some other tools I can use for this? Generally i want to upload image droping it to an area…
MolecularMan
  • 227
  • 2
  • 16
1
vote
1 answer

Angular 2 - upload file in array

im having trouble trying to use an uploader inside an array: I have an array of user being listed in a table using "ng-repeat". I wanna add a column with a button to upload an image for each of them. Im currently using ng2-file-upload but no problem…
Mario Perez
  • 93
  • 1
  • 11
1
vote
2 answers

How to get file object with ng2-file-upload + angular 2

I want to accomplish upload on file drag: I am using ng2-file-upload version 1.2.1 with following code snippet: app.module.ts: import { FileUploadModule } from 'ng2-file-upload/ng2-file-upload'; .. imports: [ …
clint
  • 1,786
  • 4
  • 34
  • 60
0
votes
1 answer

ng2-file-upload support Angular 16

I have ng2-file-upload installed in my angular project and I am using angular 16. The following is blocking me This likely means that the library (ng2-file-upload) which declares FileUploadModule is not compatible with Angular Ivy. Check if a newer…
Nesan Mano
  • 1,892
  • 2
  • 26
  • 43
0
votes
0 answers

ng2-file-upload pass static data from input to onBeforeUploadItem

I am new on angular and stuck while using one lib name ng2-file-upload. I want to pass the static value from input value to onBeforeUploadItem function. So here is my code. `
{{att.name}}
Ricky
  • 693
  • 3
  • 12
  • 20
0
votes
1 answer

ng2-file-upload — dnd works, clicking to select does not

I'm tasked with making an multi-image uploader in an old Angular 7 that uses ng-file-upload. It has a single image uploader that works fine, and my new multi-image uploader (using the same implementation) works fine too, except... If I drag and drop…
Kirk Ross
  • 6,413
  • 13
  • 61
  • 104
0
votes
1 answer

Upload to Cloudinary using ng2-file-upload

I'm trying to upload images to cloudinary using ng2-file-upload. I've put the endpoint in the URL and I can see the upload, but I get a 401 UnAuthorized back. Are there any examples which use the new cloudinary-ng package. I looked a the old…
Phil
  • 561
  • 2
  • 16
  • 29
1 2 3
4
5 6 7