Enable End Users to Upload Files
We've been working on this article. Please let us know how useful this new version is by voting.
Use the Upload widget to allow users to upload files, such as photos to your application.
Reactive Web and Mobile
To upload a file in Reactive Web and Mobile apps:
-
In Service Studio, in the Toolbox, search for
Upload.The Upload widget is displayed.
-
Drag the Upload widget into the Main Content area of your screen.
By default, the Upload widget contains an icon and text placeholder.
-
To hold the file content, create a local variable by right-clicking on your screen name and selecting Add Local Variable. Enter a name for the variable and set the data type to Binary Data.
-
Repeat step 3 to create a local variable to hold the file name, but in this case, select Text as the data type.
-
Select the Upload widget, and on the Properties tab, set the File Content property to the local variable you created (BinaryDataVar) to hold the file content and set the File Name property to the local variable you created (TextVar) to hold the file name.
Save the uploaded file
There are several ways to save the uploaded file. For example, you can use a Client Action to call a Server Action to send the file to the server. To do this:
-
Create a Button or Link, and inside the associated Client Action, call the Server Action.
-
Ensure the Server Action has an input parameter to accept the contents of the BinaryDataVar variable.
-
Inside the Server Action, create the logic to process or store the uploaded file.
After following these steps and publishing the module, you can test the pattern in your app.
Traditional Web
To upload a file in a Traditional Web app:
-
In Service Studio, in the Toolbox, search for
Upload.The Upload widget is displayed.
-
Drag the Upload widget into the Main Content area of your screen.
Save the uploaded file
There are several ways to save the uploaded file. For example, you can add a Button to the screen that executes a screen action and the logic defined in the screen action saves the file. To save the uploaded file, inside the Screen Action flow, use the following Runtime Properties of the Upload widget:
Upload.Content: The file contentUpload.Filename: The file nameUpload.Type: The file type
After following these steps and publishing the module, you can test the pattern in your app.