TMS WEB Core: Selecting a local file with a dialog

Dialogs for file selection are very simple to use in the VCL and have been a part of Delphi since Delphi 1. Of course, the VCL made sure that the latest incarnation of the dialog is used with regard to the underlying operating system.

The same holds true when you want to select a file from the local file system in a web application written in TMS WEB Core. The difference is that your operating system is the browser and it will have to deliver the dialog for you. TMS WEB Core offers the TWebOpenDialog component that you can drop on a form:

I also dropped a button and a memo control on the form. When clicking the button, we want to give the user the chance to select a couple of files and list them in the memo control. To allow multi-selection I set the MultiFile property of the dialog control to True.

There is one key concept of web programming to remember when implementing this: All calls are non-blocking. That means even if the TWebOpenDialog offers a method Execute that is similar to the VCL, the method does not wait for the user to close the dialog. You cannot read any files or the closing state of the dialog after Execute. Instead, implement the OnChange event which is triggered whenever the selected file or list of selected files changed. Then, you can iterate the Files property with the list of files and add them to the memo control.

procedure TForm1.DialogChange(Sender: TObject);
var
 i : Integer;

begin
  for i := 0 to  Dialog.Files.Count - 1 do
  begin
    WebMemo1.Lines.Add( Dialog.Files[i].Name) ;
  end;
end;

procedure TForm1.WebButton1Click(Sender: TObject);
begin
  Dialog.Execute;
end;