Data posted to asp.net core web api results in null parameters

Question

I have a React front-end application, where I am using Axios to post data to the backend.

I have a file input control, where I need to post the base64 for an image with the image title to web api to later store it in cloud storage.

My Form.tsx file with the input looks like this:

const AprtmentForm = () => {

  const fileUploadHandler = (files: any) => {
    console.log(files[0])
    var reader : FileReader = new FileReader(); 

    reader.onload = function(event){
      var contents = event.target?.result
      console.log(contents!.toString())

       agent.Images.create(contents!.toString(), 'test');
    }

    var s = reader.readAsDataURL(files[0])
  }


  return (
    <Container style={{ marginTop: "10em" }}>
      <div>
        <label htmlFor="file" className="ui icon button">
          <i className="file icon"></i>
          Open File
        </label>
        <input type="file" id="file" style={{ display: "none" }} onChange={e => fileUploadHandler(e.target.files)}/>
      </div>
    </Container>
  );
};

agent.Images.create is supposed to be posting to my web api, it looks like this:

const requests = {
    get: (url: string) => axios.get(url).then(responseBody), 
    post: (url: string, body: {}) => axios.post(url, body).then(responseBody), 
    put: (url: string, body: {}) => axios.put(url, body).then(responseBody), 
    delete: (url: string) => axios.delete(url).then(responseBody)
}

const Images = {
    list: () : Promise<IApartment[]> => requests.get('/apartments'), 
    details: (id: string) => requests.get(`/apartments/${id}`), 
    create: (base64String: string, fileName: string) => requests.post('/Images',{ 'base64String': base64String, 'fileName': fileName} ), 
    update: (apartment: IApartment) => requests.put(`/apartments/${apartment.id}`, apartment), 
    delete: (id: string) => requests.delete(`/apartments/${id}`)
}

export default {
    Images
}

My web api post code looks like this:

  [HttpPost]
    public async Task Add([FromBody] Image Image ){




          string connectionString = "storageconnection";
            BlobServiceClient blobServiceClient = new BlobServiceClient(connectionString);
            BlobContainerClient containerClient =  blobServiceClient.GetBlobContainerClient("containername");
            BlobClient blobClient = containerClient.GetBlobClient(Image.fileName);

            //Convert Base64 Encoded string to Byte Array.
            byte[] imageBytes = Convert.FromBase64String(Image.base64String);
            System.IO.Stream stream = new System.IO.MemoryStream(imageBytes);

            await blobClient.UploadAsync(stream, true);

        }


public class Image{
     public string base64String;
     public  string fileName;
}

However, my filename and base64String properties are always null. What am I doing wrong?

Is it something wrong with how I am sending values from my react app?

MK. · Accepted Answer · 2020-03-09 15:40:17Z

3

For the model property binding to work, You need to change your model Fields to Properties.

public class Image
{
  public string base64String { get; set; }
  public string fileName { get; set; }
}

answered Mar 9, 2020 at 15:40

MK.

5,1571 gold badge24 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

B1B Over a year ago

Thank you! That was indeed my mistake!

Collectives™ on Stack Overflow

Data posted to asp.net core web api results in null parameters

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related