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.
  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.
  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:
  5. Configure the record as follows:
  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.