Jump to content
Sign in to follow this  

Drag and Drop a Local File

Recommended Posts

First I have been trying to use versions of SMS for several years and have gotten frustrated and given up.  With this latest release I have made it further in an hour than I have in all other attempts combined.  The unit structure is finally clean and I can find what I want!  Great work.  If I can get past the last few barriers I will be purchasing a license for sure.  

What I want to do is be able to drag a text file from the file system (or have a "file open" dialog) and do some manipulation on it then write a version back to the same folder the source file came from.  This is mainly for desktop use.

How can I accomplish this?  



Share this post

Link to post
Share on other sites

Quick (partial) reply :

Have a form with an editbox, a button and a memo.

Set the inputtype of the editbox to 'file', this gives you a FileDialog window.

  W3EditBox1.InputType := itFile;


Set up an change handler on the editbox

  W3EditBox1.OnChanged := procedure(sender:TObject)
    FileName := W3EditBox1.Text;


In the click-handler of the button do an ajax-call to the file you selected in the FileDialog and fill the memo with the result

  var FHttp := TW3HttpRequest.Create;
  FHttp.OnDataReady := lambda
    W3Memo1.Text := FHttp.ResponseText;


There are some severe limitations if you execute this in the browser

  • after selecting a file, the editbox will display the filename, however the content of the EditBox1.Text property will be "C:\fakepath\" + filename
  • you can get rid of the fakepath prefix :
    FileName := StrAfter(W3EditBox1.Text,'C:\fakepath\');

    and that will fill the memo for you, but obviously only for files in the same directory as your projects index.html file

  • there is no way you can update files


Note : there is sandbox file api where you can access and store local files from the browser. Only available in Chrome though and by the looks of it is not in any w3c standard or implemented by any other browser


However compiling the same project to PhoneGap does away with these limitations. See @jarto's great posts on how to do this

Alternatively use a client-server model where the server handles file storage and access (php, node)


Or have some fun with node-webkit.

Since you mentioned desktop-use, node-webkit enables SMS-projects as desktop apps on windows, macos and linux. And without any changes.

  • install node + npm
  • install nw
  • simply copy your projects index.html file to a node directory
  • make sure there is a package.json file with the below contents in the same directory
  • from the node command prompt issue 'nw .' and magically you'll have a desktop application with no browser limitations


Drag & drop selection of file-names is very feasible. (There is a drag&drop demo here www.lynkfs.com/native/www under 'projects')



package.json :

  "name": "example-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  "keywords": [],
  "author": "",
  "license": "ISC"


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this