Main page

Uploading multiple file attachments

Description

This file upload example demonstrates an implementation of multiple file upload functionality.

Usage

1. Click the Add New link to add a new employee record.
2. Fill out the Add/Edit Employees form.
3. Click the Attach relevant documents link and use the pop-up dialog to upload multiple files.

Steps to recreate

Project Settings:

1. If using ASP, specify the available file upload component in the 'File Upload Component' property of the project in the Property window.

Page 1 (FileUpload):

1. Create a new page.
2. Use Grid and Record Builder to create the grid and record forms based on the employees table.
   • On step 2 of the builder select emp_name and title fields for the grid.
   • On step 6 of the builder select the fields you'd like to use for the record form.
3. Set the Remove Parameters property of the Employees1 record form to emp_id
4. Within the record form add Hidden control TempID and set its Data Type property to Integer .
5. Insert a new row into the record form (select "Insert row" from the context menu shown on the right mouse click) and move it below the zip field row (ALT + Arrow Down).
6. In the left cell of the new row, enter the text 'Relevant documents', then in the right cell insert a table (from the "Table" toolbar or menu) with the following parameters: Rows=1, Column=1, Border size=0.
7. Switch to HTML mode and within the <TABLE> tag add the attribute id="AttachedFiles".
8. Insert new label called AttachedFiles after the <TABLE> tag and set its Content property to HTML.
9. Insert new link inside the new table and set its Href Source property to javascript:OpenPopUpList(), Preserve Parameters property to None, and Default Value property to "Attach relevant documents".
10. Create or copy programming code for the record's Before Show, After Execute Insert, After Execute Update, Before Execute Delete events, as shown in the example.
11. Make cosmetic changes as needed, by modifying the text and captions within the HTML.

Page 2 (Attachment):

1. Create a new page.
2. Use Grid and Record Builder to create the grid and record forms based on the files table.
   • On step 2 of the builder select file_name and file_date_upload fields for the grid.
   • On step 5 of the builder select file_name as the link field.
   • On Step 6 of the Builder add file_name, file_owner_id, file_date_upload, file_status and file_name to the "Fields for the Record" field. Also select Text Box as the Control Type for the file_name and select Hidden as the Control Type for all other fields.
   • On step 7 check Allow Insert only.
3. Add the link control at the bottom of the page and set its Href Source property to javascript:CloseWindowAndReload();, Preserve Parameters property to None, and Default Value property to "Close window".
4. Configure the grid as follows:
   • Remove the last row of the grid.
   • Insert a new colum into the grid (select "Insert Column" from the context menu) and move it to the right (ALT + Arrow Right).
   • In the top cell of the new column, enter the text 'Delete', then in the lower cell add DeleteLink link and set its Href Source property to the current page, Preserve Parameters property to GET, and Default Value property to "Delete". Also add link parameter with the following properties: Data Source Type = DataSource Column, Parameter Source = file_id , and Parameter name = del.
   • Add the Get Original Filename action to the Before Show event of the file_name link (in the grid) and set its Href Type property to Database, Href Source property to file_name , and set its Preserve Parameters property to None.
   • Switch to HTML mode and add ../files/ into the href attribute of the file_name link, then add the target="_blank" attribute into the same link.
   • Add onclick="DeleteAttachment(this);return false;" into the <a href> tag of the DeleteLink link.
5. Configure the record as follows:
   • Remove file_name TextBox
   • Insert FileUpload component FileUpload1 from Forms tab of the Toolbox panel and set its  properties as follows: Caption = Name, Control Source = file_name, File Folder = ../files/ , Required = Yes , Allowed File Masks= *.jpg;*.gif
6. Create or copy programming code for the page's After Initialize, grid's Before Show and record's Before Insert events as shown in the example.

Database Tables used

Database: Intranet

Tables: employees, files

Programming Notes

Page 1

The record form's Before Show event is used to show the list of attached files (in Edit mode).

The record form's After Execute Insert and After Execute Update events are used to update the "files" table by assiging file_owner_id (employee) to each uploaded file.

The record form's After Execute Update event is used to update the necessary files records.

The record form's Before Execute Delete event is used to delete all records from the files table that are related to the deleted employee (file owner).

Page 2

The Get Original Filename action in Before Show event of a label is used to show the original file name without unique prefix.

The record form's Before Insert event is used to assign a value to the files_owner_id field.

The After Initialize event of the page is used to cleanup temporary files.