Get the filename(s) picked by webFilePicker

WEB TMS WEB Core
1

Am trying to inspect the filenames picked by WebFilePicker, prior to upload them.
But I don't find a way to get the filename and put it into a string for comparison.

Also would like to assign the file to this component on code, not by the user picking a file with the mouse.

In the docs, it just says that the files picked are in a TFiles array, but have looked everywhere and don't find information pertaining what I need to do.

For some reason my Delphi 11 and 12 IDEs do not show any tooltip and many "find declarations" simply don't work with my TMS web core apps, so am shooting in the dark.

Thanks

2

You can get the filename(s) via

webfilepicker.Files[x].FileObject.name

You cannot assign this file object. The ability to do so would impose a big security breach of the browser.

3

Thank you!

4

And how can I get the full local path and filename of the file picked? (is a single file pick, a photo)

What am trying to achieve is to pick a photo, show it on an WebImageControl as a preview, and if the user likes it, then it will actually do the upload to the server.

Currently I can show the previously uploaded photo that is on the server already, but this confuses the user, which assumes visually that the new photo (not uploaded yet) will not be updated on the server because he don't see it after picking it.

5

Solved it!
I read about the security concerns when exposing local paths and I experimented with the dataURL property.

Here is the way I found to show a preview of the image prior to uploading it:

procedure TForm1.WebFilePicker1Change(Sender: TObject);
fn : string ;
begin
if webFilepicker1.Files.Count > 0 then
begin
webfilepicker1.Files[0].GetFileAsDataURL;
webLabel1.caption := WebFilePicker1.files[0].FileObject Name;
end;
end;

procedure TForm1.WebFilePicker1GetFileAsDataURL(Sender: TObject;
AFileIndex: Integer; AURL: string);
begin
WebImageControl1.URL := AURL;
end;

1 Like