TWebFileUpload

Description

The file upload component allows the user to drag a local file on the web form or select it via a file open dialog. Either a single file can be uploaded or multiple files.

Properties for TWebFileUpload

Property	Description
Caption	Sets the text to be displayed in the upload component for the button to open the file dialog.
DragCaption	Sets the text to be displayed under the file drag area.
Files	This is a list of files picked. The list consists of objects of the TFile type.
Multifile	When true, it is allowed to pick or drag multiple files.
ShowFiles	When true, the filenames for the dragged or picked files are shown in the control.

HTML template tag

The HTML tag the component can be associated with in an HTML template. Assign the ID attribute with a unique value and set the identical value to the ElementID property. Detailed information can be found in the Use of HTML templates topic.

HTML tag	<FORM ID=”UniqueID”></FORM>
ElementID	UniqueID

Events for TWebFileUpload

Property	Description
OnDroppedFiles	Event triggered when one or multiple files were dropped or picked. The filenames are returned via the AFileList stringlist.
OnGetFileAsArrayBuffer	Event triggered when the the retrieval or a file as an array buffer is completed. Retrieval of the file is done programmatically by calling WebFileUpload.Files[index].GetFileAsArrayBuffer
OnGetFileAsText	Event triggered when the the retrieval or a file as text is completed. Retrieval of the file is done programmatically by calling WebFileUpload.Files[index].GetFileAsText
OnGetFileAsBase64	Event triggered when the the retrieval or a file as base64 encoded text is completed. Retrieval of the file is done programmatically by calling WebFileUpload.Files[index].GetFileAsBase64
OnGetFileAsDataURL	Event triggered when the the retrieval or a file as Data URL is completed. Retrieval of the file is done programmatically by calling WebFileUpload.Files[index].GetFileAsDataURL
OnUploadFileComplete	Event triggered when an upload of the file is completed. The upload is started with WebFileUpload.Files[index].Upload(AAction);
OnUploadFileResponseComplete	Event triggered when an upload of the file is completed. The upload is started with This event returns the JavaScript request object as well as response as text
OnUploadFileAbort	Event triggered when an upload of the file is aborted
OnUploadFileError	Event triggered when an error has occurred during a file upload
OnUploadFileProgress	Event triggered to indicate the progress of an upload transfer. The event returns the number of bytes transferred from the total number of bytes to transfer

Properties for TFile

TFile is the item in the TWebFileUpload or TWebFilePicker Files collection. After a local file was picked, the Files collection contains the list of files picked and allows access to the file information and file data.

Property	Description
FileObject: TJSHTMLFile	Reference to theHTML TJSHTMLFile object giving accesss to the local file.
Name: string	Returns the name of the local file.
MimeType: string	Returns the MIME type of the local file.
Modified: TDateTime	Returns the file last modified date of the local file.
Size: integer	Returns the size of the local file.
OnGetFileAsText	Event triggered when the retrieval of the local file as text is ready
OnGetFileAsBase64	Event triggered when the retrieval of the local file as base64 encoded data is ready
OnGetFileAsDataURL	Event triggered when the retrieval of the local file as Data URL is ready
OnGetFileAsArrayBuffer	Event triggered when the retrieval of the local file as array buffer is ready

Methods for TFile

Property	Description
FileAsText: TJSPromise	Async method to get file as text file
FileAsText(AEncoding:string): TJSPromise	Async method to get file as text file with optional file encoding specified
FileAsBase64: TJSPromise	Async method to get binary file as base64 string
FileAsStream: TJSPromise	Async method to get file as TMemoryStream
FileAsDataURL: TJSPromise	Async method to get file as data URL
FileAsArrayBuffer: TJSPromise	Async method to get binary file as TJSArrayBuffer
GetFileAsText	Starts to retrieve the content of the file as text. When ready the OnGetFileAsText event is triggered at TWebFileUpload or TWebFilePicker level.
GetFileAsText(AEncoding: string)	Overload of GetFileAsText where the text file encoding format can be specified.
GetFileAsText(GetAsString: TGetAsStringProc);	Overload of GetFileAsText that allows the use of an anonymous method to handle the download result.
GetFileAsArrayBuffer	Starts to retrieve the content of the file as binary data (JavaScript array buffer). When ready the OnGetFileAsArrayBuffer event is triggered at TWebFileUpload or TWebFilePicker level.
GetFileAsArrayBuffer (GetAsArrayBuffer: TGetAsArrayBufferProc);	Overload of GetFileAsArrayBuffer that allows the use of an anonymous method to handle the download result.
GetFileAsBase64	Starts to retrieve the content of the file as base64 encode text. When ready the OnGetFileAsBase64 event is triggered at TWebFileUpload or TWebFilePicker level.
GetFileAsBase64(GetAsString: TGetAsStringProc);	Overload of GetFileAsBase64 that allows the use of an anonymous method to handle the download result.
GetFileAsDataURL	Starts to retrieve the content of the file as string that can be used for a data URL for a HTML IMGelement
GetFileAsDataURL(GetAsString: TGetAsStringProc);	Overload of GetFileAsDataURL that allows the use of an anonymous method to handle the download result.
GetFileAsStream	Starts to retrieve the content of the file as stream triggering the event OnGetFileAsStream returning the stream
GetFileAsStream(GetAsStream: TGetAsStreamProc)	Overload of GetFileAsStream that allows the use of an anonymous method to handle the download result.
Upload(AAction: string);	Perform an upload of a file to a specific upload handler URL AAction
AbortUpload: boolean;	When an upload request is ongoing, it can be aborted by calling AbortUpload. Returns true when this was executed.

Example: uploading a file

To upload a file to a server, from the WebFileUpload.OnChange event or from another event, call

WebFileUpload1.Files[0].Upload('http://localhost:8088/upload');

to upload the first file picked by the TWebFileUpload to the server (assuming there is server code listening on port 8088 to handle via the upload action.