I want to send uploaded files to base64 so that I can pass
to the request(I am using Remote API's). The problem is that I'm using Angular
2 with Typescript and I couldn't find any info on how to do that. I found that
in Javascript it can be done with canvas .I have created a javascript function
to convert the image to base64 and get file using
//insted of ng-Model in the case of file upload
var ImgeData = event.srcElement.files;
console.log(ImgeData);
so my index. html contains
<script type='text/javascript'> function encodeImageFileAsURL()
{ // logic for convert to BASE64 //ng-Model file
var ImgeData = event.srcElement.files;
console.log(ImgeData);
} </script>
html will be like
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL(); " />
here after selecting the image i am getting the file name and details in
var ImgeData = event.srcElement.files;
the real confusion coming here after in "ImageData" ive the image(file) details.How can send it along with other json data?
my save methode is something like
//in Service.ts
SaveDetails(mar: model)
{
let body = JSON.stringify
([ { "Id": 0, "Name": mar.Name,
"Age": mar.Age,
"ImageUrl": mar.ImageUrl,
"ImgeData": "how i can pass that Imagedata in javascriptfunction along with these details??? " "updatedBy": "ADMIN",
"updatedOn": "2017-07-05" } ]);
console.log(body); let headers = new Headers({ 'Content-Type': 'application/json; charset=utf-8' });
let options = new RequestOptions({ headers: headers });
return this._http.post(this.serverurl , body, options) .map(res => <model[]>res.json()) .catch(this.handleError); }
so the file details getting from js function, send it along with this details How can i send?
same as I need to bind the converted base64 images.how can i bind ?
for binding i ve tried
<img src="data:image/gif;base64,{{ m.ImgeData}}">
unfortunatly this s not working.. Help me to find a solution to bind/save the file
Thanks.