Test AMD Data Tracker with Multiple Attachments - Flag that not all records created if on bad connection

[susannegov]

For Discovery Day, I explored implements custom JS that will allow a user to attach multiple files per form submit in Knack. I made a slide deck here. Related to cityofaustin/atd-data-tech#22796

The JavaScript library used is dropzone.js

• Documentation: https://docs.dropzone.dev/

This is a modification from this code: https://github.com/hamiltont/knack-extensions/blob/master/dropzone-bridge.js

A 24 second video demo of the code in action in AMD Data Tracker Test on desktop with ethernet.

The Problem

Currently, it works as expected when adding multiple attachments as long as the device is on a reliable internet connection. However, since most of the users submitting attachments are doing it on the field, there is a possibility that the internet/hotspot connection is slow/unreliable.

If on a slow internet connection such as Cameron Rd office WiFi or in the field, there is a high risk that not all records are created as expected. For example when a user attaches 10 photos, Knack might accept 1-3 photos instead of 10 as expected.

We want the user to be flagged that not all records were created. However currently the code does not visually show that not all records are created and is instead the pop-up visually shows that all files were uploaded, but not all records created from the ajax call.

Specifications

**********************************/
/*** Add multiple attachments ***/
/********************************/
const KNACK_APP_ID = Knack.application_id;
var fieldId = 'field_4212';
var viewId = 'view_4214';
var sceneId = 'scene_1688';
var maxFilesLoaded = 10; // Maximum amount of files uploaded in dropzone

Testing

1. Go to https://atd.knack.com/test--austin-transportation-data-tracker--23-may-2025#work-orders-inspectors/edit-work-order4/6830a8569501c102e6a20450/
2. Sign in with Non-SSO since this is a test app (AMD Test User is in 1PW)
3. Scroll to click on Add Attachment (Dz) button
4. For desktop Chrome: Right click > Inspect > Throttle to low-tier mobile
5. Add multiple files from devices
6. Result: Either all files are attached or only some of them.

Criteria

• Better messaging when uploads are failing
• Addressing any obvious issues in the code that could be causing the load failure

[ChrispinP]

I know Knack gatekeeps its API calls/requests when too many are asked of it in a short amount of time such as asking it to create 10 records all of a sudden for the attachments. In Make, I have to add error handling to my http requests so if Knack blocks the request it will re-attempt a certain number of times (3) after X number of seconds. It is likely this is the reason for your issue. Some comprehensive error handling will be necessary if we are not using an API tool such as Flows or Make to handle the record creation.

I also suggest tagging this as a WIP as a new feature that we would like to have eventually for multiple apps and needs to be agnostic. I also found some limitations with LazyLoad recently for loading files and may be better to just load a Scripts array which I do for Plasmic, Sortable.js, etc. Even the KTL doesnt use LazyLoad. Also be careful with all those var declarations, both global and non-global.

[chiaberry]

this is declared but never used

[chiaberry]

What is currently happening is when the upload request times out (takes longer than 30 sec to upload), the queue is considered complete and this is enabling the submit button.

I added an error event listener

    dz.on("error", function(file, msg) {
      $formSubmitBtn.prop('disabled', true)
      console.error(msg)
      })

But the queue still is being completed, so theres a race condition where the button will still be enabled. so I took that queuecomplete event handler out.

But now we need to know when to enable the button. I experimented with enabling the submit button on the success event a few lines below but its not perfect. Like if you upload two, the first one works fine (button enabled) and then the second one fails, the error has disabled the button. We could reenable the button when a person removes the broken file, but need to check that there are still successfully uploaded files

[chiaberry]

I shared this in dev sync and @mateoclarke had a good idea, that if a file upload fails, to automatically remove it from the UI instead of making a user do that step. I can look at the code to this if you want!

[susannegov]

I like the idea of the drop zone automatically removing the failed uploaded file from the UI to enable the submit button.

[ChristinaTremel]

Ooo I really like that approach! If all of them failed would they essentially just start back at the beginning with the original step to add files again? And if failed upload files were removed, could we have a message at the top of the pop up letting users know that occurred?