'ReactNative upload blob data to ASP .NET CORE Web API

This is my ReactNative code

const changeAvatar = async () => {
    // No permissions request is necessary for launching the image library
    let result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.Images,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
    });


    if (!result.cancelled) {
       const image = await fetchImageFromUri(result.uri);
        const uploadUrl = await uploadImage(image);
    }
}

const fetchImageFromUri = async (uri) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    return blob;
};

const uploadImage = async (image) => {
    var formdata = new FormData();
    formdata.append("blob", image, image._data.name);
    formdata.append("nameeee", "nameeee");


    var requestOptions = {
        method: 'POST',
        body: formdata,
        redirect: 'follow'
    };

    fetch(global.domain + "/api/profile/avatar", requestOptions)
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
}

And this is my ASP .NET Web API code to handle file upload

        [Route("avatar")]
    [HttpPost]
    public async Task<object> Avatar([FromForm] string nameeee, [FromForm] IFormFile blob)
    {
        return "";
    }

I have test my API by using postman to upload a file, it's work great. But's in my ReactNative code, the file chooser handle convert selected image to blob, so it can't upload to the API. What do i need to modify my ReactNative code to upload selected image to web API ?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source