ASP.NET MVC - Unable to bind IFormFile to Blob (Image)

Question

At my front-end, I am currently creating a FormData object that contains an array with the following properties: "ProductId" and "UserImage" . Just to give more context, the "UserImage" property will receive a blob (image). The blob is generated with the following 2 methods: "imagetoblob" and "b64toBlob" . Whenever I tried to send the FormData to my server-side, my controller will freeze for about 45 seconds and return a Network Error message. Hence, I am unable to bind the values from the FormData to my model class (Product). However, when I remove the UserImage variable from my model class, I was able to successfully send and bind the formData.

// public IFormFile UserImage { get; set; } // remove

What seems to be the problem? Below is my code and screenshots of my error

Update I am still trying to solve this issue. Any help is greatly appreciated!

Client-Side

// Assuming I have the base64URL values
var base64Image1 = "";
var base64Image2 = "";
const formData = new FormData();

formData.append("Products[0].ProductId", "1");
formData.append("Products[0].UserImage", imagetoblob(base64Image1));
formData.append("Products[1].ProductId", "1");
formData.append("Products[1].UserImage", imagetoblob(base64Image2));


function b64toBlob(b64Data, contentType, sliceSize) {
        contentType = contentType || "";
        sliceSize = sliceSize || 512;

        var byteCharacters = atob(b64Data);
        var byteArrays = [];

        for (
          var offset = 0;
          offset < byteCharacters.length;
          offset += sliceSize
        ) {
          var slice = byteCharacters.slice(offset, offset + sliceSize);

          var byteNumbers = new Array(slice.length);
          for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
          }

          var byteArray = new Uint8Array(byteNumbers);

          byteArrays.push(byteArray);
        }

        var blob = new Blob(byteArrays, { type: contentType });
        return blob;
      }

      function imagetoblob(base64Image) {
        // Split the base64 string in data and contentType
        var block = base64Image.split(";");
        // Get the content type of the image
        var contentType = block[0].split(":")[1]; // In this case "image/gif"
        // get the real base64 content of the file
        var realData = block[1].split(",")[1]; // In this case "R0lGODlhPQBEAPeoAJosM...."

        // Convert it to a blob to upload
        return b64toBlob(realData, contentType);
      }

Server-side (Controller)

[HttpPost("verifyCart")]
public async Task<IActionResult> verifyCart([FromForm] List<Product> products)
{
}

Server-Side (Model class)

public class Product
{
    public int ProductId { get; set; }
    public IFormFile UserImage { get; set; } 
}

FormData's UserImage key contains the blob (file) -- client side

Network Error received from client-side

Able to receive and bind FormData after removing the IFormFile UserImage at the model class --Server-side

Answer 1

I think your main issues are how you appending your files to your formData and the type you are using in your model.

This is what I would do if I was you:

formData.append("UserImage", imagetoblob(base64Image1));
formData.append("UserImage", imagetoblob(base64Image2));

You can append multiple files here to the same 'UserImage' key.

   public class Product
   {
    public int ProductId { get; set; }
    public List<IFormFile> UserImage { get; set; } 
   }

In your model use a List as your data type. This should work for single file or multiple file uploads.

Answer 2

Have you found a solution? I am trying the same thing, with the same results.