Click here to Skip to main content
15,886,737 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
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 .

What I have tried:

<pre>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.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900