Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

 

 

OutSystems

Enable End Users to Upload Files

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • 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:

    1. In Service Studio, in the Toolbox, search for Upload.

      The Upload widget is displayed.

      Upload widget

    2. Drag the Upload widget into the Main Content area of your screen.

      Drag widget onto screen

      By default, the Upload widget contains an icon and text placeholder.

    3. 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.

      Add local variable

    4. Repeat step 3 to create a local variable to hold the file name, but in this case, select Text as the data type.

      Add local variable

    5. 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.

      Set File Content and File Name variables

    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:

    1. Create a Button or Link, and inside the associated Client Action, call the Server Action.

    2. Ensure the Server Action has an input parameter to accept the contents of the BinaryDataVar variable.

    3. 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:

    1. In Service Studio, in the Toolbox, search for Upload.

      The Upload widget is displayed.

      Upload widget

    2. Drag the Upload widget into the Main Content area of your screen.

      Drag widget onto 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 content
    • Upload.Filename: The file name
    • Upload.Type: The file type

    After following these steps and publishing the module, you can test the pattern in your app.