File picker

The File Picker component is used to upload files.

It is typically grouped with a number of other components in a box.

The following shows an example of how to implement a file-picker in your design.

The procedure consists of these steps:

1. Group a File Picker component within a box
2. Add and set up an upload button
3. Open the files upload dialog on a button click
4. Retrieve the file name and location
5. Display image files and file names
6. Test the application

Group a File Picker component within a box

1. Add a File Picker component to the page.

2. Right-click on the component, and then select Group.

3. From the outline, select the File Picker component, and then click on to open the FilePicker properties panel.

4. Set up the File Picker layout as follows:

   • Select self-directed.
   • From the drop-down list above Vertical, select Top & Bottom.
   • From the drop-down list above Horizontal, select Left & Right.
   • Set the relative position of the file picker edges to 0px as shown in the figure below.
   

5. Lock the File Picker component by right-clicking it and selecting Lock.

6. From the outline, select Box.

7. In the Box properties panel, change the border style to dashed and make the border visible.

   

Add and set up an upload button

Let's add and set up an upload button:

1. Add a Button component to the page, to an appropriate place inside the Box component.

2. In the Button properties panel, change the Caption value to "Upload" or similar.

3. Add the Button component to the existing group by moving it into Box in the outline.

Open the files upload dialog on a button click

Follow these steps to configure the files-upload dialog to open by clicking on a button:

1. In the outline, select the File Picker component, and then bind the Show files dialog checkbox to cell A1.

2. In cell A2, use the below formula:

   =SET_CELL_VALUE(A1,true)

   

   Because the function SET_CELL_VALUE() is always lazy, the cell automatically becomes an action cell. When the cell evaluation is triggered, the function sets the value of cell A1 to True, upon which the files-upload dialog opens.

3. In the Button properties panel, click on the Events button and bind the onClick event to cell A2.

Retrieve the file name and location

Follow these steps to display an image file and the file name on upload:

1. In cell A3, use the lazy E() function to return the OnFilesReady event as a frame.

   =E()

   

2. Bind the File Picker component's OnFileReady event to cell A3.

3. In cell B4, use the GRAB() function to retrieve the name of the file from the frame returned on a file-ready event.

   =GRAB(A3, "$..accepted_files..name")

   

4. In cell B5, use the GRAB() function to retrieve the location of the file from the frame returned on a file-ready event.

   =GRAB(A3, "$..accepted_files..data")

   

Display image files and file names

1. Add an Image component to the page, and then, in the outline, move the component into Box.

2. Set up the Image component's layout as follows:

   • Select self-directed.
   • From the drop-down list above Vertical, select Top & Bottom.
   • From the drop-down list above Horizontal, select Left & Right.
   • Set the relative position of the image edges to 0px, as shown in the figure below.
   

3. Right-click the Image component, and then select Order > Send to back to send the image behind all the components in the group.

4. Lock the Image component by right-clicking it and selecting Lock.

5. Select the Image component and bind its URL property value to cell B5.

1. Add a Text component to the page and move it to any place within the borders of the box.

2. If needed, adjust the Text component size.

3. Select the Text component, and then, in the Text properties panel, delete the default Text property value.

4. Add the Text component to the component group by moving it into Box in the outline.

5. Select the Text component and bind its Text value to cell B4.

6. Select the File Picker component, and then, in the FilePicker properties panel, under Upload Behavior, select Upload files to cloud. The cloud storage https://files.mintdata.com is used for this option.

Test the application

1. Click Preview.

2. Try uploading an image file by clicking the upload button and by dragging an image file to the component group area. After the file is uploaded, make sure the file name is displayed, and the image is displayed in the background.