400 Error Uploading Image with fetch

Hey all, I'm having issues uploading images using a fetch request. I was able to get the relevant react native widget working but was unable to do so in my application due to an error with the line 'window.cloudinary.createUploadWidget' I gave up this path in favor of the fetch and axios post requests. When using a fetch request I encounter a 400 error that shows up in the cloudinary console but is not caught by any of my catch statements. When using axios to replace the fetch statement I get [AxiosError: Request failed with status code 400].

Below is what is being sent to the url

formData: {"_parts": [["upload_preset", "uiyvexvrgh"], ["cloud_name", "dh39belha"], ["file", "data%3Aimage%2Fjpeg%3Bbase64%2CZmlsZTovLy9kYXRhL3VzZXIvMC9ob3N0LmV4cC5leHBvbmVudC9jYWNoZS9FeHBlcmllbmNlRGF0YS8lMjU0MGRldnNvcHMlMjUyRlByb21vLVYyL1JlYWN0TmF0aXZlLXNuYXBzaG90LWltYWdlNzc0Nzg2NDYwOTczNDUwMzIwMy5wbmc="]]}

And below is the relevant code

try {

console.log('uploadCloudPhoto');

const cloudName = 'dh39belha';

const url = `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`;

const uploadPreset = 'uiyvexvr';

const BASE64 = base64.encode(uri);

const base64Img = `data%3Aimage%2Fjpeg%3Bbase64%2C${BASE64}`;

// was `data:image/jpg;base64,${BASE64}`;

let formData = new FormData();

formData.append('upload_preset', uploadPreset);

formData.append('cloud_name', cloudName);

formData.append('file', base64Img);

console.log('formData: ', formData);

console.log('url: ', url);

fetch(url, {

method: 'post',

body: formData,

})

.then(res => {

console.log('res post upload: ', res.json());

})

.catch(err => {

console.log('Fetch error: ', err);

});

} catch (e) {

console.log('uploadCloudPhoto err: ', e);

}

Comments