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.

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.

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

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.

We can use these parameters to identify different information about the upload files. For example:

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

Click on “End Task” button related to Project’s requirement.

This step is only needed for synchronization of the new Table and Stored Procedure generated in DB.

A popup is displayed, click on “Synchronize” button.

Navigate to “Project Pages” at the top menu and enter to the page where we are going to work in this lesson. Select the “Upload” control type.

Click “New” button and popup is displayed on the screen with the control’s required fields to complete this functionality.

On “General” tab, it’s important to identify the default value as “FieldID” in the control. in next steps we will understand the importance to connect the “Upload” action with the objects previously created in database.

In the meantime, let’s continue with “Data Binding” tab. In this section we are not seeing fields to connect to dataset or stored procedures like we used to in control’s creation. We only have actions to connect this control.

Wayfast allow us to create a new action at the same time that we create the control. Click on “New Action”

Select “Action Group” as “Upload” type and then we can choose if we want to point the “Repository Type” between different options:

• Wayfast: This default repository guarantee that the information will be maintain by our servers. We need to setup manually all the parameters for this action like it’s displayed in the example.

• Custom: This option requires all the information related to the database, schema, table and other parameters that we need to create before setup this action.

After we select the option, let’s check the parameters:

We can complete all the required fields for this action and click on “Submit” button. The new action is now linked to the “Upload” control.

At this point, the action associated to the control will allow us to storage the files in the repository. Early in the “General” tab, we mentioned the importance to identify the default value in “Upload” control, now that we finished with the setup, we can say that the triggered action automatically will return a “FieldID” value for each uploaded file. This is something important if we want to display all the files uploaded in another page using a grid table.

Don’t forget to click on “Submit” button to create our new “Upload” control and finish the process.

Let’s click on “Preview” button to verify the control in the app

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 retrieving the information from the Wayfast repository where we stored the uploaded files.

CREATE PROCEDURE sp_Hola_Mundo_UploadFileList
AS
  BEGIN
    SELECT a.*,b.[FileName]
      FROM Hola_Mundo_UploadFiles a with(nolock)
      INNER JOIN Asignet2.dbo.Repository_FileRepository b with(nolock) on a.repositoryId=b.RepositoryID
  END
GO

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.

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.

How to display an image uploaded into a Wayfast Repository?

select Img='<img src=image.ashk?IdRepositorio='+Cast(@RepositoryId, Varchar)

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.