Sending binary through HTTP with React-Native Fetch API - http

Question

Is there a way to use the Fetch API to upload a binary file (for instance to S3 using a signed URL) ?
That would be a simple PUT for some 'application/octet-stream'.
The XHR library is working, but I believe Fetch is better, especially in a React-Native environment.
Does React-Native Fetch support Blob nowadays?
Ideally I would like to do something like this, but Blob is undefined:
fetch('https://s3.amazonaws.com/signedUrl/', {
method: 'PUT',
headers: {
'Content-Type': 'application/octet-stream',
},
body: Blob(filePath)
})

Answer 1

This works on Android/iOS and simulators, if you have the file system path to your binary, such as an image using the built-in XMLHttpRequest to send requests:
const xhr = new XMLHttpRequest();
xhr.open('post', serviceUrl);
xhr.onreadystatechange = () => {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.response);
} else {
reject(xhr.response);
}
}
};
xhr.setRequestHeader('Content-Type', 'image/jpeg');
xhr.send({ uri: 'pathToFile', type: 'image/jpeg', name: 'file' });
A sample pathToFile on macOS is file:///Users/username/Library/Developer/CoreSimulator/Devices/061D4A47-6363-4996-A157-03E6AD2DD9E4/data/Containers/Data/Application/3900F3EF-3259-43CF-9400-87B638EF9A1B/Library/Caches/Camera/F86E7345-080A-4D51-A80E-0CAD3370A353.jpg

Answer 2

I would recommend to use: https://github.com/github/fetch as polyfill for Fetch since is not widely supported.
Fetch documentation sample:
var input = document.querySelector('input[type="file"]')
var data = new FormData()
data.append('file', input.files[0])
data.append('user', 'hubot')
fetch('/avatars', {
method: 'POST',
body: data
})
I am using it as follows:
var input = document.querySelector('input[type="file"]')
function upload(e) {
const file = input.files[0];
const reader = new FileReader();
reader.onload = (e) => {
fetch('/avatars', {
method: 'POST',
body: e.currentTarget.result
})
};
reader.readAsArrayBuffer(file);
}
input.addEventListener('change', upload, false)