Tip: Upload base64 encoded file to Xano

Soenke · August 11, 2022, 6:53am

Hi,

I had the need to send a base64 encoded file directly to my Xano endpoint and had some painful iterations with the javascript code snippet.

Now it works perfectly and I wanted to share the script, if there a more people who need to base64 encode things in WeWeb.

Have to say I am not a Coder thus copied things together, so sorry if the code is not beautifully perfect. But it works

Here we go, hope it helps:

console.log("------ START BASE64 FILEUPLOAD JS -----");

var formData = new FormData();

// Get a reference to the file input
var fileInput = document.querySelector('#file-uploader input');

// Get a reference to the file
const file = fileInput.files[0];
console.log("File: " + file);

// Listen for the result of base64 encoded image 
function boo() {
 return new Promise(function(resolve, reject) {
     
   // Encode the file using the FileReader API
  const reader = new FileReader();
   
   reader.onloadend = () => {
     //optional: If necessary, remove the data tag in the base64 string (depends on how you process the base64 string later)
     var imageData = reader.result.replace("data:", "").replace(/^.+,/, "");
     
     //get content type of file
     var contentType = reader.result.replace("data:", "").match(/^.+;/)[0].replace(";", "");

     console.log(contentType);

     //Add base64 string and contenttype to formData
     formData.append("imageData", imageData);
     formData.append("contentType", contentType);
     
     
     resolve();   
   };
   
   reader.readAsDataURL(file);
   
 });
}

//wait for base64 encoding result
await boo();

//Call Xano endpoint and transmit formdata incl base64 string
//Put your own xanoAuth variable and endpoint URL here
var result = axios.post("https://x8j  .... xano.io/api:49 ... 6/process/scan", formData,{
            headers:{
                "Authorization": "Bearer " + pluginVariables[/* xanoAuth accessToken */ 'f585....4e1']['accessToken'],
                "Content-Type": "multipart/form-data"
    }  
  })    
  
  //wait for Xano response
 var response = await result;
 console.log("response: " + response);

//return result from Xano
 return response;

Soenke · August 11, 2022, 6:55am

Used the code from @caffeinatedwes as a base, thanks for that!

Joyce · August 12, 2022, 2:23pm

Ooooh thanks so much for sharing this @Soenke! Really appreciate it

Joyce · October 26, 2023, 3:46pm

Hello

For future readers of this post, you can now upload files directly to Xano without writing code with the Encode file as Base64 workflow action.

Here’s the video tutorial we made on the topic:

Soenke · October 27, 2023, 10:29am

That’s great!!

karlso · November 20, 2023, 5:40pm

@Joyce Do you know how this would work on a file that’s already part of a Collection list?

e.g. I have a Collection that is a list of files. For each file item, I want to send it as an email, which requires me to encode the file as Base64.

On the button to email the file, I have the workflow below.

However, when I test that, I get the following error:

Uncaught (in promise) TypeError: Failed to execute ‘readAsDataURL’ on ‘FileReader’: parameter 1 is not of type ‘Blob’.
at r (index.8ad6d39a.js:1270:34149)
at new Promise ()
at xt (index.8ad6d39a.js:1270:34039)
at Proxy.runTest (index.8ad6d39a.js:1388:238844)
at index.8ad6d39a.js:1388:222692
at chunk-vendors.c5b4dd71.js:1:107458
at a (chunk-vendors.c5b4dd71.js:1:33337)
at l (chunk-vendors.c5b4dd71.js:1:33420)
at HTMLButtonElement.i (chunk-vendors.c5b4dd71.js:1:94414)
at HTMLButtonElement.sentryWrapped (helpers.ts:98:1)

Do you know what this could be?

Alexis · November 20, 2023, 6:52pm

It’s not really a file, what you have here is an object describing a file

I suppose we need another action named Get file from URL, so you can use the result inside the Encode file as Base64 action

For now you will need a javascript action before your Encode file.

const res = await fetch(item.data.url);
if (!res.ok) {
    throw new Error('File cannot be fetch');
}
return await res.blob();

Then you can use the result of this action and bind it inside your encode file action.

garcilaso · May 29, 2024, 3:37pm

Hello,
I followed all the instructions as per Joyce video, but I’m getting this error when I try to encode the file. Any idea on how to resolve it? Attaching a screenshot of the workflow so far.

name: “TypeError”

message: “Failed to execute ‘readAsDataURL’ on ‘FileReader’: parameter 1 is not of type ‘Blob’.”

Thank you!

SnitchNewt · October 25, 2024, 4:31pm

FYI … files can be uploaded from WeWeb to Xano without Base64-encoding the file.

I did this by setting the Xano Request POST Content Type to “multipart/form-data”.

The issue for me with Base64 files were:

Base64 encoding doesn’t pass the file name, so I would need another API parameter to send the file name. This wasn’t ideal because my API is used by other frontends that don’t pass this information and there was no other way to get the file name.
I didn’t want Xano storing files with names like “file-123456a.jpg” because the user cannot recognize if they uploaded the correct file, especially when dealing with documents where metadata is included within the file name itself (e.g., date, invoice #, account #, etc.).
Theoretically, a Base64 encoded file is larger than an unencoded one. The increased size is negligible, but if it matters to you, then don’t Base64 encode it.

Topic		Replies	Views
I need help? New to WeWeb Ask us anything	6	224	September 25, 2023
Upload File to Xano Tutorial? Ask us anything	18	1011	February 14, 2024
Uploading image to xano issues Ask us anything	17	1329	November 29, 2022
Upload Images on Weweb sent to Xano Ask us anything xano	1	310	September 14, 2023
How do I send a Blob wav File to xano? How do I? workflows , xano	1	17	October 14, 2024

Tip: Upload base64 encoded file to Xano

Related topics