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>

</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>

<label>PassWord</label>

</div>

</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

Tags:

Did you find this information helpful?

Yes

Data binding for Input type as file

Send data using HTTP to server

MVC server application

Please sign in to access our KB

CONTACT US