Tip: Upload base64 encoded file to Xano

Ask us anything Tips and Hacks
1

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 :wink:

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;
3 Likes
2

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

3 Likes
3

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

2 Likes
4

Hello :wave:

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:

1 Like
5

That’s great!!

1 Like
6

@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.

CleanShot 2023-11-20 at 12.37.04@2x
CleanShot 2023-11-20 at 12.37.04@2x1864×1486 301 KB

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?

7

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 :thinking:

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.

2 Likes