kzrfaisal / angular-file-uploader Goto Github PK

I'm trying to send a POST file request but no authorization header is appended to the request. I'm using HttpInterceptors, are they supported or your component's POST call?

Compiler error when attempting to run Angular 5 with ng serve --aot:

ERROR in Error during template compile of 'FileUploadModule'
  Function calls are not supported in decorators but 'makeDecorator' was called in 'NgModule'
    'NgModule' references 'NgModule'
      'NgModule' references 'NgModule'
        'NgModule' references 'NgModule'
          'NgModule' calls 'makeDecorator'.

Hi there,

love your package.

I did some user testing and some folks don't click on the upload Button after selecting a file. It would be cool to have this as an option. Or an output event onFileSelect and an input to upload files.

What do you think?

cheers

how can i catch the event after file selection for display file before press upload button ?

I noticed that if I upload multiple files, they are named "file0", "file1" etc:

-----------------------------5936291719523
Content-Disposition: form-data; name="file0"; filename="a2.txt"
Content-Type: text/plain

22222
-----------------------------5936291719523
Content-Disposition: form-data; name="file1"; filename="a1.txt"
Content-Type: text/plain

11111
-----------------------------5936291719523--

In the Spring Controller I would like to receive the files as array, which does not work since they have all different names.

Can you tell me how I can have all the files just be named "file" ?

Hello, I would like to override or hide the text
this.uploadMsgText = "Successfully Uploaded !";
with my own logic and with another language.

This is my code:

  afuConfig = {
      multiple: false,
      formatsAllowed: ".jpg,.png",
      maxSize: "1",
      uploadAPI:  {
        url:"https://file.io" // demo
      },
      theme: "dragNDrop",
      hideProgressBar: false,
      hideResetBtn: true,
      hideSelectBtn: false
  };

  DocUpload(env) {
    var obj = JSON.parse(env.response);
    console.log(obj);  // the API will return {"success":true/false,"message":"The files have errores", "data": {...}}
    if(obj.success)
      console.log('GO TO ANOTHER PAGE');
    else
      console.log('SHOW A DIV WITH SOME ERROR DESCRIPCION (FROM obj.message) AND LOAD obj.data');
  }

Thanks in advance

How can I resize the drag-and-drop window size to fit col-md-12 (complete page)? Also, how can I change the text Drag N Drop?

Hey.
How are you?
My name is Guy and I tried to implement your upload-file plugin in a project of mine.
Implementing It on an empty project was easy and worked beautifully but when I plugged it into a working project this message popped up:

WARNING in ./node_modules/angular-file-uploader/fesm5/angular-file-uploader.js
24:66-82 "export 'defineInjectable' was not found in '@angular/core'

And my app crushed.
I have an ng5 project.

The 'defineInjectable' does exists.
And the dependencies also is up to date.
Do you have any idea what could have went wrong?
Maybe it's a versioning issue?

Hope to hear from you soon.

Best regards,
Guy Reshef

hi,
first things first, thank you for this good module.

how can i change the strings and styles of this module!?

When I use this module, my console throws above error.

Is this something that happens to any others?

Hello, would it be possible to support the param withCredentials during file upload process?

This is necessary if the server used session cookies (ok, maybe session cookies are old school; but however).

On regular HTTP call you can set this parameter additional to the headers params.
https://angular.io/api/http/RequestOptions

Thanks!

Hi I want to send additional data along with the file. Is it possible in current version?? Or can I expect any updates ?

Can the config be modified to pass a response type for the xmlhttprequest? I need a blob response and there is not a way to pass the responsetype

Can we use this to upload files in chunks and does it allow files with size in 1-2 gbs?

Awesome work! Love the component!
Question: how can I translate the component? My app is in Brasilian-Portuguese. Whats my best option, besides forking this project and translating it?

Thank you!

I need to send file through service and send csrf with file .Is there any example to help me?

progress bar not showing in attached pin theme
when hideProgressBar:false,

I think this is the Caption property. If it is empty it gets set to file for each file. Each section in the request has name='file'. When it hits my backend running Laravel, only the last file is available. Seemingly this is because it uses the name attribute to build its array of files. I can't see any way to change the Caption array.

Hello,

Can someone point me in the correct direction of documentation that explains how to hide the "Select File", "Reset" and "Upload" buttons and also get percentage value as uploading to change custom progress bar when the data transfer is happening? I can only see (ApiResponse)="fileUploaded($event)" as an event after the API returns.

Thank you.

I know nobody cares about IE anymore, but I have to support it. Drag an drop seems to work. Using the select button allows you to choose a file, but it doesn't get listed in the selected files.

i don't send params. Please add this function .Thx

Hi, When I send the request with:
afuConfig = {
uploadAPI: {
url: 'https://xxxxxxxxxxx/xxxxxxxxxxx/storedFile/',
headers: {
"Content-Type" : "multipart/form-data; ",
"Authorization" : localStorage.getItem('authorization')
}
},
multiple: true,
maxSize: "1",
theme: "dragNDrop"
};
the URL is ok but it get me a bad response (No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 400).
What I can do?

I'm using angular 5.2, showing error as unknow defineInjectable in angular core.
Working fine when I have changed to defineInjectable to Injectable.
please update the same in npm repo in angular-file-uploader/fesm5/angular-file-uploader.js

