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 filea

Thread ID:

Created:

Updated:

Platform:

Replies:

128693 Feb 6,2017 08:49 AM Mar 30,2018 03:15 AM Angular 7
loading
Tags: General
Bharamani
Asked On February 6, 2017 08:49 AM

Hi Experts,

I am new to angular 2.

i am doing data binding with one user form.
for input type text using 'ngModel' working.

But for input type file , data is going as null.

below is my code.

Please help me on this
<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>
</div>
<button type="submit" class="btn btn-primary">SUBMIT</button>
</form>
</div>

Attachment: Capture_af4ffb9.rar

Abinaya Subbiah [Syncfusion]
Replied On February 7, 2017 04:28 AM

Hi Bharamani, 

Thanks for contacting Syncfusion support. 

We couldn’t get input value from form.value, in the case of inputs with type file since the file object can be reached $event.target.files instead. Refer below link for issue detail. 


NOTE:  In DefaultValueAccessor the value used to update the bound element is $event.target.value. 

So we suggest you to use change event to get input value for file type. Please refer to the below code snippet. 

[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); 
    } 
} 
 
 
We have also implemented seed applications, to quick-start with Syncfusion JavaScript Angular 2 components. Refer to the below documentation link for getting started with seed application.   
   
  
We also implemented Angular 2 sample browser using our JavaScript Angular 2 components.  
  

Please revert us back, if you need further assist on this. 
   
Regards,   
Abinaya S   


Bharamani
Replied On February 26, 2017 10:51 AM

Hi Abinaya 

Thanks for reply

can you tell me how to send file data using http.

like i am setting all string and number type data in model and sending to backend via http.

with the form data how can i send file data to backend using http. 

Abinaya Subbiah [Syncfusion]
Replied On February 27, 2017 01:17 PM

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 


Bharamani
Replied On February 28, 2017 01:00 AM

Thanks Abinaya

i got the point.

regards
Bharamani

Abinaya Subbiah [Syncfusion]
Replied On March 1, 2017 07:17 AM

Hi Bharamani, 

We are glad to know that your problem has been solved. 

please let us know if u need any further assistance. 

Regards, 
Abinaya S 


Marco Arce
Replied On March 29, 2018 07:50 AM

Hi Bharamani, 

Thanks for contacting Syncfusion support. 

We couldn’t get input value from form.value, in the case of inputs with type file since the file object can be reached $event.target.files instead. Refer below link for issue detail. 


NOTE:  In DefaultValueAccessor the value used to update the bound element is $event.target.value. 

So we suggest you to use change event to get input value for file type. Please refer to the below code snippet. 

[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); 
    } 
} 
 
 
We have also implemented seed applications, to quick-start with Syncfusion JavaScript Angular 2 components. Refer to the below documentation link for getting started with seed application.   
   
  
We also implemented Angular 2 sample browser using our JavaScript Angular 2 components.  
  

Please revert us back, if you need further assist on this. 
   
Regards,   
Abinaya S   


Hello world!

Subha Shree Ramanathan [Syncfusion]
Replied On March 30, 2018 03:15 AM

Hi Marco Arce, 

Thanks for contacting Syncfusion support. 

Please let us know your queries through screenshot or sample? 

It will help us to proceed further and assist you on prompt solution at the earliest.  

Thanks, 

Subha Shree D.R 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

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.

;