Unable to download an mp3 file using `utils.downloadFile`


I'm seeing strange behavior in utils.downloadFile that I can't figure out. In certain circumstances, the call seems to not trigger the download.

function blobToBase64(blob) {
  return new Promise((resolve, _) => {
    const reader = new FileReader();
    reader.onloadend = () => resolve(reader.result);

const urlToDownload = table1.selectedRow.data.audioUrl;
console.log(`Downloading ${urlToDownload}`);

const resp = await fetch(urlToDownload);
const bytes = await resp.blob();

console.log(bytes.size); // this returns 481070, so lots of data

const base64Data = await blobToBase64(bytes);
const fileData = {base64Binary: base64Data};

console.log(typeof base64Data);
console.log(base64Data.slice(0,30)); // data:audio/mpeg;base64,//uQBAA
// console.log(fileData); // this returns an object w/ a loooong base64 string

utils.downloadFile(fileData, table1.selectedRow.data.title, 'mp3');

I'm confident this code generates a base64 string correctly. E.g. the string in base64Data begins with data:audio/mpeg;base64,//uQBAA.... and the base64Binary key in the object into downloadFile is from the docs.

When I make that call, the query finishes successfully but no file is downloaded.

However, when I make fileData something trivial, like the string "abcdef", the file is downloaded.

Wondering if you could help troubleshoot. Thank you!

Hey @Rob_Andrews!

Can you try using utils.downloadFile({base64Binary: fileData}, table1.selectedRow.data.title, 'mp3'); as described here? If that doesn't work let me know!

Thanks @Kabirdas!

I don't think that's the case unfortunately. I'm creating the object here: const fileData = {base64Binary: base64Data}; (should have named it better :grinning:)

If we do it again in the downloadFile call we end up with {base64Binary: {base64Binary: <data>}}

The workaround I ended up with was passing the audioUrl into the video component which offers a download option (w/ the added benefit of previewing the audio).

It is curious why it's not working with this mp3. Is there a file size limit?

Ah! I had totally missed that :sweat_smile:

Thanks for posting your workaround here!

The file size shouldn't be blocking, utils.downloadFile doesn't have a strict limit and can handle larger files.

If you'd like to investigate further I'd be curious to see if there are any errors showing in your browser console. Also, if there's a sample URL you can share for testing that'd be super helpful.