Crash Course 101
10 modules
5 weeks


Click to copy

Filepicker component in web-applications

In the new module, we will continue to explore the possibilities of business processes. We will figure out situations that are more complex than simple mathematical operations. We will study the operations of comparison, branching, and the operation of cycles. And also, we will figure out how to work with files and analyze their contents.

To do this, imagine that our task is to develop our own social network. Of course, not all at once, user profile design will be enough.

Overall design

Let's start with the overall design. We need to design the page and add the necessary elements. A similar problem was already solved during the work on the 6th module, so we will not explain all the steps again. Let this be another opportunity to consolidate knowledge in practice.

Imagine that a user can add an avatar to their profile, specify a login, and also fill in biographical information. But there is one condition - they cannot be entered directly (all input fields have the Disabled = true parameter); they must be loaded from files.


The Filepicker block can be used to work with files in AppMaster. It is great in most situations and allows you to specify various settings and choose the look. But the very fact of using it may not be suitable for the design that you plan to implement. Therefore, in our example, we will use a different method and create the ability to upload files without a Filepicker and even without any explicit buttons.

We will use the Container onClick trigger in the main container to do this. Any click on the container or its element will start this business process. And we should start by choosing files. To do this, we will use the Select Files block. Its peculiarity is that this block requires the user's participation for its execution. The process will proceed only after the user selects the files. Set the parameter Max files = 99 to be able to select multiple files.

The plan is for the user to submit two files simultaneously. The first is an image to set as an avatar. The second is an Excel (xlsx) file with the rest of the data.

Was this article helpful?
Still looking for an answer?
Join the Community