I'm trying to upload a photo with some information. But stuck with the error "Argument of type 'File' is not assignable to parameter of type 'string'."

I am using angular 6 as frontent and as a backend, I'm using WebApi with SQL server 2012.

Thanks in advance guys and hoping for a soon response.

image-uploadponent.ts

imageUrl:String="";
fileToUpload:File=null;

  handleImageChange(file: FileList){
    this.fileToUpload = file.item(0);
    var reader = new FileReader();
    reader.onload=(event:any)=>{
      this.imageUrl=event.target.result;
    }
    reader.readAsDataURL(this.fileToUpload);
  }

 uploadImage(imageData){
    let name=imageData.name;
    let number=imageData.number;
    let price=imageData.price;
    this.service.uploadImage(name,this.fileToUpload,number,price).subscribe(
      data=>{
        alert("successfully uploaded");
        this.productForm.reset();
        this.imageUrl="";
      }
    );
  }

image-upload.service.ts

 uploadImage(fileToUpload:File, imagename:string, num:string, price:string){
    let formData:FormData = new FormData();
    formData.append("file",fileToUpload,fileToUpload.name);
    formData.append("Imagename",imagename);
    formData.append("Number",num);
    formData.append("Price",price);
    return this.http.post(this.baseUrl+"UploadImage",formData,this.httpOptions);  
  }

Error:

I'm trying to upload a photo with some information. But stuck with the error "Argument of type 'File' is not assignable to parameter of type 'string'."

I am using angular 6 as frontent and as a backend, I'm using WebApi with SQL server 2012.

Thanks in advance guys and hoping for a soon response.

image-upload.ponent.ts

imageUrl:String="";
fileToUpload:File=null;

  handleImageChange(file: FileList){
    this.fileToUpload = file.item(0);
    var reader = new FileReader();
    reader.onload=(event:any)=>{
      this.imageUrl=event.target.result;
    }
    reader.readAsDataURL(this.fileToUpload);
  }

 uploadImage(imageData){
    let name=imageData.name;
    let number=imageData.number;
    let price=imageData.price;
    this.service.uploadImage(name,this.fileToUpload,number,price).subscribe(
      data=>{
        alert("successfully uploaded");
        this.productForm.reset();
        this.imageUrl="";
      }
    );
  }

image-upload.service.ts

 uploadImage(fileToUpload:File, imagename:string, num:string, price:string){
    let formData:FormData = new FormData();
    formData.append("file",fileToUpload,fileToUpload.name);
    formData.append("Imagename",imagename);
    formData.append("Number",num);
    formData.append("Price",price);
    return this.http.post(this.baseUrl+"UploadImage",formData,this.httpOptions);  
  }

Error:

• javascript
• angular
• typescript
• rxjs
• single-page-application

2 Answers 2

You have that error because you putting the wrong order params

this.service.uploadImage(name,this.fileToUpload,number,price).subscribe(

Change to

this.service.uploadImage(this.fileToUpload, name,number,price).subscribe(

Because your params is like this

uploadImage(fileToUpload:File, imagename:string, num:string, price:string){

as per the parameter you defined called same like fileToUpload,name,number,price likewise...