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 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)
- Be familiar with Remote Query Block
Refer to these Tutorial to learn how to:
- Authorize Write into a Cloud Collection
- Write into Cloud Collection from an App
- 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
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
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.
The call is configured to reach the
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!
The Image Name parameter syntax is:
In our app
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
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:
- No Response
In our case the configuration is as follow:
We refresh are Data Source (from Cloud Collection) and go back to our first view to show the list of photos.
We send a notification trying to help, likely the api_key isn't set properly.
Same as for failure although in that case it's more likely a network error, or our servers are down.. (unlikely :)
- Save Photo to Device
- Remote Query
- Write into a Cloud Collection from an app
- Add, Delete Update: Cloud Collection API