# How do you save an Image Picker upload from a custom Adalo form?

Use an Image Picker for user uploads, then map its selected image into an Image property in the button's Create or Update action.

- Canonical URL: https://adalocado.com/answers/save-image-picker-upload-from-custom-form-adalo
- Verification: Documented from current sources
- Topic: Actions and Logic
- Skill level: Beginner
- Last reviewed: 2026-09-08
- Index status: index-now

## Short answer

Use the Image Picker component, then add a button action that creates or updates the target record and maps the Image property to the Image Picker's selected value.

Use Image Picker as the upload input, then map that picker value into the target Image property inside the button's Create or Update action. Test the saved database record before adding navigation so you can separate an input mapping problem from a screen-context problem.

## Intended outcome

A custom form saves the selected upload into the intended Image property without requiring Adalo's Form component.

## Requirements

- An Image property on the target collection
- An Image Picker component on the custom form screen
- A button with the target record available for a Create or Update action

## Step by step

1. **Add the Image Picker**

   Place an Image Picker on the custom form screen. Use an Image component only for displaying an image, not for collecting a user upload.

2. **Choose the data action**

   Add a Create action when the button should make a new record, or an Update action when the screen already has the target record.

3. **Map the Image property**

   Inside the Create or Update action, open the target Image property and choose the Image Picker value from Other Components or Form Inputs.

4. **Keep the action context explicit**

   For an Update action, confirm that it targets the intended current record. Leave unrelated properties set to No Change.

5. **Test the saved record**

   Select an image, tap the button once, and inspect the created or updated database record before adding navigation or another action.

## Why it works

- The Image Picker produces the user-selected image value, while the button's data action decides which record and Image property receive it.
- Separating inputs from the Create or Update action is what turns individual components into a custom form.
- An Image display component does not replace the Image Picker input.

## Data model

| Collection | Properties | Relationships |
| --- | --- | --- |
| Target collection | Add an Image property for the upload and matching property types for the other custom-form values. | No relationship is required for the upload itself; add the relationships required by the record's owner and screen context. |

## Common failures

### The saved Image property is blank

Reopen the button action and verify that the target Image property uses the Image Picker value, not an Image display component or an empty value.

### The wrong record changes

Check the Update action target and confirm the intended current record is available on the screen.

### The camera option is missing in an Android PWA

Choose an existing image from the gallery, or test a native Android build when direct camera access is required.

## Testing checklist

- [ ] Create a test record with a selected image and confirm the database Image property contains the upload and the image renders on a detail screen.
- [ ] Run the action without selecting an image and confirm the app follows the intended empty-input rule without overwriting an existing image unexpectedly.
- [ ] The collection field type is Image
- [ ] The screen uses an Image Picker for input
- [ ] The button maps the picker value into the target Image property
- [ ] The Create or Update action targets the intended record

## Limitations

- Image Picker behavior varies by build type, operating system, and browser. Android PWAs usually provide gallery selection rather than direct camera access.
- This workflow covers Adalo's internal database. External collections can have different file-upload and endpoint requirements.
- Adalocado has not reproduced this workflow in a builder project; the accepted forum result and current official documentation support the component and action pattern.

## Community evidence

### [Image Component Doesn't Work Outside of a Form](https://forum.adalo.com/t/image-compnent-doesnt-work-outside-of-a-form/54817/2)

The accepted reply directs custom-form builders to use Image Picker and map its value into the database action. The original author then confirmed the picker worked. Boundary: The source did not document platform-specific picker behavior or external-collection constraints.

## Sources

- [Adalo Forum accepted solution](https://forum.adalo.com/t/image-compnent-doesnt-work-outside-of-a-form/54817/2)
- [Adalo Help: Image Picker](https://help.adalo.com/component-basics/forms-and-fields/image-picker)
- [Adalo Help: Change Data](https://help.adalo.com/action-basics/creating-an-action-that-triggers-data-edit)
- [Adalo Help: Database](https://help.adalo.com/database)
- [Adalo Help: OCR Image Picker example](https://help.adalo.com/integrations/integromat/use-google-vision-to-ocr-an-image-and-store-the-text-results-in-an-adalo-record)

Markdown version: https://adalocado.com/answers/save-image-picker-upload-from-custom-form-adalo.md