Update shared image attribute
Simple form to input new image for pre-defined shared attribute key.
Who it’s for
Anyone who needs a picture attached to an entity and updated from the dashboard — a site photo on an asset, a wiring diagram on a device, a product image on a piece of equipment. The image belongs to the entity and should be changed by whoever maintains the entity, not by an administrator.
What it does
The Update shared image attribute widget presents a single image field bound to a shared attribute key, showing the current image and letting a new one be applied or discarded. The image is stored on the entity as a shared attribute, so the device receives it on its next connection, which suits an image the firmware itself uses.
- One image, one key — a focused form rather than a general attribute editor.
- The current image is previewed, so the person changing it can see what is there before replacing it.
- Apply and discard are explicit, so a picture selected by mistake does not overwrite the stored one.
- A clear button can be shown for removing the image entirely rather than replacing it.
- A result message confirms the write, which matters because an image field gives little other feedback.
- The Update shared image attribute widget writes one attribute: several images per entity need several widgets, each bound to its own key.
How to set up
Data keys
The Update shared image attribute widget writes the attribute key configured on its datasource.
| Attribute | Scope | Operation | Description |
|---|---|---|---|
| Configured key | Shared | Read + Write | The image is stored as a base64 string. The widget reads the current value to show the preview and writes the new one on apply. |
Configure the key on the datasource before anything else, and check the scope matches what will read the image. A picture written to shared scope is only useful to whatever actually reads shared attributes.
Form
| Setting | Default | Effect |
|---|---|---|
| Display preview | On | Shows the current image above the field |
| Display apply button | On | Requires an explicit action to write the new image |
| Display discard button | On | Lets a selection be abandoned before writing |
| Display clear button | Off | Adds a button that removes the stored image |
| Show result message | On | Confirms the write on screen |
| Widget title | Platform default | The caption above the form |
How to customize
- To let the image be removed — turn on Display clear button, which is separate from replacing it.
- To simplify a guided form — turn off Display discard button where cancelling is handled elsewhere on the page.
- To save space — turn off Display preview on a compact panel, accepting that the person cannot see what they are replacing.
- To reduce noise on a busy dashboard — turn off Show result message.
- To caption the form — set the Widget title to name the image being maintained.
Tips
- Keep the preview on wherever an image can be overwritten. Without it the form gives no indication that a picture is already stored, and the first sign of a mistake is the old image being gone.
- Watch the size of what is uploaded. The image is stored inline as base64 on the entity rather than as a file reference, so a full-resolution photograph is a large attribute that is then read on every dashboard load.
Share Your Widget with the Community
Built a custom widget? Export it as a JSON from ThingsBoard and publish it to the IoT Hub through a simple 4-step wizard (Upload, Listing, Readme, Review & Submit). Share it with thousands of ThingsBoard developers worldwide and get featured in the catalog.