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 bu...
Forum Discussion
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
------------------------------
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
------------------------------
Nick,
Are you willing/able to post how you got a drag and drop option working for multiple file upload?
------------------------------
Mike Tamoush
------------------------------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
------------------------------- 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
------------------------------
