Custom component to upload a file from retool

I created the below custom component to upload files from retool to the backend,
When I select a file, and then try to inspect the component value, I am not getting anything

{{ customComponent1.model.file }} -> {}


{ file: {} }
  body {
    margin: 0;
<script src=""></script>

<div id="react"></div>

<script type="text/babel">
  const MyCustomComponent = ({ triggerQuery, model, modelUpdate }) => {
    return (
        onChange={(event) => {
          console.log([0]); modelUpdate({ file:[0] });

  const ConnectedComponent = Retool.connectReactComponent(MyCustomComponent);
  ReactDOM.render(<ConnectedComponent />, document.getElementById("react"));

I dont want to use the already existed component, as i am getting base64 string

Hi @Karan

You'll end up to transform the file source as string in any case because you cannot pass a native object (the File object) betweet the iframe of the custom component to Retool.

I guess you can convert the base64 to binary in js, such this solution:

Hope this help.

I did the workaround you mentioned. But the variable is still the same, getting a null value. Not getting the binary, but when I console.log in the function, was able to see the Blob content

const sliceSize = 512;
const byteCharacters = atob(fileInput1?.value[0]);
const byteArrays = [];

for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
  const slice = byteCharacters.slice(offset, offset + sliceSize);

  const byteNumbers = new Array(slice.length);
  for (let i = 0; i < slice.length; i++) {
    byteNumbers[i] = slice.charCodeAt(i);

  const byteArray = new Uint8Array(byteNumbers);

const blob = new Blob(byteArrays, { type: fileInput1?.files?.[0]?.type });

// var pdf_url = URL.createObjectURL(blob);

// console.log(pdf_url, {
//   r: URL.revokeObjectURL(pdf_url)
// });

return blob --> Null value;