how to upload images using Zendesk Upload API

Question

I'm using the function below to upload images on zendesk. Zendesk requires image to be in binary to be uploaded and getting the blob image method is working when I'm uploading on Firebase. These function gets a response 201 but when you check the image, is just a white square. I think image got corrupted during the upload.

imageUri is returned from expo-image-picker like this below:

file:/data/user/0/host.exp.exponent/cache/ExperienceData/.../ImagePicker/8543faa5-b996-46cd-9554-ce9afb61385b.jpg

const uploadImages = async (imageUri) => {

    try {
        const filename = getFilenameFromImagePicker(imageUri);
    
        const resImg = await fetch(imageUri);
        const blobImg = await resImg.blob();
    
        const response = await axios.post(`uploads?filename=${filename}`, {
            blobImg
        }, {
            auth: {
                username: membersEmail + '/token',
                password: ZENDESK_API_KEY
            },
            headers: {
                'Content-Type': 'application/binary',
            }
        })
    
        return response.data;
    }
    catch (error) {
        captureException(error);
        return null;
    }

}

What is the best way to change the image to binary so it can be uploaded to zendesk?

Below is the curl statement from Zendesk's documentation for uploading images

curl "https://{subdomain}.zendesk.com/api/v2/uploads?filename=myfile.dat&token={optional_token}" \
  -data-binary @file.dat \
  -v -u {email_address}:{password} \
  -H "Content-Type: application/binary" \
  -X POST

Answer 1

This is my typescript solution and it works. file is file from

static uploadVideo = async (file:any) => {  
    // first get our hands on the local file
    const localFile = await fetch(URL.createObjectURL(file));
    // then create a blob out of it 
    const fileBlob = await localFile.blob();
    const url = `${YOUR_URL}/v2/uploads?filename=${file?.name}`
    return await axios({
        method: "POST",
        url: url,
        data: fileBlob,
        headers: {'Content-Type': 'application/binary'}
    })
}