Upload File To Third Party Mux

App Building
#1

Hi everyone,

I am trying to upload a video file to a third party service called Mux using Retool. I tried two different ways and running into issues with both ways. The video file is a 45mb video file, mp4.

I receive an Upload URL from Mux through our backend server and that works fine, its the uploading part that does not seem to work.

The first way

I have a jsquery, which runs this code when I press submit after uploading the file on to retool.

let res = createUpload.data
let file = clipSelected.file

async function upload(uploadUrl, file) {
  let data = atob(file.data)
  const newFile = new File([data], 'clip.mp4')
  const upload = UpChunk.createUpload({
    // uploadUrl the upload URL generated on the server-side
    endpoint: uploadUrl,
    file: newFile,
    chunkSize: 5120, // Uploads the file in ~5mb chunks
  });

  // subscribe to events
  upload.on('error', err => {
    console.error('💥 🙀', err.detail);
  });

  upload.on('progress', progress => {
    console.log('Uploaded', progress.detail, 'percent of this file.');
  });

  // subscribe to events
  upload.on('success', err => {
    console.log("Wrap it up, we're done here. 👋");
  });
}

upload(res.url, file)

I used atob, cause I read somewhere that Retool encodes the file and then I used the Mux UpChunk package to upload but that doesn’t work, I get an error saying the file is not a video. I tried without atob and i tried just file or file.data when making a new File, none worked.

So my question is, is there a way to prevent Retool from converting the file and keep it as a File Object. That way I do not have to do use atob or any decoding.

The second way

image
image2692×2410 335 KB

I tried to use a restquery API after pressing submit. But here I run into a 413 error, saying the payload is too large. I tried both file.data and file, no luck.

If anyone knows the answer to either one of these questions that would be great.

Custom React Native components?
#2

After doing some searching I found this very helpful Stack Overflow response:

So pretty much I still decoded file.data to Base64-encoded string via atob and then followed the steps outlined in the answer to be able to send the file to Mux or any other third party storage service.

let data = new FormData();
let byteCharacters = atob(clipSelected.file.data)
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
    byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
const blob = new Blob([byteArray]);
data.append('file', blob);
FileInput component use base64 encoding/how to decode?
#3

@Mubashir How did you get this part to work:

const blob = new Blob([byteArray], {type: contentType});

I'm finding I don't get any data out of the Blob() function. Just an empty object.