It's effectively the same as the original but replacing the code in the .addEventListener function to use the JSON API.
const base64data = reader.result;
var headers = {
'QB-Realm-Hostname': 'realmname.quickbase.com',
'User-Agent': '{User-Agent}',
'Authorization': 'QB-USER-TOKEN Insert your user token',
'Content-Type': 'application/json'
}
var body = {
"to": "Insert your DBID",
"data": [{
"13": {
"value": parentRid
},
"7": {
"value": {
"fileName": file.name,
"data": base64data.substring(base64data.indexOf(',') + 1)
}
}
}]
}
fetch('https://api.quickbase.com/v1/records', {
method: 'POST',
headers: headers,
body: JSON.stringify(body)
}).then(res => {
if (res.ok) {
return res.json().then(res => console.log(res));
}
return res.json().then(resBody => Promise.reject({
status: res.status,
...resBody
}));
}).catch(err => console.log(err))
Because of the same origin policy issue that Nick was originally running in to (where code pages embedded as iframes have "ui." appended to the subdomain), you won't be able to force a refresh of the parent window from the iframe. So you'll probably want to add some additional code that displays a success message after the API calls finish.
------------------------------
Tyler Jablonski
------------------------------
Original Message:
Sent: 01-07-2023 20:09
From: Mark Shnier (Your Quickbase Coach)
Subject: Upload Multiple File Attachments to QuickBase
Can you post your working code?
------------------------------
Mark Shnier (Your Quickbase Coach)
mark.shnier@gmail.com
Original Message:
Sent: 01-07-2023 18:57
From: Tyler Jablonski
Subject: Upload Multiple File Attachments to QuickBase
Late to the party here, but to get it to work as an iframe you need to use the new JSON RESTful API instead of the old HTTP API that Kirk used in his original example.
------------------------------
Tyler Jablonski
Original Message:
Sent: 11-30-2021 13:54
From: Nick Mangine
Subject: Upload Multiple File Attachments to QuickBase
Mike, I apologize this isn't written with sharing in mind, but at least I can put the code out there...
This page takes an rid parameter in the url. Then you have to specify the tables and fields in the code. It works if I open up the page and manually specify the record ID, but as I said in the my comments, it doesn't work when embedded as an iframe (which was my hope when I created the page :)
- Nick
<html>
<head>
<script>
var url = new URL(window.location);
const table = "?????";
const foreignKeyField = 9;
const attachmentField = 7;
const descriptionField = 6;
const foreignKey = url.searchParams.get("rid");
// start throbber it will only throb if there are files being uploaded.
var numberOfFiles = 0;
function allowDrop(ev) {
ev.preventDefault();
}
function drop(ev) {
ev.preventDefault();
for(var i = 0; i < ev.dataTransfer.files.length; i++) {
uploadFile(ev.dataTransfer.files.item(i));
}
}
async function uploadFile(file) {
//start the throbber
numberOfFiles += 1;
// escape the file name
var fileName = file.name.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"').replace(/'/g, ''');
// get the file contents
var reader = new FileReader();
reader.onload = async function() { //once the file has been read
var fileContents = reader.result.substring(reader.result.indexOf(',')+1);
// build api xml
var xmlDoc = document.implementation.createDocument(null, 'qdbapi');
var nodRelatedProject = xmlDoc.createElement("field");
nodRelatedProject.setAttribute("fid",foreignKeyField);
nodRelatedProject.innerHTML = foreignKey;
xmlDoc.documentElement.appendChild(nodRelatedProject);
var nodDescription = xmlDoc.createElement("field");
nodDescription.setAttribute("fid",descriptionField);
nodDescription.innerHTML = fileName;
xmlDoc.documentElement.appendChild(nodDescription);
var nodAttachment = xmlDoc.createElement("field");
nodAttachment.setAttribute("fid",attachmentField);
nodAttachment.setAttribute("filename",fileName);
nodAttachment.innerHTML = fileContents;
xmlDoc.documentElement.appendChild(nodAttachment);
var serializer = new XMLSerializer();
var data = serializer.serializeToString(xmlDoc);
// push the file
fetch(
"https://tlg.quickbase.com/db/"+table+"?a=API_AddRecord", {
method: 'POST',
headers: { 'Content-Type': 'application/xml' },
body: data
}
).then(response => {
// strop the throbber
numberOfFiles -= 1;
// write an error or success message
if (response.ok) {
writeResult(fileName+" uploaded!");
} else {
writeResult(fileName+" failed: "+response.statusText);
}
}).catch(e => {
// stop the throbber
numberOfFiles -= 1;
// write the error
writeResult(fileName+" failed: "+e.message);
});
}
reader.readAsDataURL(file);
}
function writeResult(resultText) {
document.body.innerHTML += "<br />"+resultText;
}
function throb() {
if (numberOfFiles > 0) {
var throbberText = document.getElementById("throbber").innerHTML;
if (throbberText.length >= 5) {
document.getElementById("throbber").innerHTML = ".";
} else {
document.getElementById("throbber").innerHTML = throbberText+".";
}
} else {
document.getElementById("throbber").innerHTML = "...";
}
}
</script>
</head>
<body onload="setInterval( function () { throb(); }, 200)" ondrop="drop(event)" ondragover="allowDrop(event)">
Drop project files here<span id="throbber">...</span>
</body>
</html>
------------------------------
Nick Mangine
Original Message:
Sent: 11-30-2021 13:01
From: Mike Tamoush
Subject: Upload Multiple File Attachments to QuickBase
Nick,
Are you willing/able to post how you got a drag and drop option working for multiple file upload?
------------------------------
Mike Tamoush
Original Message:
Sent: 11-30-2021 12:17
From: Nick Mangine
Subject: Upload Multiple File Attachments to QuickBase
Kirk. Thanks for this. You helped me get a Drag n Drop version of this working. I'm wondering, have you tried incorporating this into the new "iframe" functionality with URL fields? Specifically, embedding the pop-up page into the original form instead of linking to it from the button.
I'm finding that the new feature re-writes the address of the embedded page (adding a ".ui" sub-domain) thus losing the ability to use the QuickBase API (because it's now on a different domain and security won't allow cross-site scripting). I wonder if you've run into the same thing and might have some thoughts?
------------------------------
Nick Mangine
Original Message:
Sent: 01-31-2021 16:16
From: Kirk Trachy
Subject: Upload Multiple File Attachments to QuickBase
You can create a button that allows you to add and link multiple file attachments at once to QuickBase.
By getting a copy of the "Magic Buttons" app from the QuickBase Exchange you can copy the button and the html code page and make it your own for your QuickBase application.
We cover topics, questions and answers like this in our daily M-F "Office Hours" webinars held at 1pm Eastern time. All are welcome. http://quickbase.com/webinars/
------------------------------
Kirk Trachy , Senior Solutions Consultant
QuickBase | 603-674-5454 M | ktrachy@quickbase.com
------------------------------