in line number 1:
import { Injectable, NgModule, defineInjectable, EventEmitter, Component, Input, Output } from '@angular/core'; should be import { Injectable, NgModule, Injectable, EventEmitter, Component, Input, Output } from '@angular/core';

in line number 19:

'AngularFileUploaderService.ngInjectableDef = defineInjectable({ factory: function' Should be
/** @nocollapse */ AngularFileUploaderService.ngInjectableDef = Injectable({ factory: function

Hi, I have been trying to reassign the default values in 'replaceTexts' object in [email protected], but the changes are not being detected at all.
Furthermore, when trying to use the latest version, the module is not being recognized at all, i.e. I cannot import the { AngularFileUploaderModule } from 'angular-file-uploader'

I wanted the 'Drag N Drop' text to be replaced by below
.

And I wanted it in the HTML file. so whatever the labels in 'replaceTexts' are in TS file, but I wanted it in HTML file.

Could you please let me know how can this be done.

hello

in the scripts section there is a typo:
"build-afu":"ng build angular-fil-uploader"

this gives an error and should be:
"build-afu":"ng build angular-file-uploader"

thanks for the module 👍

The progress bar appears to be very very small. Is there any specific ID or class on the progress bar so that i can style it? The upload happens too quickly for me to inspect and it appears that it's hidden on the DOM unless an actual upload is taking place.

Hello,

excellent job bro, nicely done but I do have project that will use three languages so is it possiable?
can you tell me how to append my own id with file name uploaded ?

I have encountered the following error when I upgraded from 4.0.5 to 4.1.2

WARNING in ./src/app/app.module.ts
58:16-41 "export 'AngularFileUploaderModule' was not found in 'angular-file-uploader'

ERROR in ./node_modules/angular-file-uploader/index.js
Module build failed: Error: ENOENT: no such file or directory, open 'C:\Users\Qarun\Desktop\Internship project\ng-test\uwiprogrammes\node_modules\angular-file-uploader\index.js'

Are any fixes for this?
I will revert back to 4.0.5 for now

If you use multiple loaders on the same page, it is likely that the input will be assigned the same id. Please make it possible to specify id in configuration or complicate id generation

I see the version is on https://www.npmjs.com/package/angular-file-uploader/v/5.0.2, but the source code has not the tag.
I found the commit id e425a10 is the 5.0.2

Can anyone help on this . Files are not getting selected in IE

Please add a way to add parameters to the request.

There are often cases where it's necessary to add metadata to a posted file.

Thanks.

changes to config.uploadAPI.headers is not being detected and angular file upload uses old/initial auth header.

angular-file-uploader/projects/angular-file-uploader/src/lib/angular-file-uploader.component.ts line 50
never gets fired when config gets updated with new values:

also not sure why in ngOnChanges this.config is being used instead of rst["config"] ?

ngOnChanges(rst: SimpleChanges) {
    if (rst["config"]) {
....

<angular-file-uploader #fileUpload1 [config]="config" (ApiResponse)="uploadResponse($event)"></angular-file-uploader>

I've also tried object assign and reinitializing config but ngOnChanges is not being fired
any suggestions?

Thanks

Any help on add form-data in config or in any other place ?
I need to send id in url or in request but i can't do.
Please let me know how i can do.

This should be fairly straightforward and work in the same way that the attachPinText config parameter works.

Hi
We are using angular-file-uploader (Ver. 4.1.2). I’ve set up config for the same and in the config I’ve set formatsAllowed = .xls, .xlsx. But when user selects All Files option on Open Dialog and selects file with unwanted extension though it is not throwing an exception but we need some way to handle such scenario, so that, we can show proper message to user.

Component URL: https://www.npmjs.com/package/angular-file-uploader (https://www.npmjs.com/package/angular-file-uploader)
Thank you!

Kind regards,
Madan Deshpande PMP® ITIL

I want to use your component but couldn't find any licensing!

It had method POST as default. We should have method field in config to set it to PUT, PATCH...My api need PUT not POST.

Thanks!

When I add the following tag in my page, the page doesn't load OR becomes blank.

<angular-file-uploader #fileUpload1
[config]="afuConfig"
[resetUpload]=resetVar
(ApiResponse)="DocUpload($event)">

What am I missing? Or can you provide complete sample implementation of a page?

I am also facing same issue. Drag and drop working for me. Any idea?

.

How can us send the file content on request body? API get me an error because the body is bad built.
And, if the API get a response, how I can manage it? Thanks!

I am trying this package with angular 5. but I am getting Unexpected value 'FileUploadModule' imported by the module 'AppModuleShared'. Please add a @NgModule annotation .

Kindly suggest how can this issue be resolved

Is there the possibility for modify the labels (Drag N Drop for example)?

Hello,

For the example 2, Drap and Drop can we also get on click event ? i.e., Select File functionality.

Normally the user wants either to select file / drag & drop.

if this can be combined in example 2, it would be great.

As mentioned in the README it is possible to replace some texts like (selectFileBtn, resetBtn...). Unfortunately, I was not able to replace the 'Invalid format' text in case we attach an invalid file format.

How can I do that?

Thank you.

Hello,

I'm trying to upload multiple files at the same time but it is taking only second file.
I'm using latest angular version 6 and spring boot for back end.