I need to add a feature to my experience that would allow an end user to upload a picture from their phone/computer to be displayed on a different, device specific experience page. Right now I have a text input block where the user can upload a public sharing link from Google Drive or Dropbox of a photo that is stored as a device attribute that is called to be displayed on a separate dashboard, but this image does not display on this other experience page. What other user friendly upload methods can I use to allow the user to be able to put whatever picture they want onto this experience page?
For the most part, Losant Experience Pages are standard HTML. To upload files, you’ll need to have an understanding of how Forms and File Inputs work.
This results in the contents of the file being POSTed to a Losant Endpoint, which then triggers a workflow with the file contents on the payload. The File: Create Node can then be used to save the file in Losant Files. Once it’s saved, you have a URL that can be used for Image elements on any other experience page.
The above technique works if the image is less than 256KB, since the maximum payload size in Losant is 256KB. To upload images larger than that, please checkout the File Upload Form template, which provides an implementation where the browser can upload directly to Files without going through a workflow first.
When it comes to associating a device to an image in Files, I usually add a tag to the device with the URL of its image. This way whenever I’m displaying the details for a device, I can find the URL to its image by looking at a device tag.