0

Other similar questions ask about <input type="file" /> elements. This question is about the different behaviour of <input type="text" /> elements in different browsers.

For a picture-story creation web app, users can drag an image from their desktop to a browser window. In all browsers, on all platforms, JavaScript can read in the file as a dataURL and display the image.

It would be good if the the web app could store the full path to the image file in local storage, along with the rest of the story, so that the complete story can be recreated the next time the app is launched. One alternative is to copy image file in its entirety to local storage, which will soon fill up the available space. Another alternative would be to upload the image file to a server, and download it again so that it is stored in the browser's cache.

Saving just the path to the image file seems the most efficient.

I have noticed a solution which works on Safari at least. If I create an HTML input element like this...

<input type="text" placeholder="Drag files here">

... and then drag files to this input element, on Safari, the full path to the desktop file is displayed in the input element, and is accessible to JavaScript.

The result is different on different browsers that I have tested:

  • Safari: makes full file path accessible to JavaScript
  • Chrome and Opera: open a new page to display one of the images dropped on the app page, unless JavaScript is used to prevent this
  • Firefox: does nothing

My questions:

  1. Is Safari's behaviour a security threat, in any way?
  2. If it is not a security threat, is it possible to give users the possibility of providing the full file path on other browsers?

Here's a jsFiddle

James Newton
  • 6,623
  • 8
  • 49
  • 113
  • I looked around and found that the same question has been answered a few times already. Unfortunately the answer is, you can't get the path. Maybe going with your idea of having a server keep track of the files is the way to solve this one. – NMunro May 19 '15 at 15:24
  • same as the above... http://stackoverflow.com/q/13976338/3407923... http://stackoverflow.com/q/15201071/3407923... [etc](https://www.google.nl/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=js%20get%20path%20to%20file%20on%20client) – myfunkyside May 19 '15 at 15:24
  • Here's another one: http://stackoverflow.com/questions/4851595/how-to-resolve-the-c-fakepath – JoseM May 19 '15 at 15:25
  • These other questions are slightly different. They deal with an `` element. My question is about an ``, and the way its behaviour is different on different browsers. Knowing about [URL.createObjectURL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) is good, but it doesn't survive even going to a new page in the same browser in the same session. – James Newton May 19 '15 at 15:43

0 Answers0