Accessing Filepath in HTML Input Element via Javascript

Because of security concerns in  several browsers, accessing the Filepath of files selected via an HTML input element  isnt‘ that easy. This article is to describe the circumstances how Firefox 3 and Internet Explorer 7 (I E7) handles it.

Why should you need the Path of the file: Think of Intranet applications where files are stored on companywide fileservers. Sometimes editors want to provide links to these files in the CMS, without writing or copying the filepath into a textfield. A normal Fileupload form can do the trick.

This is the HTML construct i am talking about:

<input id="thisFile" name="Datei" size="50" maxlength="100000"
accept="text/*" type="file">

A Javascript command to access the Filename along with the path probably is as simple as:

document.getElementById('thisFile').value

IE7: Microsoft says in an Article in MSDN about the value Property of the input ElementThe value property returns only the file name and not the path of the file to machines outside the local machine security zone. For more information on security zones, see About URL Security Zones.

Thats only half the truth, in IE7 it was perfectly working for pages in the normal Internet security zone,  it directly delivers the path + the filename (e.g. C:\\my directory\my filename.doc). The reason is simple: the Security Zone the script is in, in my case the zone „Internet“, has the correct rights initially set:

"Verschiedenes -> Lokalen Verzeichnispfad beim Hochladen von Dateien
   auf einen Server mit einbeziehen" -> is set to true

which translates to something like „Send the locale filepath during file uploads“. Probably for future versions of IE7 this might change, so take into account to rollout the configuration changes in your company intranet.

In Firefox 3, there was a long discussion taking place about this security issue. The result: Firefox 3 doesnt provide the filepath in default mode. The script has to request expanded privileges:

netscape.security.PrivilegeManager.enablePrivilege('UniversalFileRead');

Additionally, the user must enable security warnings to appear (type in „about:config“, search for „signed.applets.codebase_principal_support“ and set it to true). A user is then presented with a security warning and has to allow the script manually. The complicated procedure makes it only desirable for Intranets. After that, the script will get the full path of the file.

Here is a script is used for testing:

<form action="input_file.htm" method="post" enctype="multipart/form-data">
  <p>Choose a file:<br>
    <input id="thisFile" name="myfile" size="50" maxlength="100000"
       accept="text/*" type="file">
    <a onclick="netscape.security.PrivilegeManager.enablePrivilege
          ('UniversalFileRead');
          alert(document.getElementById('thisFile').value)" href="#">
          Show File Location</a></p>
</form>

With this method it is possible to access the full path and filename via Javascript in order to compute it further.

As far as i know, there is no method to change the value of the input field via Javascript (As a means to circumvent security issues, the HTML file input element doesn’t allow developers to change the value of the element using normal scripting methods. ).

Advertisements

6 Kommentare on “Accessing Filepath in HTML Input Element via Javascript”

  1. baba sagt:

    Hi,

    Its true that with this method you can acces the full path (for alert actions), but you can not process it further.

    Choose a file:

    In my form the servler only receive the name, using firefox.

  2. […] The busiest day of the year was March 15th with 43 views. The most popular post that day was Accessing Filepath in HTML Input Element via Javascript. […]

  3. ASC Software sagt:

    Wonderful post! I had to code a filupload/attachment module in a Webservlet so this information was very handy. The customer wanted to have access to files from OpenBravo ERP that was placed on the local linux file server (whils accessing from Windows 7). So I had to find a way to get past the linkpath restriction to include this in the database.

    I confirm getting the file/path informatino as described works for FF 3.6 and Internet Explorer 7.

    Unfortunately, setting this value is as of today not possible either.

  4. Makalelerinizi ilgiyle takip ediyorum


Kommentar verfassen

Trage deine Daten unten ein oder klicke ein Icon um dich einzuloggen:

WordPress.com-Logo

Du kommentierst mit Deinem WordPress.com-Konto. Abmelden / Ändern )

Twitter-Bild

Du kommentierst mit Deinem Twitter-Konto. Abmelden / Ändern )

Facebook-Foto

Du kommentierst mit Deinem Facebook-Konto. Abmelden / Ändern )

Google+ Foto

Du kommentierst mit Deinem Google+-Konto. Abmelden / Ändern )

Verbinde mit %s