Uploading an mp3 to Firebase Storage with React Native Expo

Question

I am attempting to upload an mp3 to firebase storage using expo and react native. So far I've got the file into firebase storage, but it's only 9bytes large, so I'm doing something wrong. I've attempted this with blob as shown below with no success.

Here is a screenshot of the firebase storage folder showing the file uploaded but not the data of said file:

Any help is greatly appreciated, I feel like I'm missing a step to actually upload the data along with the file.

export default function SongPicker() {
  const [song, setSong] = useState(null);

  //Get current user through authentication
  const user = auth.currentUser;

  const pickDocument = async () => {
    let result = await DocumentPicker.getDocumentAsync({});
    // Fetch the photo with it's local URI
    const response = fetch(result.uri);
    alert(result.uri);
    console.log(result);

    const file = new Blob(
      [response.value], {
        type: 'audio/mpeg'
      });
    console.log('do we see this?');

    try {
      //Create the file reference
      const storage = getStorage();
      const storageRef = ref(storage, `songs/${user.uid}/${result.name}`);

      // Upload Blob file to Firebase
      const snapshot = uploadBytes(storageRef, file, 'blob').then((snapshot) => {
        console.log('Uploaded a song to firebase storage!');
      });

      setSong(result.uri);
    } catch (error) {
      console.log(error);
    }

  }

Answer 1

The fetch() returns a Promise so you should add an await for that as well.

const response = await fetch(result.uri);

Then try using blob() method on the Response :

const file = await response.blob()

The third param in uploadBytes should be upload metadata object but you can skip that here:

const snapshot = await uploadBytes(storageRef, file).