How do I use the TWebOpenDialog in Delphi TMS Web Core?

Question

I dropped the component onto the form and wrote the following code:

OpenDialog.Execute;
WebLabel1.Caption := OpenDialog.FileName;

It opens the TWebOpenDialog, but it doesn't put the FileName into the Caption of the label.

It seems like OpenDialog.FileName is empty, although when I Execute again, then the OpenDialog.FileName contains a FileName, but it's the FileName of the previous select.

How do you use the TWebOpenDialog in TMS Web Core?

Answer 1

In TMS Web Core (JavaScript), each line is asynchronous and/or non-blocking.

So Execute doesn't wait for the user to select a file, it immediately runs the next line which is WebLabel1.Caption := OpenDialog.FileName; and thus the FileName is empty.

To overcome this, you need to use the onChange event on the TWebOpenDialog component. So you can add WebLabel1.Caption := OpenDialog.Files[0].Name; into the onChange event to get the FileName:

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

procedure TForm1.OpenDialogChange(Sender: TObject);
begin
  WebLabel1.Caption := OpenDialog.Files[0].Name;
end;

Source: https://youtu.be/-tHOyl7NZho?si=cB1cs8MHeIKo3P_0