We shipped v92 of Heisenware.
See what's new!
Ctrlk
Visit websiteLogin / Sign up
For the complete documentation index, see llms.txt. This page is also available as Markdown.

Minimal photo upload

The Minimal Photo Upload App lets users scan a barcode as an order number, add a name, attach up to 10 photos, and send them directly to a local computer running a Native Agent.

Frontend

The frontend includes a form widget to enter an order ID (which users can also scan using the barcode / QR widget) and a name. Users can then upload photos from their gallery or file system, or take them directly with the camera. Once all information is available, the Save to server button widget becomes active and transfers the files to a local computer running a Native Agent with the File I/O connector.

Backend

  • Form auto-fill: The optional barcode scan uses the autofill command to populate the form directly.

  • Form data receipt: An echo function receives the form data. This lets the flow trigger on page load to run the connected validation routine, which enables the upload button.

  • Photo retrieval: A second echo function retrieves the uploaded photos. This function uses the File storage option because camera images can exceed 5 MB, and buffers perform poorly on large files.

  • Live validation: The combine function performs live validation whenever form or photo inputs change. It uses the toggle command to enable or disable the button based on the modifier extension node logic.

  • Sequential file processing: Drag the readFileToBuffer function from your Native Agent onto the canvas. It receives an array of file paths from the upload widget and processes them sequentially into a base64 buffer on the backend to write them to the image directory. When configured this way, the system interprets the path relative to the Native Agent executable.

  • UI feedback: To improve the user experience, the button shows a loading animation until the files arrive on the server. Call the done event on the button widget to stop this animation and clear the widgets after a successful upload.

Step-by-step guide

1

Download the template

Download the minimal-photo-uploader.hwt template file to your local computer.

Download the template

2

Install the Native Agent

Install a Native Agent on the computer that will receive the uploaded photos. Ensure the File I/O connector is configured and active.

3

Import the template

  1. Open the App Builder.

  2. Click the tags menu in the Top Bar.

  3. Select Import and upload the minimal-photo-uploader.hwt file.

  4. Select the imported template and confirm the import.

Last updated

Was this helpful?