NickMangine1
Qrew Trainee
Joined 4 years ago
User Profile
User Widgets
Contributions
Re: Using QuickBase API from within iFrames
Hey all. I haven't found a real solution to this problem but I happened upon an accidental fix. By adding an extra "/" after the domain name, the url does not get written and the API calls work as expected. So this does not work: http://[mydomain].quickbase.com/db/..." But this does: http://[mydomain].quickbase.com//db/..." ------------------------------ -- Nick Mangine The Link Group IT Systems Architect nmangine@tlg.com 919-903-7269 ------------------------------64Views1like0CommentsUsing QuickBase API from within iFrames
Has anyone else tried using the QuickBase API from within a page embedded in a form using the new "Embed as iframe in forms" option on URL fields? I have a code page that works to upload a file when I access it directly. But when it's embedded, none of my API calls work? I believe this is being caused because the URL is being re-written when it's embedded as an iFrame: instead of [mydomain].quickbase.com is located in [mydomain].ui.quickbase.com. Anyone have ideas on how to get around this? ------------------------------ -- Nick Mangine The Link Group IT Systems Architect nmangine@tlg.com 919-903-7269 ------------------------------77Views0likes1CommentRe: 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 ------------------------------26Views0likes3CommentsRe: 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 ------------------------------37Views0likes5Comments