I am working on a React Native app where I have requirement of uploading an image or a video to Azure storage account as blob. Currently I am working on image upload but I would like to add video in this question as video will be next step. I have tried so many ways to upload image to Azure storage but I can't get image uploaded correctly from the RN app using Axios. I am generating upload url with SAS token so I can share that url from backend server with device to be able to upload an image or video from the device. I used Postman to test the url and everything is fine there! With Postman I can upload an image as binary body. I used Postman's code generation that shows Axios code example but I am not sure what it means by file contents here. Let me back up a bit.
In this React Native app I am using react-native-image-picker to pick image from gallery and passing the path to a helper class and I am using react-native-fs to get image just to make sure that it exists and everything and also I am getting base64 string from RNFS. Now I have both image path and base64 string of image that I want to upload to Azure server using Axios. I tried few things. One of the thing is example code from postman but as I said, I am not sure how to pass file content as data object shown in example code which is,
const axios = require('axios');
let data = '<file contents here>'; // <--- I don't know this
let config = {
method: 'put',
url: 'https://azure.blob.url/container/blob?sastoken=1234',
headers: {
'x-ms-blob-type': 'BlockBlob',
'Content-Type': 'image/jpeg'
},
data : data
};
axios(config)
.then((response) => {
console.log(JSON.stringify(response.data));
})
.catch((error) => {
console.log(error);
});
I looked for the answer on internet to see if someone has done this way or not! Well I found so many sample code but neither of them worked for me. I might be doing something wrong but I don't know what. One of the way I tried was to use fetch() by passing both base64 string and path with file:// (currently focusing on Android to get the code working and will work on iOS part later but I would appreciate if code example/suggestion/help can be for both Android and iOS) differently to get blob and use it as data object in Axios and it still didn't work!
One of the other option I tried was to use RNFS.upload() as suggested here. That didn't work for my test as it would fail with error and there is an issue created on Github here. There is a fix mentioned in conversation which can be found here. But it is not merged in master branch and I don't know how to get that patch installed plus I would rather work with a patched version.
Other than these methods, I tried FormData() and few other ways which I don't have code example at the moment. So I am looking for help here by posting my own question with hope to get help and in future if someone is trying to follow similar steps, they can find help!