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