Access file upload data on ngform submit function in angular 5?

I am having a ngform with file input along with other input fields. Currently I am passing data to the component using ngmodel on submit. But I don't know how to perform the file upload with ngmodel.In the backend I am using Laravel.

Currently I am able to get the file data in the component function handleFileInput.I want to pass this data along with other form input fields.How do I achieve that?

Template code

<div class="form-group">
<label for="file">Choose File</label>
<input type="file" id="file" (change)="handleFileInput($event.target.files)">                               
</div>

Component code

handleFileInput(files: FileList) {
      this.fileToUpload = files.item(0);
    }

onSubmit Method

onSubmit() {
        this.loading = true;
        this._dataService.create(this.model, company_url).subscribe(data => {
            this.submitted = true;
            this.loading = false;
            this.companyForm.reset();
        },
            error => {
                this.loading = false; console.log(error);
                this.error_message = error;
            });
    }

1 answer

  • answered 2018-05-16 06:45 faizan baig

    The part you are doing with change detection is right.

    Just you will have to create a formdata and submit that formdata with your post request. You dont have to set the content type on your angular side, Angular does that job for you.

    I am providing you my angular + node example hope this helps you.

    I have used multer in my example to store the file.

    Example

    Angular componenet

    // Create Variable for your file and formdata.
    selectedFile: File = null;
    fd = new FormData();
    
    constructor(private http: HttpClient){}
    
    // When file change is detected append your file to your formdata and on submit post the request.
    handleFileInput(event) {
          this.selectedFile = <File>event.target.files[0];
          this.fd.append('file', this.selectedFile, this.selectedFile.name);
        }
    
    onSubmit() {
        this.http.post(url, this.fd)
        .subscribe((data)=>{console.log(data);});
    }
    

    Node route file.

    var multer = require("multer");
    const storage = multer.diskStorage({
        destination: function (req, file, cb) {
            cb(null, './upload')
        },
        filename: function (req, file, cb) {
            cb(null, file.originalname)
        }
    })
    const upload = multer({
        storage: storage
    });
    var fs = require('fs');
    
    router.post('/uploadprofile', auth, upload.single('image'), (req, res) => {
       res.send('file uploaded');
    });