HTML Input Type File Browse Element /FakePath Mystery and Plain Stupid W3C Specification.

November 11, 2011 | By kiranbadi1991 | Filed in: Browser, Development, Performance Engineering.

From past couple of days I have been working on the piece of code where I have to upload and Preview the image.All upload and preview I wanted it to be on the same page at client side with no server calls happening for previewing the image other than doing a submit.

I was thinking it would be simple stuff where I have a simple HTML Page which will have Input File type element tag which comes with Browse button to pick the file from the desktop and attach the file path to the IMG Element SRC and preview it in the same page for the users.My bad though the logic looks so perfect and  simple, yet its implementation is impossible, given that for the sake of security(Google/Bing/Yahoo Search Says so), all browsers under normal circumstances or in default mode puts the severe restriction on the input type file element capability.Unless we tweak setting in browsers, its not going to display Images with this logic and some browsers just plainly refuse to display it no matter what.

Here is code I wrote so as to upload and preview the image on the same page.Please note that this rough cut of the code and it can altered or changed to fit in the dimensions of the image in the browsers where it works.I have not validated this code for w3c validation.

   1:  <!DOCTYPE HTML>
   3:  <html dir="ltr" lang="en-US">
   5:  <head>
   7:  <title>Image upload trial</title>
   9:  <style type="text/css">
  11:  div.clmaincontainer{
  13:    width:30%;
  15:    height:600px;
  17:    border-style:solid;
  19:    }
  21:  div.climg{
  23:  width:30%;
  25:  height:auto;
  27:  border-style:inset;
  29:  }
  31:  </style>
  33:  <meta charset="utf-8">
  34:  </head>
  36:  <body>
  38:  <div id="idmaincontainer" class="clmaincontainer">
  40: <input type="file" name="img" id="idimgupload" class="climgupload">
  42:  <img src="#" id="my_img" class="climg " alt="Image"/>
  44:  <div id="idimgdisplay" class="climgdisplay"></div>
  46:  </div>
  48:  <script src="./1.5/jquery.min.js"></script>
  50:  <script>
  52:  $(document).ready(function(){
  54:                  $('#idimgupload').change(function(){
  56:                  var path = $('#idimgupload').val();
  58:                  path = path.replace("C:\\fakepath\\", "");
  60:                   alert(path);
  62:                  $('#my_img').attr('src',path );
  64:                                 alert("test for bind");
  66:                                  });
  68:  });
  70:    </script>
  71:  </body>
  72:  </html>

Now lets start with Microsoft IE, I have been fan of Microsoft for number of years and for various good reasons.One among them is the way they share information about their products via blogs/MSDN/Articles etc.In fact I can go ahead and say that some of best things I have learned is from Microsoft Folks who are in Development/Support/.Net Reverse Engineering/IIS/IE teams etc.

Okay now coming back to this topic,this piece of code works perfectly fine in IE9,IE8,IE7 version of browsers provided we tweak some setting in IE. I have tested it and can see that right after we select the Image file, it displays your image.The setting which one needs to do is

  • Add your site in the IE’s Trusted Site list.
  • Enable the below Setting in IE.Click Tools Bar in IE.Select Internet Options >Security >Custom Level.If you scroll the list of options to enable or disable over there, you should see below option.Enable this option.

Include local directory path when uploading files to a server

Now coming for Firefox/Safari/Google Chrome all latest version at the time of this writing, I can only say that there is some magic happening in Firefox browser,sometimes it works and other times it does not work.But this piece of code surely do not work on Safari/Google Chrome and we get below Fake path message,






Both Chrome and Safari adds the fake path to the actual directory structure in the alert box and in reality looks for the image in the root folder of the application on the  server.So this solution fails with 404 error when viewed via browser developer tools(F12 tools).I can see this in DOM that filename is replaced correctly but path of the file is set to the root of the folder.So basically path is as http://localhost:7000/D3.jpeg

Ok now why do the browser are behaving like this with the element which they wholeheartedly support,below I feel is the reasons for this,

I am not sure as what security holes they are seeing here,of course I am not a hard core expert in programming,but I also know there are very very few guys who can really hack the stuff,but again we should not forget that now a days security companies are coming up with products which blocks just anything and everything if they suspect.Now with  so much intelligence around,does it make sense to ignore this solution ?

For every image that is uploaded in the web and previewed in the web,it makes at least 2 calls to the server,one for storing the image to some temp location and other to retrieve the image to preview it.What a waste of bandwidth and money here.

I am also not getting where are client side web performance experts,don’t they see the benefits of this element and changes it can bring to the web once these silly restriction are removed or are they saying that risks outweighs the benefits here ?..

Update: Here is the link for IE which talks about workaround to this issue.

Tags: , , ,

3 comments on “HTML Input Type File Browse Element /FakePath Mystery and Plain Stupid W3C Specification.

  1. […] src tag unless someone is extremely intelligent programmer.I had written about this earlier over here.Finally I gave up that approach and decided to have graceful fallback approach using both HTML5 and […]

  2. This web site is often a walk-through for all the facts you wanted about this and didn’t know who to ask. Appear here, and you will actually find it.

  3. Does your website have a contact page? I’m having a tough time locating it but, I’d like to send you an e-mail. I’ve got some ideas for your blog you might be interested in hearing. Either way, great blog and I look forward to seeing it develop over time.