CODEWITHSUNDEEP
androidreact-nativeaudioexpocloudinary
Jill
Jill

Reputation: 35

Uploading Audio to Cloudinary

this is my first Stack Overflow post so please go easy on me!

I'm building an audio recording app using EXPO as the SDK with React Native. One of the main features of the app is to be able to to record live audio as well as uploading audio from the client's device. By leveraging Expo's Audio API and FileSystem, I'm successfully able to record and save live audio and then retrieve it via FileSystem to upload, however I'm running in an error when I try to pass the localUri to upload to my Cloudinary database. There is very little documentation in regards to audio and audio uploads to cloudinary are clumped into video uploads so there's nothing audio specific to really point me in the right direction. I've tried converting the URI to base64 as well as a variety of MIME types but the response from Cloudinary with a secure url returns empty/undefined. I've successfully uploaded images with this method so you can imagine how frustrating it is. Here's my code that grabs a recording and tries to upload it to Cloudinary:

      DocumentPicker.getDocumentAsync({
        type: '*/*',
        copyToCacheDirectory: true,
        base64: true
      })
      .then(succ => {
        //check out the saved info
        console.log(succ, `path: ${succ.uri}, type: ${succ.type}, name: ${succ.id}, size: ${succ.size}`)

      let Base64 = {/* Truncated Base64 object*/};

      let base64Aud = `data:audio/x-wav;base64, ${Base64.encode(succ.uri)}`;

      let cloud = `https://api.cloudinary.com/v1_1/${CLOUD_NAME}/upload`;

         const data = {
        'file': base64Aud,
        'upload_preset': CLOUDINARY_UPLOAD_PRESET,
        'resource_type': 'video',
      }
        fetch(cloud, {
          body: JSON.stringify(data),
          headers: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          method: 'POST',
        })
        .then(async r => {
            let data = await r.json()
            console.log('cloudinary url:', data.secure_url)
            return data.secure_url
      })
      .catch(err => console.log(err))
    }

This call prints the following to the console:

Object {
  "name": "20200117_143416.mp4",
  "size": 519612343,
  "type": "success",
  "uri": "file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Faloud-aaf24bff-8000-47f0-9d1c-0893b81c3cbc/DocumentPicker/c922deb7-fd4f-42d9-9c28-d4f1b4990a4c.mp4",
} path: file:///data/user/0/host.exp.exponent/cache/ExperienceData/%2540anonymous%252Faloud-aaf24bff-8000-47f0-9d1c-0893b81c3cbc/DocumentPicker/c922deb7-fd4f-42d9-9c28-d4f1b4990a4c.mp4, type: success, name: undefined, size: 519612343
data:audio/x-wav;base64, ZmlsZTovLy9kYXRhL3VzZXIvMC9ob3N0LmV4cC5leHBvbmVudC9jYWNoZS9FeHBlcmllbmNlRGF0YS8lMjU0MGFub255bW91cyUyNTJGYWxvdWQtYWFmMjRiZmYtODAwMC00N2YwLTlkMWMtMDg5M2I4MWMzY2JjL0RvY3VtZW50UGlja2VyL2M5MjJkZWI3LWZkNGYtNDJkOS05YzI4LWQ0ZjFiNDk5MGE0Yy5tcDQ=
cloudinary url: undefined

Does anyone see any glaring issues or have any insight on this issue? Better yet, successfully uploaded audio to Cloudinary from the client using Expo & React Native? Thanks!

Upvotes: 1

Views: 1642

Answers (1)

Aleksandar
Aleksandar

Reputation: 1718

While I can't say for certain why the uploads fail in your case without seeing the error returned by Cloudinary, I have created a working JSFiddle which you can use to upload a Base64 data URI encoded audio file (1-second audio in my example to keep it short). Just replace your cloud name in the API endpoint URL and set the upload preset. Once that uploads successfully in your account you can replace the example with your Base64 Data URI and see if it works or not. That will tell you if the issue is with the Base64 String itself. Having said that, sharing the error returned by Cloudinary would be the best indicator.

Example code below:

var fd = new FormData();

fd.append("file", "data:audio/mpeg;base64,SUQzBAAAAAABBFRYWFgAAAASAAADbWFqb3JfYnJhbmQ...");

fd.append("upload_preset", "");
fd.append("resource_type", "video")

fetch('https://api.cloudinary.com/v1_1/cloud_name_here/upload',
  {
    method: 'POST',
    body: fd
  }
);

Upvotes: 4

Related Questions