Discussions

 View Only
Expand all | Collapse all

Upload Multiple File Attachments to QuickBase

  • 1.  Upload Multiple File Attachments to QuickBase

    Posted 01-31-2021 16:17
    Edited by Kirk Trachy 01-31-2021 16:19
    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
    ------------------------------


  • 2.  RE: Upload Multiple File Attachments to QuickBase

    Posted 01-31-2021 17:05
    Thx Kirk for posting this! 

    For the Advanced impatient students you can watch up to the 30 second mark and then jump ahead to minute 5:00 in the video to see the three elements of the code page to be updated, those being the optional App Token if your app requires one, the Field ID of the file attachment field and the full URL of the table that holds the attachment.

    ------------------------------
    Mark Shnier (YQC)
    Quick Base Solution Provider
    Your Quick Base Coach
    http://QuickBaseCoach.com
    mark.shnier@gmail.com
    ------------------------------



  • 3.  RE: Upload Multiple File Attachments to QuickBase

    Posted 02-01-2021 08:52
    I think Mark is telling me that I put him to sleep.  :-)

    ------------------------------
    Kirk Trachy , Senior Solutions Consultant
    QuickBase | 603-674-5454 M | ktrachy@quickbase.com
    ------------------------------



  • 4.  RE: Upload Multiple File Attachments to QuickBase

    Posted 02-01-2021 09:20
    Thanks for sharing!

    ------------------------------
    Adam Keever
    ------------------------------



  • 5.  RE: Upload Multiple File Attachments to QuickBase

    Posted 11-01-2021 16:42

    Hi Kirk, I'm trying to get this working but no documents are being added to the related document table in my app.  I noticed the button code has been updated, and this video no longer applies.  The notation on the button indicates the page code no longer needs to be updated, however there is still the following callout in the code page:

    request.open("POST", attachmentTableURL, true); // UPDATE WITH THE URL TO THE DESTINATION TABLE


    I'm pretty new to quickbase, so I may have gotten something else wrong, but appreciate clarification on whether the code page requires an update to make this work.  Thanks for all you do - your apps and videos are huge inspiration and resource!



    ------------------------------
    Troy MacPherson
    ------------------------------



  • 6.  RE: Upload Multiple File Attachments to QuickBase

    Posted 02-18-2022 13:08
    Hi Troy, 

    Were you able to fix this issue? I am trying to add the multifile upload button and even I have the same issue the files are not getting uploaded in the child table. Thanks in advance.

    ------------------------------
    Srinath M.R
    ------------------------------



  • 7.  RE: Upload Multiple File Attachments to QuickBase

    Posted 11-30-2021 12:17
    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
    ------------------------------



  • 8.  RE: Upload Multiple File Attachments to QuickBase

    Posted 11-30-2021 13:02

    Nick,

    Are you willing/able to post how you got a drag and drop option working for multiple file upload?



    ------------------------------
    Mike Tamoush
    ------------------------------



  • 9.  RE: Upload Multiple File Attachments to QuickBase

    Posted 11-30-2021 13:55

    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, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&apos;');

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



  • 10.  RE: Upload Multiple File Attachments to QuickBase

    Posted 11-30-2021 13:00
    This is awesome, but I am surprised that QB hasn't decided to make this a simple, native capability, and include a drag and drop option.

    For those wanting a drag and drop option, @Juiced Tech has a nice addon that allows for drag and drop, and optionally include required fields.


    ------------------------------
    Mike Tamoush
    ------------------------------



  • 11.  RE: Upload Multiple File Attachments to QuickBase

    Posted 02-24-2022 14:56
    I know this is old. It works great. 

    The only issue we have is we are uploading 1-60 images based on the job. several times a day. 
    They hold time once you choose the docs can be a few mins and it has no indication it's doing something. 

    is there a way we could add a progress bar?

    ------------------------------
    Ali Mohsenian
    ------------------------------



  • 12.  RE: Upload Multiple File Attachments to QuickBase

    Posted 05-20-2022 22:24
    Good evening,

    How do you get the Multiple file button to display at the top? I already added the script but this section does not appear.

    Thank you,
    Victoria

    ------------------------------
    Victoria Clark
    ------------------------------



  • 13.  RE: Upload Multiple File Attachments to QuickBase

    Posted 05-21-2022 11:17
    Can you help me understand the question.  Did you make the button field and put it on your form?​

    ------------------------------
    Mark Shnier (YQC)
    mark.shnier@gmail.com
    ------------------------------



  • 14.  RE: Upload Multiple File Attachments to QuickBase

    Posted 05-21-2022 17:59
    Thank you for reaching out. That is what I am looking for, how to create a button field.

    I followed the video posted by Mr. Trachy, copied the script, added it to the pages section in my project, and updated the 3 items. But I am not seeing the button/tab to be able to select "Multiple Documents".

    ------------------------------
    Victoria Clark
    ------------------------------



  • 15.  RE: Upload Multiple File Attachments to QuickBase

    Posted 05-22-2022 08:29
    Here is a working example of the formula URL button which works with the script which is stored in page ID = 4.  Did you put this field on our form?

    var text URL = URLRoot() & "db/"&Dbid() & "?a=dbpage&pageID=4&refFid=7&rid=" & [Record ID#]

    & "&fileattachment=36"
    & "&attachmenttableurl=" & URLRoot() & "db/" & [_DBID_EXPENSE_FORM_LINES];

    If(IsNull([Date Submitted and Locked]), $URL)

    // NOTE: We have updated the button so you only need to update this button's code.
    // If you are looking at the video it may suggest you edit the UploadMultipleDocuments.html page but we have updated the button so all changes and updates can be made here and passed down into the page.
    // First copy the UploadMultipleDocuments.html file located in this app's "Pages" and add it to your new application's "Pages". Make note of your page's new pageID.

    // Then edit the above code to reflect the following updates:
    // The pageID number of your UploadMultipleDocuments.html page.
    // The refFid number to reflect the related reference field's fid.
    // Your application's app token.
    // The fid of your destination file attachment field.
    // The table alias of the destination table where you are placing the file attachments.
    //
    // All these values will be passed to the UploadMultipleDocuments.html page when you press the button.

    ------------------------------
    Mark Shnier (YQC)
    mark.shnier@gmail.com
    ------------------------------



  • 16.  RE: Upload Multiple File Attachments to QuickBase

    Posted 05-23-2022 13:21
    Edited by Victoria Clark 05-25-2022 11:23
    Hi Mark,

    Thank you for replying!

    Original Message:
    Sent: 05-22-2022 08:29
    From: Mark Shnier (YQC)
    Subject: Upload Multiple File Attachments to QuickBase

    Here is a working example of the formula URL button which works with the script which is stored in page ID = 4.  Did you put this field on our form?

    var text URL = URLRoot() & "db/"&Dbid() & "?a=dbpage&pageID=4&refFid=7&rid=" & [Record ID#]

    & "&fileattachment=36"
    & "&attachmenttableurl=" & URLRoot() & "db/" & [_DBID_EXPENSE_FORM_LINES];

    If(IsNull([Date Submitted and Locked]), $URL)

    // NOTE: We have updated the button so you only need to update this button's code.
    // If you are looking at the video it may suggest you edit the UploadMultipleDocuments.html page but we have updated the button so all changes and updates can be made here and passed down into the page.
    // First copy the UploadMultipleDocuments.html file located in this app's "Pages" and add it to your new application's "Pages". Make note of your page's new pageID.

    // Then edit the above code to reflect the following updates:
    // The pageID number of your UploadMultipleDocuments.html page.
    // The refFid number to reflect the related reference field's fid.
    // Your application's app token.
    // The fid of your destination file attachment field.
    // The table alias of the destination table where you are placing the file attachments.
    //
    // All these values will be passed to the UploadMultipleDocuments.html page when you press the button.

    ------------------------------
    Mark Shnier (YQC)
    mark.shnier@gmail.com