How do i get the file's blob once i submit the form?
I have a form with a few fields, and used console log on the submitted form.

As you can see, at the "form.value.pdf" there are the files, however it has no "file" attribute like shown in the example
(const formData = new FormData();
formData.append('file', file.file, file.file.name);
And there are a few meta-data but no blob content for me. How do i get that?

My relevant html look like this:

Estoy implementando el ngx-input-file en mi aplicacion angular, sin embargo aunque le pongo un tamaño maximo al archivo sizeLimit="50", si intento subir un archivo de 100kb me lo procesa sin verificar el tamaño maximo. Incluso si se hacemos la prueba en https://stackblitz.com/edit/ngx-input-file tambien tiene el mismo comportamiento. Este es el ejemplo que estaba intentando

<input-file placeholder="Drop files below!" fileLimit="1" sizeLimit="50"></input-file> pero el sizeLimit no tiene ningun efecto. Agradezco cualquier indicacion.

IMPORTANT:
Currently not compatible with angular 10 update

Steps to reproduce and a minimal demo

- ng update @angular ng update @angular/cli_
- _Stackblitz example Appreciated_

Current behavior
Generic type 'ModuleWithProviders' requires 1 type argument(s).

4 static forRoot(config: InputFileConfig): ModuleWithProviders;
-

Expected/desired behavior
Support for angular 10

I have form group consist with some text input and one ngx-input-file (named image).
I'm selecting my image and then immediately upload to server. My service return URL to uploaded image.

My goal is overwrite image form control with returned URL. Like this:

<input-file
    formControlName="image"
    (acceptedFile)="acceptedImage($event)">
</input-file>


    public acceptedImage(file: InputFile): void {
        this.service.uploadImage(file)
            .subscribe(
                data => {
                    this.form.value.image = data.url;
                });
    }

All works properly! But when I edit any other form control i lost my overwritten data.
My image from control again is InputFile object. Any solution?

Request: adding support for angular 14

Hey,

I love your component but I had a problem integrating it into my application when using the angular router. This component imports the Browser Module component which breaks on Angular if something else imports it. I tried it out with the Common module and it works perfectly fine. Could you switch to using the Common Module instead so there is easier integration?

Thanks!

Hi,

I have an issue when I try to load a big image (>15 MB), it thows an error by console (RangeError: Maximum call stack size exceeded) and freeze the app.

Steps to reproduce

- Select an +15 MB image 

Current behavior

- 

Expected/desired behavior

- It should not freeze an handle the exception.

Environment information

- OS: Windows 10
- Angular Version: cli 6.2.5 
- Typescript version: 7
- npm version: 6.4.1
- Node Version: 10.13.0

Other information
The images I'm been trying were JPG

IMPORTANT:
Please be specific with an example. An issue with

Steps to reproduce and a minimal demo

1. Set changeDetection value for Component decorator to "ChangeDetectionStrategy.OnPush"
2. Try to select some file\files
3. Now selected files values not in ngModel or FormControl
4. Click outside from InputFile control ot click on add icon
5. Now selected files values pass to ngModel or FormControl

Current behavior

-  Demo on StackBlitz https://stackblitz.com/edit/ngx-input-file-ykj3ux

Expected/desired behavior

- 

Environment information

- OS: 
- Angular Version: 
- Typescript version:
- npm version: 
- Node Version: 

Other information

Hello,
I created this package with Angular 2 and Bootstrap and it evolves a bit with material guidelines.

I learned a lot and I has more free time than now. However, my lack of motivation is incompatible to close all issues and to handle this package.

I would be thankfull to people who can fork and support this package.

IMPORTANT:
Please be specific with an example. An issue with While trying to drop files im trying to call a function which does validation on the dropped file.
Currently I'm not able to call a function while dropping files.
Can you please help me on it.

Current behavior

- In the sample, it uses formControlName (Capital 'N')

Expected/desired behavior

- formControlname (Lowercase 'n')

Hi how are you? Im using your library to limit the size of images in my project, and using ngx-image-cropper to cut my image, the problem is image use (change) on input type file to send $event to library, can you tell me how to use (change) and send file or $event to this library?

After deleting all the files I go back to find other files but I no longer upload them to the model. The tests I'm doing with the files of this repo.

how to set file limit to infinite and how can i give validation on accepted file using control accessor

I'm using the input-file but i'm doesn't get how to get the index when using the file limit.

Stackblitz example is in endless loading state. There are some problems with fetching material design icons dependency. Tested on Firefox 62.0.2 and Chrome Version 69.0.3497.100. Windows 10 64bit.

IMPORTANT:
Please be specific with an example. An issue with
I used the same code as in demo, but I always got node_modules/ngx-input-file/ngx-input-file has no exported member 'InputFileConfig' error.

Environment information

- OS: Mac
- Angular Version: 5.2.0
- Typescript version: ~2.5.3
- npm version: 6.1.0
- Node Version: 8.11.3

Other information

produced in stackblitz

Steps to reproduce and a minimal demo

- Open Safari here: https://ngx-input-file.stackblitz.io/

Current behavior

-  Drag and Drop does not work with Safari
-  Stackblitz demo does not load with Safari
-  It works to click and upload a file on my app via Safari but NOT drag/drop

Expected/desired behavior

- Safari is supported without errors

Environment information

- OS: macOS Mojave 10.14.6
- Browser: Safari 12.1.2
- Angular Version: ^7.2.0
- Typescript version: ^3.2.4
- npm version: 6.9.0
- Node Version: 10.16.0
- ngx-input-file version: ^7.0.1

Other information

-  ReferenceError: Can't find variable: DragEvent

There is an issue using file explorer when i add the last file. Drag and drop is fine and limit is set to 4.
Angular v5

IMPORTANT:
Please be specific with an example. An issue with

Steps to reproduce and a minimal demo

• i'm using rest back end to get images
• preload inputFilelComponent with the images like :
  ...
  @ViewChild(InputFileComponent)
  ...
  this.InputFileComponent.files.push({link: url, file: new File([url], name, {type: imageType} ), preview: url});

Current behavior

- first the images are well displayed
- once i click delete icon on any image, the image is deleted but the remainning images are not displayed correctly

Expected/desired behavior

- 

Environment information

Angular CLI: 6.0.8
Node: 9.0.0
OS: darwin x64
Angular: 6.1.10
bootstrap 4

Other information

IMPORTANT:
Please be specific with an example. An issue with

Using the iconAdd configuration and component attribute field. When I use my downloaded icon in 'iconAdd', the icon is not rendered. Is there support for anything other than mat-icons?

Expected/desired behavior

To be able to use a fontawesome icon rather than a the default add icon.

Hello,

I am sorry to ask for this because I'm sure you have put a lot of effort into the preview-div and it does look beautiful. However, for my project, I really only need the input fields, without the preview-div.

Is this possible? I know using [minimal]=true within the input-file div is still possible, but this hides way too much.

Thank you

All we need is the upload-box, we don't need the upload/remove/select-buttons. Is it possible, or would it be easy to implement a way to not show them?

ngx-input-file version: 2.0.2
Angular: 6.0.6
Angular Material: 6.3.0

Current behavior

- <mat-icon>add</mat-icon> is used by default
- No simple way to override .file-button style.

Expected/desired behavior

- Allow to change to any other material icons.
- Override .file-button css style

Greetings, very useful your library, im implementing on a project.

IMPORTANT:
i have this requirement, to send the http request on each selection, change and also on delete (of course when deleting, i need to send an identifier.

I've selected an image, then should send the http request to upload the file.
i've changed an uploaded image, so i need to send the http request to let them know i have changed.
i've deleted an uploaded image, so i need to send the http request to let them know i have deleted specific image.

- OS:  Windows 10
- Angular Version: 13

Is it possible to have this kind of functionalities with this library?

how to use sizelimit?

this is my command can you help me with this I put sizeLimit on "" also

I click on the Remove button and when I read the length property of the model it remains the same as when I select the files

Hi,

Can you provide an example demonstrating how to use input-file directive with reactive forms?

I tried to create a form group

this.form = this._fb.group({
    ...
    images: this._fb.array([this._fb.control(this.product.image[0], Validators.required)])
});

And setup input-file like this

<form name="form" [formGroup]="form">
    ...
    <input-file
        formControlName="images"
        placeholder="Images"
        fileLimit="1"
        fileAccept="image/png">
    </input-file>
</form>

But I'm getting the following error

TypeError: control.registerOnChange is not a function

What am I doing wrong?

Thanks in advance

Diogo

As I see the preview show the image in 160pixels x 160pixels.

Has a way to increase the preview image size? But only for one "file input"
LIke to 320pixels x 320pixels or higher...

Thanks xD

This error appears when using your directive, after browsing and selecting a file:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

There is any option is available to remove .

Here is my code:

pageImageList: PageImages[] = [];
  pageImagesForm: FormGroup;
  constructor(public authService: AuthService,
              private formBuilder: FormBuilder,
              public initializationService: InitializationService,
              private cdr: ChangeDetectorRef) {

               }

  ngOnInit() {
    this.pageImagesForm = this.formBuilder.group({
      mainPagePicture: ['', [FileValidatorDirective.validate]],
      productPagePicture: ['', [FileValidatorDirective.validate]],
      projectPagePicture: ['', [FileValidatorDirective.validate]],
      brandPagePicture: ['', [FileValidatorDirective.validate]],
      blogPagePicture: ['', [FileValidatorDirective.validate]]
    });
  }
  ngAfterViewInit() {
    this.pageImagesForm.get('mainPagePicture')
            .setValue(this.tabChanged(0));
            this.cdr.detectChanges();
  }

  onTabChanged(event) {
          if (event.index === 0) {
            this.pageImagesForm.get('mainPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 1) {
            this.pageImagesForm.get('productPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 2) {
            this.pageImagesForm.get('projectPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 3) {
            this.pageImagesForm.get('brandPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          } else if (event.index === 4) {
            this.pageImagesForm.get('mainPagePicture')
            .setValue(this.tabChanged(event.index + 1));
          }
  }
tabChanged(index): InputFile[] {
    const retrievedImages = new Array<InputFile>();
    this.initializationService.getPageImages(index + 1).subscribe(images => {
        images.map( (x, i) => {
        this.toDataURL(`assets/pages/${x.pageId}_${x.imageId}.${x.fileExtension.split('/')[1]}`, (dataUrl) => {
          const inputFile: InputFile = { id: i + 1,
            preview: dataUrl,
            file: new File([dataUrl], `${x.pageId}_${x.imageId}`, {
            type: dataUrl.split(';')[0].split(':')[1]
          })};
          retrievedImages.push(inputFile);
          });
      });
      this.pageImageList = this.pageImageList.filter(y => y.pageId !== index + 1);
      this.pageImageList = [...images];
      });
      return retrievedImages;
  }

  toDataURL(url, callback) {
    const xhr = new XMLHttpRequest();
    xhr.onload = () => {
        const reader = new FileReader();
        reader.onloadend = () => {
            callback(reader.result);
        };
        reader.readAsDataURL(xhr.response);
    };
    xhr.open('GET', url, true);
    xhr.responseType = 'blob';
    xhr.send();
}

when I retrieve the images from the urls everything is OK but when I select one of the images to change, the other image is gone!!!!

is there any approach to show and change existing files or images?

Uploading works perfectly. I accept only and only one image.
When I select my image from disk or paste url then i se preview. It works perfectly too.

But in my component to Edit I need to show preview of image. My service return model with URL to previously uploaded image.

How to show preview of image in input-file component? It is possible?

This is my form:

        return this.formBuilder.group({
            .....
            icon: new FormControl([])
        });

This is my template:

                <input-file
                        [formControlName]="'icon'"
                        linkEnabled="true">
                </input-file>