CodeCharge Studio

File Upload Overview

Description

The File Upload component is used to upload files from a remote machine to a specified location on the Web server. The component can be used to allow users to upload files to the server, for example. The component uses an input control of type file (<input type="file">) which enables the end user to browse and select files on their local machine for uploading. When a file is selected and submitted for uploading, the File Upload component checks that the file size does not exceed a specified limit. The component can also be configured to allow or disallow certain file types from being uploaded to the server. After a file is successfuploadlly uploaded to the server, it is assigned a name in the form of "yyyymmddHHnnss#.<originalName>", where 'yyyymmddHHnnss' is the date-time value indicating the time when the file was uploaded. This date-time value ensures that the uploaded files have unique names.

The File Upload component can be added to a Record form or an Editable Grid. Both of these forms are capable of submitting values unlike a Grid form, which does not submit any values.

To add a File Upload component, use the File Upload option located under the Forms tab of the Toolbox.

Note: ASP 3.0 does not have native support for uploading files. When using ASP it is necessary to install third party software to perform the upload when invoked by ASP code. However, this is not necessary if you decide to use the script based pure ASP upload method. CodeCharge Studio is able to work with the following upload components:

A. COM based components

Persits Upload

CLSID: Persits.Upload
Company: Persits Software, Inc.
URL: http://www.persits.com

ActiveFile Upload

CLSID: ActiveFile.Post
Company: Infomentum
URL: http://www.infomentum.com

ABCUpload

CLSID: ABCUpload4.XForm
Company:WebSupergoo
URL: http://www.websupergoo.com

Dundas Upload

CLSID: Dundas.Upload.2
Company:Dundas Software
URL: http://www.dundas.com

B. Script based components (does not require installation of a third party component).

Pure ASP Upload

Author: Jacob "Beezle" Gilley
Email:avis7@airmail.net
Modified by: Will Bickford
Email: wbic16@hotmail.com

Script Upload using ADODB.Stream

The Uploading Script which uses ADODB.Stream is faster than the script based upload components. The secret to the speed lies within ADO's Recordset and Stream objects. It is recommended to use "ASP/VBScript Upload using ADODB.Stream", if COM based components are not available.

If using one of the COM based components, the component must be installed and properly configured on the server where the ASP pages will be published. If an ASP project is going to have one or more File Upload components in its pages, the File Upload Component property of the project must be set to indicate the file upload component that is available on the server. To locate this File Upload Component property, click on the project name in the Project Explorer window so that the project properties are exposed in the Properties window. If you set the File Upload property of the project to blank, then the File Upload code will not be generated in Common Files.

Structure of the File Upload Component

When viewed in Design mode, the File Upload component appears as the following:

HTML Code

<!-- BEGIN FileUpload name -->
  <input type="hidden" name="{ControlName}" value="{State}">
  <!-- BEGIN Info --> {FileName} {FileSize} bytes <!-- END Info -->
  <!-- BEGIN Upload --><input type="file" name="{FileControl}"><!-- END Upload -->
  <!-- BEGIN DeleteControl --> Delete <input type="checkbox" name="{DeleteControl}" {DeleteChecked}><!-- END DeleteControl -->
<!-- END FileUpload name -->

The File Upload component is made up of the following elements.

File Input Control

The first element in the File Upload component is a file input control. The HTML code for the file input control is:

<input type= "file" name= "{ControlName}">

The file input control allows the user to select a file from their local machine. The user views a page with the control by clicking on the Browse... button to open a dialog window where the user can navigate to and select a file from their local machine.

The file that is selected will then be uploaded to the server when the form is submitted. Before the file is stored on the server, the File Upload component performs validation checks to ensure that the file does not exceed a specified size limit or is of a type that is not allowed. If the validation fails, the form will appear again with an error message and the file will not be saved to the server.

Note that the file input control appears when a new record is being inserted or there is no existing file associated with the record being viewed. If the record being viewed has an existing file, the File Upload component will display information about the file and hide the file input control.

The file input control is always displayed if the Required property of the form is set to 'Yes'. In this case the information about the file and file input control is shown.

Hidden Input Control

The File Upload component also contains a hidden input control. The HTML code for the hidden input control is:

<input type= "hidden" value= "{ActualFileName} name= "{ControlName}">

This hidden input control is used when a record containing an existing file is being viewed. In this case, the value of the input control is set to the actual filename of the file that is currently present.  The user does not see the hidden input control but the value it contains is used by the form when the form is submitted. This hidden input control should not be altered or deleted or the component will not fuploadnction properly.

Template Variables

The File Upload component also contains two template variables called FileName and FileSize.

When the page is viewed by the user, these two variables are substituted with the following values:

The FileName and FileSize template variables are empty whenever a new record is being added or an existing record does not have an associated file. The variables will only appear when there is a file already associated with the current record. These two template variables should not be altered or deleted or the component will not fuploadnction properly.

Delete Checkbox

The last element in the File Upload component is a checkbox which is used to indicate whether an existing file should be deleted from the server.

The checkbox will only appear if the current record being viewed is associated with an existing file. When the checkbox is checked and the form is submitted using the Submit or Update button, the file will be deleted from the server.

Note: if you want to delete the file only, you should use the Update button of the form with the checkbox checked.

However, if you want to delete the file as well as the database record associated with it, you should use the Delete button of the form.

See also

File Upload Reference


On-line, printable versions and updates