In an application, there may be situations where your end-users need to upload files such as, for example, their profile picture. OutSystems provides two widgets for this effect:
File Select (in Mobile Apps)
Upload (in Web Apps)
In a Mobile app, do the following:
- Drag the File Selector widget from the widgets toolbar into the Form;
- Set the following widget properties:
File Content: bind to the variable that holds the file content;
File Name: bind to the variable that holds the filename;
Accept: choose the file type.
In a Web app, do the following:
- Drag the Upload widget from the widgets toolbar into the Form;
- Assign the following runtime properties to a variable that is sent to the server:
Upload.Content: the file content;
Upload.Filename: the name of the file;
Upload.Type: the file extension.
Ensure the request to the server is a submit.
These widgets are provided by default in the Widgets Toolbox, but you can use other system widgets provided by Silk (in Mobile Apps) and RichWidgets (in Web Apps).
You can also find in the Forge, other upload widgets developed by the OutSystems community.
Example in a Mobile App
The GoOut is a mobile application to find, review, and rate places. We want to allow adding a photo when writing a review. For that, do the following:
- Open the WriteReview screen and add a local variable called ReviewPhoto;
- Drag and drop a File Selector widget to the screen, below the Comment;
- Set property Image Content to ReviewPhoto.Content;
- Set width of the File Selector to ‘4 col’;
- Publish and test.
Example in a Web App
In the GoOutWeb app, the Web version of the GoOut app, we want to allow end-users to upload their profile picture.
In the Profile screen, to edit the profile, we already have an Image and the ‘Upload Photo’ text linking to the UploadPhoto screen.
As for the UploadPhoto screen, it already has:
- A ProfileId input parameter with the Profile identifier;
- A Preparation that fetches the profile record based on the ProfileId;
- A form with an Upload and Cancel buttons:
- The Upload button updates the profile record;
- The Cancel button navigates back to the Profile screen.
To upload a photo, do the following:
- In the UploadPhoto screen, drag an Upload widget into the form, above the buttons;
- In the Save action, assign the photo to the profile before updating it:
Form.Record.Profile.Photo = Upload1.Content
- Ensure that the Method property of the Upload button is set to ‘Submit’;
- Publish and test.