How to use TWebOpenDialog and read a text fle?

WEB TMS WEB Core
1

I need to allow a user to load a text file from their local harddrive. TWebPicker works but applying boostrapping styles doesn't work well, plus it has a label to the right of the button to indicate the name of the file which I don't need. 

I'd like is to use a TWebButton that I can style using boostrap and to combine this with TWebOpenDialog. However I can't figure out how to use the TWebOpenDialog. I looked at the Blox demo code but it's dificult to understand and it combines methods from TTMSFNCUtils which I don't understand either. Does anyone have a simple example of how to use TWebOpenDialog that reads text from a file into a string variable?

What I've tried:

I can call OpenDialog.execute, that triggers the OnChange event but I'm not sure what I should put into the OnChange event. I've tried various things like using TStringList to load the file, or TTMSFNCUtils.LoadFile but I'm not able to get hold of the loaded text? One issue might be that I'm loading from the wrong directory but I can't figure out to set the current directory. There doesn't appear to be anything in WEBLib.Utils to set the current directory. 
2

I discovered that this code will load a text file:

  st := TStringList.Create;
  st.LoadFromFile ('http://localhost:8000/drawNetwork/model.json');
  showmessage (st.Text);

but I've no idea how to load a file from a different location. All saves that a user does go to the Downloads directory so I would like to be able to upload the files from there but using a TWebButton. I can load files using TWebFilePicker and TWebFileUpoad but I can't use these componentsbecause I can't style them to fit into the rest of the UI look and feel.  

Any suggestions?

3

You will understand that you cannot use another way to access local files than going via the file picker / file upload. You can't just execute code that would load just any local file without user interaction. That would imply a HUGE security hole in the browser where any web application could just access (steal?) local files from users. 
You can use CSS if you want to further customize the look & feel of either TWebFilePicker or TWebFileUpload.

4

Thanks for the reply. I think I see what you're saying, TWebFlePicker lets me load a file from anywhere on the local drive but only as a result of a user interaction. I noticed that in the regular expression demo that files are read using TStringlist.loadfromfile. I assume this is ok because the method loadFile is called from within the TWebCombo OnChange event? Presumably calling loadFile outside this context wouldn't work. 

 
I'll see what I can do with css on the web picker. I've tried boostrap but that didn't work well on the webpicker, the text rendering and background color is unaffected. 

5

I figured it out, it took a bit of effort. The problem is the picker component itself can't be visually customized easily.  Instead I overlay a TWebButton on top of the picker all inside a TWebHTMLDiv container. The last thing to do is make sure the button click event falls through to the picker underneath. The only thing I havn't implemented is a hover feature but that shouldn't be too dififcult.  


If anyone wants the CSS let me know.