data binding for input type filea
9 Replies
Hi Bharamani,
We can send data using http.post() method. Please find the below code snippet to sending data using http.post().
NOTE: To send file data we converted the files to base64 string format.
[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;
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) {
console.log(this.files);
this.sendValues(form.name, form.password);
}
sendValues(name, password) {
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
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> |
Define model UserModel in HomeController.cs which is equivalent to form data values. Refer to the below 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; }
}
} |
We will get controller side output as like below image.
Please revert us back if you need further assist on this.
Regards,
Abinaya S
SIGN IN To post a reply.
