# Minimal Photo Upload

Welcome to the minimal photo upload guide! This app allows any user to scan a barcode that acts as a order number, add a name, attach up to ten photos and send them to an on-premise computer (acting as a receiver of the photos).

## Frontend

<div align="left"><figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FTFf2vAfOHA2f8tCkB5x3%2Fimage.png?alt=media&#x26;token=44db3420-d4a6-431b-9ce4-ddba574ab33e" alt="" width="284"><figcaption></figcaption></figure></div>

The frontend features a [form](https://docs.heisenware.com/app-builder/build-frontend/widgets/input-widgets/form) to enter an order id (can alternatively be scanned from a [barcode](https://docs.heisenware.com/app-builder/build-frontend/widgets/input-widgets/barcode-qr)) and a name. The user can then [upload](https://docs.heisenware.com/app-builder/build-frontend/widgets/input-widgets/upload) photos from a gallery or the file system or directly take them with the camera. When all information is available the `Save to Server` [button](https://docs.heisenware.com/app-builder/build-frontend/widgets/trigger-widgets/button) gets active and the files are transferred to the builder's computer (running a [native file agent](https://docs.heisenware.com/app-builder/build-backend/functions-library/connectors/file-i-o)).

## Backend

<figure><img src="https://3495989837-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FE5Ketpww1s7TauSAJrJ8%2Fuploads%2FmW3RrU4ip5s6YXO8UveO%2Fimage.png?alt=media&#x26;token=d76cbb06-9961-4ded-b540-389c3a73e0e7" alt=""><figcaption></figcaption></figure>

* The optionally scanned barcode uses the `autofill` command to send its data directly to the form.
* The form data itself is received via an [`echo`](https://docs.heisenware.com/app-builder/build-backend/functions-library/utilities/data-processing#echo) function, this way it can be triggered [on page-load](https://docs.heisenware.com/tutorials/app-templates/broken-reference) and the connected validation routine will be triggered (important to enable the upload button)
* Another `echo` functions retrieves the uploaded images / photos. Crucially, it uses the `File` storage option as camera images can be huge (> 5MB) each and buffers perform poorly on such large entities.
* The [`combine`](https://docs.heisenware.com/app-builder/build-backend/functions-library/utilities/data-processing#combine) function does a live-validation whenever any of the input (form or photos) change and uses the `toggle` command to set the button according to the simple modifier logic.
* The [`readFileToBuffer`](https://docs.heisenware.com/app-builder/build-backend/functions-library/connectors/file-i-o#readfiletobuffer) actually must be dragged from the native file agent. It receives an array of pathes from the uploader widget and [processes them one-by-one](https://docs.heisenware.com/tutorials/app-templates/broken-reference) into a base64 buffer (on the backend) to subsequently write them to the `image` directory. When specified this way the path is interpreted relative to the native agent's executable
* For improved UI the upload button will show an animation until the files arrived on the server (calling `done` on the button does this trick) and the widgets are cleared after success.

## Try Yourself

In order to try yourself you can start from [this template file](https://downloads.heisenware.cloud/public/templates%2Fminimal-photo-uploader.hwt). Make sure to install a native agent of type `File` on the computer that should receive the photos.