How to create a Blob?

[brunops]

Hello, sorry if this is a dumb question, but how do I create a simple Blob object after installing this module?

I can't figure this out at all from reading the README, docs, and the code of the module itself. I saw there's a Blob polyfill inside it, but neither the constructor nor the .build method are available:

Is this supposed to be a private api?

Thanks

[RonRadtke]

What do you want to do?
In general there is no need for you to build your own blob when using the lib.

[brunops]

I'm trying to upload a .m4a file from a react-native app using Expo to an upload endpoint in another app (a Rails app with a Shrine upload endpoint to be precise).

The upload endpoint seems to work well, as confirmed by posting with POSTMAN, and in a node.js script, but from React native, nothing works so far, and my best guess at the moment is this lack of support for Blobs, that's how I found this module.

Here's what I'm trying:

    const fPath = FILE_PATH_RECORDINGS + audioFileEntry.name;
    const fWrapped = ReactNativeBlobUtil.wrap(fPath.replace('file://', ''));
    // "ReactNativeBlobUtil-file:///Users/...../Documents/recordings/Audio_09-20_19_30_15.m4a"

    ReactNativeBlobUtil.fetch(
      'POST', 
      apiUrl, 
      {
        // Authorization: "Bearer access-token",
        // Tried both content types
        'Content-Type': 'application/octet-stream',
        // 'Content-Type': 'multipart/form-data',
      }, 
      fWrapped,
      // Tried with a complete object as well, with and without the array
      // [
      //   {
      //     name: audioFileEntry.name, 
      //     filename: audioFileEntry.name, 
      //     type: 'audio/x-m4a', 
      //     data: fWrapped
      //   },
      // ]
    )
      .then((res) => {
          console.log('response.text: ' + res.text())
      })
      .catch((err) => {
        console.error(err);
        console.error('Audio file upload failed.');
      })

Creating the Blob by scratch was an attempt to post a simpler programmatic text file to confirm at least that would be created as a file on the other app, but I wasn't able to create a Blob.

Happy to provide any other details.

[RonRadtke]

To be honest, depending on how your endpoint looks you don't need this lib at all.
I don't know your endpoint, but feel free to e.g. show a Screenshot of your postman test.

For uploading files I usually use formdata. But your api of course most fit to that.
With formdata it could look like this

export async function uploadFile(targeturi:strinf, fileuri: string, filename: string, mimetype: string, additionaldata: Object = {}): Promise {
    let data = {
            uri: fileuri,
            type: mimetype,
            name: filename
        },
        body = new FormData();

    for (let k in additionaldata)
        body.append(k, additionaldata[k]);
    // append file
    body.append('file', data);
   
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.addEventListener('load', (x) => {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            }
            else {
                reject(xhr.statusText);
            }
        });
        xhr.addEventListener('error', reject);
        xhr.addEventListener('abort', reject);
        xhr.open('POST', targeturi);
        xhr.send(body);
    });
}

[brunops]

@RonRadtke Omg, this worked!

I've been trying to figure this out for days and thought I already had tried this before, but apparently not.

Do you know if there's a file size limit for this approach? I expect the biggest audios to be around 50-100MB

Thank you so much!

[RonRadtke]

@brunops I'm glad it worked!

In general there is no limit you should have an problems with on the app side.
The limiting part will be your server. E.g. nginx and apache both have a max-bodysize defined in the config. But that can be afjusted as needed

[perroudsky]

Hi @brunops, could you show me what your server/endpoint looks like ? I'm trying the same thing as you but the request body is always empty :(

[brunops]

Hey @perroudsky! It's a rails app in this case, so it only uses Shrine, in routes.rb:
mount Shrine.upload_endpoint(:cache) => '/admin/upload'