I’ve been working on integrating my Bubble.io application with SharePoint and have successfully retrieved my SharePoint file structure and created files using the Microsoft Graph API. However, I’m facing an issue when trying to upload a file to a folder in SharePoint because Bubble.io does not support setting the body type to binary for API calls.
What I’ve Done So Far:
Retrieved SharePoint file structure: Successfully used the Microsoft Graph API to get the folder structure.
Created new folder: Managed to create new folders in SharePoint using the API.
The Problem:
When I try to upload a file, the content of the file does not get uploaded correctly. The uploaded file appears empty on SharePoint.
Passing binary data is not compatible with the API Connector, which is indeed true and a bit of a known limitation in Bubble. I used the below code to make the request (you can put this in an HTML element)
This is the JS
function uploadFile(file) {
const url = 'https://your-api-endpoint.com/upload';
const xhr = new XMLHttpRequest();
xhr.open('POST', url, true);
xhr.setRequestHeader('Content-Type', 'application/octet-stream');
xhr.onload = function () {
if (xhr.status === 200) {
console.log('File uploaded successfully:', xhr.responseText);
} else {
console.error('File upload failed:', xhr.statusText);
}
};
xhr.onerror = function () {
console.error('Network error during file upload.');
};
xhr.send(file);
}
function handleFileInput(event) {
const file = event.target.files[0];
if (file) {
uploadFile(file);
} else {
console.error('No file selected for upload.');
}
}
document.getElementById('fileInput').addEventListener('change', handleFileInput);
Also, sharing the code in case you don’t want to use the file uploader and just pass the URL to the JS function (use the Toolbox plugin and the Run javascript action in this).
function uploadFile(url) {
fetch(url)
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.blob();
})
.then(file => {
const uploadUrl = 'https://your-api-endpoint.com/upload';
return fetch(uploadUrl, {
method: 'POST',
headers: {
'Content-Type': 'application/octet-stream',
},
body: file,
});
})
.then(response => {
if (response.ok) {
return response.text();
} else {
throw new Error('File upload failed: ' + response.statusText);
}
})
.then(result => {
console.log('File uploaded successfully:', result);
})
.catch(error => {
console.error('Error during file upload:', error);
});
}
// Example usage:
const fileUrl = 'https://example.com/path/to/your/file';
uploadFile(fileUrl);
@Dandre can you give me the Documentation link for the api call you are building let me see if we can or not. i am not sue but some api call i do manage to send file.
bubble do give us a option to send a file when body type is form and send file is check ?
