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

ERROR TypeError: Converting circular structure to JSON in ng2-file-upload

I am using ng2-file-upload to send file in Post api. so when i am printing structure of the file before sending it, its look like below structure But, as you can see the error which come when i am sending that to one api …
Imran Ahmad Ghazali
  • 605
  • 1
  • 10
  • 16
0
votes
0 answers

How to do use ng2-file-upload with rest service

I am using ng2-file-upload with rest api backend , no multer Want to know , if ng2-file-upload is doing http post internally or we need to create a service to do http post I have taken code from demo https://valor-software.com/ng2-file-upload/ …
user3050267
  • 71
  • 1
  • 9
0
votes
1 answer

ng2-file-upload with Angular 4 and SystemJS

I am trying to use ng2-file-upload in my app in this common way. In my module. import { FileUploadModule } from 'ng2-file-upload'; In systemjs config. map: { ... 'ng2-file-upload': '/static/node_modules/ng2-file-upload', …
zdimon77
  • 131
  • 10
0
votes
0 answers

Append headers to the upload function in ng2-file-upload

I am using ng2-file-upload in angular2 and have an input field for file and submit button like this :
0
votes
1 answer

How to upload images in s3 bucket using angular ng2-file-upload?

Here which code should need to change for upload images on s3 bucket. uploader: FileUploader = new FileUploader({ url: URL, disableMultipart: true, formatDataFunctionIsAsync: true, formatDataFunction: async (item) => { return…
Nirav Joshi
  • 111
  • 9
0
votes
1 answer

Make parallel file uploading ng2-file-uploader

I faced with the problem of uploading multiple files in parallel? Is it possible or the answer is found - link the proper site.
SashaSemanyuk
  • 357
  • 6
  • 20
0
votes
2 answers

ng2-file-upload Does Not save original file name

I am using the ng2-file-upload plugin to upload my files But when I upload a file it changes the file name and saves different file name in the database, is there a way to get the Original file name. I need to show the original name of the file in…
Idrees Ramzan
  • 1
  • 1
  • 6
0
votes
0 answers

Clear file name when failed to upload

I am using ng2-file-upload in my angular 4 application. I wanted to validate and throw an error when the file of not expected type would be selected, I am able to do that by using uploader built-in function onWhenAddingFileFailed(). But File name…
AnoopGoudar
  • 914
  • 9
  • 18
0
votes
1 answer

404 (Not Found) error when uploading files with ng2-file-upload

I am using ng2-file-upload for uploading files to my angular2 application. The problem is that when I click on the 'upload' button, I get a 404 (Not Found) error, meaning the directory I set for the uploads is not found. Here is my component: import…
decebal
  • 1,151
  • 3
  • 18
  • 38
0
votes
1 answer

To upload a video file in angular 2 using ng2 file upload and display the video in a player in the front end

Uploading video is easy.As I am able to get it done using the ng2 file upload . I wanted to display the dropped video file in a player on the front end side. any suggestions regarding this will be really helpful
Sachin Jijo
  • 121
  • 8
0
votes
1 answer

angular 4 file upload on completed callback

i have simple file upload implemented on my angular 4 app, everything works well, but i have one issue that i'm not sure how to fix, so when i finish uploading first item, onSuccessItem callback triggers and i do some logic there, BUT when i upload…
Sahbaz
  • 1,242
  • 4
  • 17
  • 39
0
votes
1 answer

ng2-file-upload doesn't trigger the controller method .net core web api

The upload method doesn't trigger a controller method when Content-Type set to 'multipart/form-data'. If Content-Type set to 'application/json' method will triggered but file object will be null. Here is my client(angular 4) implementation: …
Buzzy
  • 1,783
  • 18
  • 15
0
votes
0 answers

ng2-file-upload works good with php?

I don't know why but when I send file to server the current page is reloaded in the same time... That happens also with Postman. I use a copy of the official doc. And I use SlimFramework : Route : $app->post('/api/file/upload',…
Swarovski
  • 581
  • 2
  • 8
  • 25
-1
votes
1 answer

angular : upload video, audio, doc files

I am using angular 6 to develop a frontend app and I would like to upload a video, audio and document file too instead of image I have tried many solution but not helping Right now I can upload only image but my article could have video, audio…
Abderrahim
  • 651
  • 2
  • 11
  • 25
1 2 3 4 5 6
7