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

Angular 2: Can't bind to 'uploader' since it isn't a known property of 'input'

Im trying to integrate ng2-file-upload module into my application. And im getting this template error: Can't bind to 'uploader' since it isn't a known property of 'input' UPDATE folder str: /src/app/app.module.ts /src/app/components/layout/ …
phyme
  • 331
  • 2
  • 11
  • 25
17
votes
1 answer

How to return response with ng2-file-upload

I am using ng2-file-upload in angular 4. Is there any way to return custom data from server? How would we access it in ts file?
Tanvi Shah
  • 497
  • 2
  • 9
  • 18
9
votes
1 answer

Upload multiple file to different url's using ng2-file-upload

I am having trouble uploading multiple file to different urls using ng2-file-upload method. I am using this repo https://github.com/valor-software/ng2-file-upload to make this. ng2-file-upload is easily integrated in my app using this demo to…
yugantar kumar
  • 1,982
  • 1
  • 23
  • 33
7
votes
1 answer

Read excel file in angular 2

I am using ng2-File-upload,i want to read the excel file and all its rows and get the total count. Is there any way i can achieve it by using this module and how to get it done by plain JavaScript or typescript.
Asad Shah
  • 771
  • 2
  • 8
  • 22
5
votes
2 answers

ng2 file upload not allowing me to add same doc after I've removed it from que

I'm having a little issue with ng2-file-upload I'm trying to prevent the user from uploading/using the same file twice. Meaning, adding the same file to the queue but not uploading it yet). So I can add a doc like this this.uploader = new…
chuckd
  • 13,460
  • 29
  • 152
  • 331
5
votes
0 answers

ng2-file-upload multiple files to different URL's, but use same Uploader

I am using ng2-file-upload to manage file uploading in my Angular 6 application. What I want to achieve is to be able to upload multiple files using the same uploader:FileUploader object, but every file should have a different URL. public uploader:…
Dino
  • 7,779
  • 12
  • 46
  • 85
4
votes
1 answer

angular ng2-file-upload get blob of file uploaded

I'm working with ng2-file-upload in order to upload images and files of any type, the regular example is working fine but i actually want to retrieve the blob of the file uploaded and not use the regular treatment since i'm going to do my own…
bxxb
  • 740
  • 1
  • 9
  • 20
4
votes
1 answer

How to set image upload size limit (for example 2mb maximum) in Angular

we are trying to set a limit on the size of the image like maximum it should be 2mb. We are using ng2-file-upload. You can see the code in the bellow: uploader: FileUploader = new FileUploader({ url: URL, disableMultipart: true …
user8978302
4
votes
2 answers

How to reset and alow to upload a the files using ng2-file-upload

I am using ng2-file-upload to upload files. It's working fine for me. I need to handle the error on the server side and reset the file uploader. How can I achieve this? Following are the codes I am using HTML
Libin C Jacob
  • 1,108
  • 12
  • 34
4
votes
3 answers

ng2-file-upload single upload override file upload

I do the demo base on this tutorial: https://github.com/valor-software/ng2-file-upload. I want to single file upload but without remove file button. By adding the File A, after that I add the File B. File A will be replaced by file B. here is my…
Phạm Quốc Bảo
  • 864
  • 2
  • 10
  • 19
3
votes
0 answers

How to display uploaded files in ng2-file-upload table with edit form in Angular 8

I have a list of records in the table. The table record has three options (view, edit, delete). Every record has a document. Next, when user clicks on edit option. I will fetch the stored record then I will open a popup modal and show the records.…
Kumaresan Perumal
  • 1,926
  • 2
  • 29
  • 35
3
votes
2 answers

Progress Bar in ng2-file-upload in Angular 6

Id like to create a progress bar to my file upload. The Upload I'm using is: https://www.npmjs.com/package/ng2-file-upload. app.component.html
Adriano Frota
  • 488
  • 3
  • 14
  • 27
3
votes
1 answer

Multiple files in single request using ng2-file-upload or ngx-uploader

I am using ngx-uploader to implement file upload in my project. But when I upload multiple files, it seperate the files array to multiple request. I have tried to use ng2-file-upload but the same result.
dangquang1020
  • 496
  • 3
  • 7
  • 23
2
votes
0 answers

File upload Angular 8 with application/octet-stream - Binary

I have an api that expects to receive an image with "application/octet-stream", I currently have a "ng2-file-upload" library, I would like to make it work with it but if it is not possible I could try with another one or just Even angular. Currently…
maistack123
  • 135
  • 10
2
votes
1 answer

ng2-file-upload - how to add MIME type for '.dmg' file format?

I am trying to allow .dmg file for upload. but not working. what is the correct way to add mime for that? here is my try: '.mp3- 'audio/mp3' '.aif',- 'audio/aiff' '.wav’ - 'audio/wav' '.zip'- 'application/x-zip-compressed' '.pdf' -…
3gwebtrain
  • 14,640
  • 25
  • 121
  • 247
1
2 3 4 5 6 7