We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Data binding for Input type as file

Generally, you can bind the data for text type inputs and get the values using form instance. In the case of file type inputs, the value from form instance is always null, which can be retrieved in input element event handler using $event.target.files. Because, the DefaultValueAccessor is used to update the value of bounded element into $event.target.value.

 

Use the event handler in your application to process the file type inputs. Here, the change event is bounded to the input element, in which you can get the file details in event arguments ($event.target.files).  

 

 [app.component.html] 

<div class="container"> 

    <form #form = "ngForm" (ngSubmit)="logForm(form.value)" enctype="multipart/form-data"> 

        <div class="form-group"> 

            <label>Name</label> 

            <input type="text" name="name" class="form-control" ngModel> 

        </div> 

        <div class="form-group"> 

            <label>File</label> 

            <input type="file" name="file" ngModel (change)="getFiles($event)"> 

        </div> 

        <button type="submit" class="btn btn-primary">SUBMIT</button> 

    </form> 

</div> 

 

[app.component.ts] 

import { Component } from '@angular/core'; 

 

@Component({ 

    selector: 'ej-app', 

    templateUrl: 'src/home/home.component.html', 

}) 

export class HomeComponent { 

    files : FileList; 

    getFiles(event){ 

        this.files = event.target.files; 

    } 

    logForm(event) { 

         console.log(this.files); 

    } 

} 

 

 

Send data using HTTP to server

 

Send the form data to server (MVC controller) using http post() method. To send file data, convert the files to base64 string format. Refer to the following code snippet.

 [app.component.ts] 

import { Component } from '@angular/core'; 

import { Headers, Http, RequestOptions } from '@angular/http'; 

 

import { NgForm } from '@angular/forms'; 

 

@Component({ 

    selector: 'ej-app', 

    templateUrl: './app.component.html', 

}) 

export class AppComponent { 

 

    files: FileList; 

    filestring: string; 

    constructor(public http: Http) { 

    } 

    getFiles(event) { 

        this.files = event.target.files; // Getting inputs from files

        var reader = new FileReader(); 

        reader.onload = this._handleReaderLoaded.bind(this); 

        reader.readAsBinaryString(this.files[0]); 

    } 

 

    _handleReaderLoaded(readerEvt) { 

        var binaryString = readerEvt.target.result; 

        this.filestring = btoa(binaryString);  // Converting binary string data. 

   } 

    logForm(form: NgForm) { // Event will trigger while submit the form

        this.sendValues(form.name, form.password); 

    } 

    sendValues(name, password) { // Form inputs are send to MVC controller through HTTP server

        let headers = new Headers({ 'Content-Type': 'application/json' }); 

        let options = new RequestOptions({ headers: headers }); 

        this.http.post('server-url', JSON.stringify({ Username: name, Password: password, FileData: this.filestring }), options).               // http post method to sending data. server-url depicts the MVC project local host url

            subscribe( 

            (data) => { 

                console.log('Response received'); 

            }, 

            (err) => { console.log(err); }, 

            () => console.log('Authentication Complete') 

            ); 

    } 

} 

 

 

[app.component.html] 

<div class="container">  

    <form #form = "ngForm" (ngSubmit)="logForm(form.value)" enctype="multipart/form-data">  

        <div class="form-group">  

            <label>Name</label>  

            <input type="text" name="name" class="form-control" ngModel>  

        </div>  

        <div class="form-group">  

            <label>PassWord</label>  

            <input type="text" name="password" class="form-control" ngModel>  

        </div>  

        <div class="form-group">  

            <label>File</label>  

            <input type="file" name="myfile" ngModel  (change)="getFiles($event)">  

        </div>  

        <button type="submit" class="btn btn-primary">SUBMIT</button>  

    </form>  

</div> 

 

 

MVC server application

 

1. Create a MVC Project in Visual Studio.

2. Define the UserModel in HomeController.cs which is equivalent to form data values. Refer to the following code snippet for controller. 

 

[HomeController.cs] 

using System; 

using System.Collections.Generic; 

using System.Linq; 

using System.Web; 

using System.Web.Mvc; 

 

namespace MVCDemo.Controllers 

{ 

    public class HomeController : Controller 

    { 

        public ActionResult Index() 

        { 

            return View(); 

        } 

 

        public ActionResult About() 

        { 

            ViewBag.Message = "Your application description page."; 

 

            return View(); 

        } 

 

        public ActionResult Contact() 

        { 

            ViewBag.Message = "Your contact page."; 

 

            return View(); 

        } 

 

        [HttpPost, ValidateInput(false)] 

        public ActionResult SendUserData(UserModel user) 

        { 

            return Json(user); 

        } 

    } 

 

    public class UserModel 

    { 

        public string Username { get; set; } 

        public string Password { get; set; } 

        public String FileData { get; set; } 

    } 

} 

 

While submitting the form, you can get the form data in controller like the following image. 

 

 

Sample links:

Angular Sample

MVC Sample
Article ID: Published Date: Last Revised Date: Platform: Control:
8747 05/14/2018 05/14/2018 JavaScript General
Did you find this information helpful?
Add Comment
You must log in to leave a comment

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.