Save Image to Device

The following tutorial will show you how to use the "Select a Photo" and "Save Image to Device" Actions to take a photo, display the photo in your app and save the photo to a device's gallery/photo folder.


To save a Photo into a Cloud Collection: 

Learn with a Tutorial App: Save Photo

1. Select a Photo

To take a photo we use the tap action "Select a Photo".

The "Select a Photo" Action will make the device prompt a user to either take a picture or select a photo from the device's gallery.

In this Action we define a key/variable in the field "Selected Photo Key" to store the photo that the user selects or captures.

We can use this key/variable to insert the photo into any image block inside our app


2. Put Image in Block

To put the captured photo in an Image Block we create a Custom Block using the Image Block.

In the 'Configuration' tab of the Image Block, click on "Image Source" to bring up the dialog to select an image.


In the Image Source, Select 'Data Source' as an Image Source.


When in Data Source, select "Expression" and then the pencil to bring up a screen (shown below) where we can access the key/variable we just created in the Tap Action "Select a Photo"

3. New View

We then create a new view and add our new custom Image Block to it. This view hold the image we have taken with the action "Select a Photo" since we defined the Custom Block's Image Source to be the key/variable from the "Select a Photo" Action. 

4. Select Photo Done EVENT

In the view that has the Action "Select a Photo" we go to Edit View -> Events. There we see the Actions "Select Photo Done" and "Select Photo Cancel". Here put an Action "Switch to Another View" and we switch to the view we just created with the image block. We can also put a pop-up alert that tells the user that that taking the photo was a success.

5. Save Image to Device

We then go to the Custom Image Bock we created and go to the Events tab and add a tap Action "Save Image to Device".

In the From Block field, we point to the Custom Image block that contains our key/variable (this is the same block for which we are defining the tap Action).


6. App Level Event

We then go to Edit App/Events and there we can add an Action to "Image Save Success" and "Image Save Failure" events. Here we put the Action "Show Alert Popup" so we can test and also alert the user that the action succeeded or failed. We can also stack any other action we may need here.


Learn More

- Tutorial App: Save Photo into Cloud Collection