Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Overview

On this lesson, we are going to review the “Upload” control that will help us to allocate files under an specific repository in Wayfast. File uploading is a feature for accepting and managing images, videos, PDFs, or other documents. A file uploader looks like a button on a website that opens a dialogue box where they can choose, attach, and submit files. Let’s understand how we can setup this control in simple steps!

Preconditions

1-Create a new table in SQL

Initially we need to create a new table in our database to connect the “Upload” action with the Wayfast repository where we are going to allocate the files.

Code Block
languagesql
CREATE TABLE [dbo].[Hola_Mundo_UploadFiles](
  [NEWGuid] [varchar](max) NULL,
  [RepositoryId] [int] NULL,
  [UserId] [int] NULL
  )
  GO

2-Create a new stored procedure

This stored procedure establish the connection between the table for upload and the Wayfast repository using the RepositoryID as key parameter to identify in which place this should be stored.

Code Block
CREATE PROCEDURE sp_Hola_Mundo_UploadFileInsert
@NEWGuid  varchar(max),
@RepositoryId int,
@UserId int,
AS

BEGIN
  INSERT Hola_Mundo_UploadFiles(NEWGuid,RepositoryId,UserId)
  SELECT @NEWGuid,@RepositoryId,@UserId
END

...

  • NEWGuid: This could be used to identify an specific session where certain files were uploaded.

  • RepositoryID: Like we explained in Step 1, it’s important to identify the connection to the Wayfast repository and the application that we are developed.

  • UserID: This parameter will help us to identify which user performed the upload action for each file.

Using this stored procedure, we will handle the file insertion on the table where we allocate all the files in the repository.

How to create an Upload control?

Now that we have the table and the stored procedure created, we can start creating the “Upload” control. Let’s synchronize first the objects created in database to make sure that they are now visible in Wayfast.

...

Once we click on “Select files…” button under the “Upload” control, automatically a popup will open our system directory to indicate which file needs to be uploaded to our repository.

...

In our later example, we created the control and the action to upload files. We know that this action trigger a return value as “FieldID” that we can use to make them visible, for example, on a grid table. Let’s check how we can show this information from “Upload” control in our application and make these files available to be listed or downloadable.

Preconditions

1-Create a new stored procedure to get all the files uploaded

This stored procedure will select all the files from Hola_Mundo_UploadFiles table and taking into consideration retrieving the information from the Wayfast repository where we stored the uploaded files.

...

Now that we insert the “RepositoryID” into the UploadFiles table, we can use the information to display all the files in grid table under any page in the application.

2-Create a new dataset to get the information from Upload Files table

Before start with the grid table, it’s necessary to create a new dataset in the page.

Click on “New Dataset” button

...

A popup is displayed on the screen and we need to complete the required fields based on the stored procedure that we created in the previous step. In this case, we are going to name this dataset as “DS_DocumentAtta” to identify this on controls.

...

After we identified the dataset, go to “Data Binding” tab and connect to the stored procedure that we created in database named sp_Hola_Mundo_UploadFileList

...

We can take note on the relationship between the “Upload” control and this dataset by clicking on “Add Relationship” button. Now we are ready to make the files visible in the screen.

...

How to list all the uploaded files in the application?

Navigate to “Controls” section and focus again on the “Upload” control previously created in the lesson.

...

Click on “Upload” link and navigate to “Data Binding” tab

...

In previous example, we analyzed the “Upload” action into the repository. Every time that we upload a file, the action stored a unique identity under the “FieldID” variable in the “Upload” control.

Info

This functionality is similar than other controls like Search or Dropdown List

This identity will be used to create a new action that will connect the stored procedure sp_Hola_Mundo_UploadFileInsert and display the new files in grid table that we can retrieve from Hola_Mundo_UploadFiles table.

...

As soon as we select the “Stored Procedure” in “Action Groups”, we can choose the “Execute Stored Procedure (FORM)” action. Then we can search and select the stored procedure sp_Hola_Mundo_UploadFileInsert that we mentioned in previous example.

In the parameters, we are going to look for the new identity as &NEWID, &FieldID and &UserID. Click on “Submit” button and verify that the action is created.

...

Now that we had the dataset and the new stored procedure to retrieve the file’s information from the table that we stored the objects when uploading those files, let’s create the grid table to display the information in the application.

We can set 2 columns, one to display the “Filename” and other one to download the file stored in our repository. Select the “Grid Column” control type and click on “New” button

...

A popup is displayed, complete the required fields in “General” tab information.

...

Click on “Data Binding” tab and connect this column to the dataset created as “DS_DocumentAtta”. Click on “Submit” button to save the changes.

Repeat the steps and create another “Grid Column” control to display the download icon related to the file.

...

In “Data Binding” tab, we are going to indicate the same dataset and also in the “Attachment” field, we will include the repository where we stored the uploaded files.

...

Navigate to the “Layout” tab and search for the icon that will trigger the “Download” file action.

...

Click on “Submit” button

...

Let’s review how the application works after all these new implementations that we learnt step by step. Click on “Preview” button

...

Below the “Attach Document” section, we can find the “File” and “Download” columns that shows the information from all the listed files that the user uploaded in the application. If the user wants to download, click on the icon and the file is automatically retrieved from the repository where we stored.

...

Recap

In the first part, we revised the preconditions to create a new table in database to stored all the uploaded files in our repository. We understand the important connection between the “Upload” control and the action for this purpose. In the second part, we dove into all the uploaded files in the repository and display them on a grid table that every user can check to download the stored information.