0

I have an editor where I can add multiple files even though they are same(repeated).

In my case When I select a file from Firefox it will be added to the editor.! Second time when I reselect the same file it is again adding properly in the editor.! (Working good)

BUT

when I use google chrome first time it is working fine But second time, the same file it is not taking, because the same file is already selected earlier, so it is not taking(When I cancel and add the same file it gets added)

my HTML is something like this:

<input type="file"name="addFiles" multiple>

I have seen A article which says when I use multiple it gets reset but it's not.!

Anyhow By using following jquery code i got what i want(After adding the file in editor im setting val t empty.!

jQuery('input[type=file]').val('');

I am using Angular 4 I don't want to use jquery, how can I do that.?

3
  • 1
    you should be using [ngModel] Commented Jan 22, 2018 at 12:23
  • is it not possible without [ngModel]..? Commented Jan 22, 2018 at 12:32
  • 1
    refer this answer Commented Jan 22, 2018 at 12:38

1 Answer 1

1

Upload file in Angular 4

In the my-fileupload.component.ts file

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FormGroup, FormControl, FormBuilder} from '@angular/forms';

import { SendToService } './_service/service';

@Component({
    selector: 'app-my-fileupload',
    templateUrl: './app-my-fileupload.component.html',
    styleUrls: ['./app-my-fileupload.component.scss'],
    providers: [
        SendToService 
    ]
})

export class MyFileuploadComponent implements OnInit {

    @ViewChild('fileInput') fileInput: ElementRef;

    public MyForm : FormGroup;

    public Files = new FormControl();


    constructor(private fb: FormBuilder, private sendToService: 
    SendToService){}

    ngOnInit() {
        this.MyForm = this.fb.group({
            Files: this.Files,
        });
    }

    onFileChange(event) {
        if (event.target.files.length > 0) {
            this.filesToUpload = <Array<File>>event.target.files; // FILE 

            let size = 5 * 1024 * 1024; // 5MB
            for (let i = 0; i < this.filesToUpload.length; i++) {
                if (this.filesToUpload.size > 5000000) {
                    // Message for file size
                } else {
                    this.MyForm.get('Files').setValue(this.filesToUpload);
                }
            }
        }
    }
    onSubmit(){
        const formObj = this.UploadFile.getRawValue();
        this.sendToService.UploadFile(formObj).subscribe(response => {
            console.log(response) // response = success
            if (response == success) {
                this.MyForm.reset();
            }
        }
    }
}

In the send-to-service.service.ts file

import { Injectable, OnInit } from '@angular/core';
import { Http, Headers, RequestOptions, Response } from '@angular/http';

@Injectable()
export class SendToService {

    Url_app = 'url';

    constructor(private _http: Http) { }

    UploadFile(formObj: any) {

        let formData = new FormData();

        for (let i = 0; i < formObj.length; i++) {
            formData.append('Files[]', formObj[i], formObj[i]['name']);
        }

        return this._http.post( Url_app , formData);
    }
}

In the my-fileupload.component.html file

<input id="Files" type="file" #filesInput (change)="onFileChange($event)" 
       [multiple]="true" />

If you do not want to do this

Use this method

@ViewChild('fileInput') fileInput: ElementRef;

this.filesInput.nativeElement.value = ""

We use ViewChild and ElementRef to access the input

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.