How to send image in put request using angular

Question

The api data is like this

{
    "id": 11,    
    "About_Me": "Male working for ----" ,
    "About_Me_Photo": "http://127.0.0.1:8000/images/personal/aboutme/2021-09-06/15-50-03/1.jpg",        
}

For sending the data, service.ts is

individual1(About_Me){    
      console.log("mf");    
      let url = this.mf+"rajperson/11/";;    
      var dec = JSON.parse((localStorage.getItem('token')));
          
         this.hdrs=new HttpHeaders({    
            Authorization: "Token " + dec,    
            "Content-Type": "application/json; charset=utf-8",    
            Accept: "application/json",    
          })    
            return this.http.put(url,{About_Me:About_Me,},{headers:this.hdrs});

The code is working fine for data but for image i passed the path which doesn't work. Can any one help me on updating the image using put request.

Try to convert the image to base64 string and then pass it to the api and then convert it back to image in api — Vijay Kumawat, Sep 07 '21 at 12:50
please show complete work including HTML there is not enough here to properly answer the question. My presumption is you will need to use santizeHTML pipe — , Sep 07 '21 at 19:15
Does this answer your question? [WARNING: sanitizing unsafe style value url](https://stackoverflow.com/questions/38593515/warning-sanitizing-unsafe-style-value-url) — , Sep 07 '21 at 23:36

score 0 · Answer 1 · answered Sep 09 '21 at 10:28

Implemented by converting the image to base64. The code is as follows

On page.ts :

myimage: Observable<any>;

 onChange($event: Event) {
   const file = ($event.target as HTMLInputElement).files[0];
   this.convertToBase64(file);
 }

 convertToBase64(file: File) {
   this.myimage = new Observable((subscriber: Subscriber<any>) => {
     this.readFile(file, subscriber);
   });
 }
 readFile(file: File, subscriber: Subscriber<any>) {
   const filereader = new FileReader();
   filereader.readAsDataURL(file);
   filereader.onload = () => {
     subscriber.next(filereader.result);
     this.user.individual1(filereader.result).subscribe((res:any)=>{
        alert("Refresh to find the changes");
     })
     subscriber.complete();
   };
   filereader.onerror = (error) => {
     subscriber.error(error);
     subscriber.complete();
   };
 }

On service.ts :

   individual1(photo){
      console.log("mf");
      let url = this.mf+"rajperson/11/";;
      var dec = JSON.parse((localStorage.getItem('token')));
      //dec = "353f4409296eb7b29f1d65ea4304c6fe6f358dcf"
         this.hdrs=new HttpHeaders({
            Authorization: "Token " + dec,
            "Content-Type": "application/json; charset=utf-8",
            Accept: "application/json",
          })
          console.log(dec)
          console.log((localStorage.getItem('token')))
            return this.http.put(url,{photo:photo,},{headers:this.hdrs});

    }

On page.html :

<input type="file" (change)="onChange($event)" />

<div *ngIf="myimage">
  <img [src]="myimage | async" width="200px" height="200px" alt="" />
</div>

How to send image in put request using angular

1 Answers1