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 01-02-2023 23:01
    Mark how did you know how impatient I am!  Thank you for that!

    ------------------------------
    Jennifer Meyer
    ------------------------------



  • 5.  RE: Upload Multiple File Attachments to QuickBase

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

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



  • 6.  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
    ------------------------------



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



  • 8.  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
    ------------------------------



  • 9.  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
    ------------------------------



  • 10.  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
    ------------------------------



  • 11.  RE: Upload Multiple File Attachments to QuickBase

    Posted 01-07-2023 18:57
    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
    ------------------------------



  • 12.  RE: Upload Multiple File Attachments to QuickBase

    Posted 01-07-2023 20:09
    Can you post your working code?

    ------------------------------
    Mark Shnier (Your Quickbase Coach)
    mark.shnier@gmail.com
    ------------------------------



  • 13.  RE: Upload Multiple File Attachments to QuickBase

    Posted 01-07-2023 22:22
    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
    ------------------------------



  • 14.  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
    ------------------------------



  • 15.  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
    ------------------------------



  • 16.  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
    ------------------------------



  • 17.  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
    ------------------------------



  • 18.  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
    ------------------------------



  • 19.  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
    ------------------------------



  • 20.  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



  • 21.  RE: Upload Multiple File Attachments to QuickBase

    Posted 10-16-2023 18:53

    Hi all,

    Has an updated version of this code been created so that it works on the new forms?

    Thank you



    ------------------------------
    Curtis Middleton
    ------------------------------



  • 22.  RE: Upload Multiple File Attachments to QuickBase

    Posted 10-16-2023 19:15

    QuickBase released their own official multi file upload add on but I don't know if it works on new forms. 



    ------------------------------
    Mark Shnier (Your Quickbase Coach)
    mark.shnier@gmail.com
    ------------------------------



  • 23.  RE: Upload Multiple File Attachments to QuickBase

    Posted 10-16-2023 19:24

    Can confirm - it does work with new forms!



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



  • 24.  RE: Upload Multiple File Attachments to QuickBase

    Posted 10-16-2023 19:39

    Thank you Mark & Troy!

    I thought I had heard that. Did not realize it was an add-on/plug-in functionality.

    I've already set it up.

    Thanks again!



    ------------------------------
    Curtis Middleton
    ------------------------------



  • 25.  RE: Upload Multiple File Attachments to QuickBase

    Posted 10-18-2023 15:10

    Can you point me to this add-on? Is it the Juiced Technologies add on? I am unsure what their own official add on would mean. Thanks so much!



    ------------------------------
    Bailey Desormeaux
    ------------------------------



  • 26.  RE: Upload Multiple File Attachments to QuickBase

    Posted 10-18-2023 15:57

    HI Bailey, if you go into the settings of your app, there is a Plugins section under Advanced Features.  You will find the File Manager plugin there.

    Note, you will want to have your tables ready for this plugin including a Parent/Child relationship and the file attachment field in the child table.

    Good luck!



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