Save Photos into a Cloud Collection


Introduction

This Tutorial show how to save photo into a Cloud Collection using a REST call.

The Tutorial app let user take a photo or select one from their photo library.


How to upload a File into Cloud Collection from a Web View (CMS)


Install the Tutorial App

This app also installs a Cloud Collection 'Saved Photo' accessible under the 'Connect' tab.
This is your copy, feel free to edit that collection how you like.

HOWEVER if you change the name of the existing columns it will break the Tutorial app. 

 You can always reinstall it, not an issue but better off knowing this! (The Remote Query uses the actual Column name as reference to save assets)

 
Click here to install SAVE PHOTO in your workspace.


Requirement

- Be familiar with Remote Query Block
- Layer
Refer to these Tutorial to learn how to:
- Authorize Write into a Cloud Collection
 - Write into Cloud Collection from an App


App Overview

  • This first view of the app firsts list the content of the Cloud Collection.
  • On that View the Button "1. Upload Image" triggers a 'Select Photo



IMPORTANT

The 'Select a Photo' action, triggers View Level Event

  • Select Photo Done
  • Select Photo Cancel
That means the next step taken by the app is governed by these 2 event.

View Level Events accessible from the Edit View Tab

The 'Select Photo Done' events triggers a Switch to a new view '2.Turn photo into Custom Block'



Trick about Image Upload

To Upload an image into a Cloud Collection, that Image needs to be passed in the form of a Custom Block.


Creating a Custom Block for the Image


This screen turns our Image captured by the Select Action into a Custom Block.
 We will use that Custom Block as a parameter for the Remote Query to upload the image.


Asking for Photo Name
In this View we also ask the user to enter a name for the photo.
This name will be saved, alongside the picture, into the Cloud Collection.

This is done using a Text Input Block.



We then use the Text Input Block Event 'Done' to trigger the Image Upload by adding a Layer



Remote Query to Upload an Image

The Done Event brings the Layer 'Remote Query Layer', accessible in the left hand side App tree panel.
 
That Layer has one single function which is to bring up the Remote Query Block.
Once active the Remote Query starts the REST call to the Cloud Collection API

The call is configured to reach the 
Cloud Collection API Address where we can Add, Delete or Update content from an app.
 
End point: https://builder.eachscape.com/data/api/v2.xml

 
The configuration of the URL and Method:




Image Parameter section of the Remote Query Block

This is where we use the Custom Block we created above

For 'Image Block' we select the Custom Block 'Captured Image' that we previously created.

 This is a tricky part, but hopefully it all make sense, ping us on Public question (bottom of this Tutorial) if it remains unclear!



Image Name

 The Image Name parameter syntax is:
 
values[name_of_cloud_collection_column][asset]
 In our app

values[Photo][asset]
 
values indicates to the system to look for a column it has NO bracket.
The cloud collection column (in our example it's named 'Photo' has brackets.
the indicator [asset] tells the system it's an actual asset and not text, it has brackets
 

The Image Filename field can be anything, but
it has to have an image extension: .png or .jpg

Done.

You are now able to save an image into Cloud Collection.

 The rest of the configuration is standard Remote Query Block configuration, with actions associated to the 3 possible Events of the Remote Query Block:
 

  • Success
  • Failure
  • No Response

In our case the configuration is as follow:



 

Success:
 We refresh are Data Source (from Cloud Collection) and go back to our first view to show the list of photos.

Failure:
We send a notification trying to help, likely the api_key isn't set properly.

No Response:
Same as for failure although in that case it's more likely a network error, or our servers are down.. (unlikely :)

Learn More
- Save Photo to Device
- Remote Query
- Write into a Cloud Collection from an app
- Add, Delete Update: Cloud Collection API