Convert imageUpload Blob to file for API

App Building
1

Hi Everyone,
I've managed to work out most of the file upload capability but when submitting to the Brickognize API I'm seeing an error of "Value error, Expected UploadFile, received: <class 'str'>"

Does anyone know how I can convert the blob into an image file?

I think I may need to use utils.getDataByObjectURL() however I'm not sure where I would run this code?

Many thanks
Adam

image
image1444×1126 140 KB

2

Hi everyone,

Creating a seperate javascript query, and attempting to use this code seems to align to the intent of the getDataByObjectURL however the function notes that base64Data is defined but never used.

I am just trying to run the query seperately after uploading an image to the app to test the concept but am unsure why the function isn't returning any data. Is it because it's awaiting something?

// Get the blob data from the File Input component.
const blobData = capturedImage.value[0];

// Encode the blob data to base64.
const base64Data = await utils.getDataByObjectURL(blobData);

// Set the src attribute of the Image component to the base64 string, specifying the image type as JPG.
capturedImage.src = data:image/jpeg ${base64Data};
3

Hi @AdamG

Thanks for reaching out!

For returning data in the Javascript query, it looks like you'll need to add a line to the JS query that returns base64Data (return base64Data), and then you can reference the JS query's data inside your rest query

The image's src property is read only, so setting it to be equal to something else in a JS query will not update the src value of the component.

1 Like