How to get the file path from HTML input form in Firefox 3

Question

We have simple HTML form with  lt input type  file  gt   like shown below    lt form gt     lt label for  attachment  gt Attachment  lt  label gt     lt input type  file  name  attachment  id  attachment  gt     lt input type  submit  gt   lt  form gt    In IE7  and probably all famous browsers  including old Firefox 2   if we submit a file like    server1 path to file filename  it works properly and gives the full path to the file and the filename   In Firefox 3  it returns only  filename   because of their new  security feature  to truncate the path  as explained in Firefox bug tracking system  https   bugzilla mozilla org show bug cgi id 143220   I have no clue how to overcome this  new feature  because it causes all upload forms in my webapp to stop working on Firefox 3   Can anyone help to find a single solution to get the file path both on Firefox 3 and IE7

User · Answer

One extremely ugly way to resolve this is have the user manually type the directory into a text box, and add this back to the front of the file value in the JavaScript.

Messy... but it depends on the level of user you are working with, and gets around the security issue.

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

JavaScript

var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;

User · Answer

Have a look at XPCOM  there might be something that you can use if Firefox 3 is used by a client

User · Answer

This is an example that could work for you if what you need is not exactly the path  but a reference to the file working offline   http   www ab-d fr date 2008-07-12   It is in french  but the code is javascript     This are the references the article points to  http   developer mozilla org en nsIDOMFile http   developer mozilla org en nsIDOMFileList

User · Answer

We can t get complete file path in FF3  The below might be useful for File component customization    lt script gt   function setFileName         var file1 document forms 0  firstAttachmentFileName value        initFileUploads  firstFile1   fileinputs1  file1         function initFileUploads fileName fileinputs fileValue        var fakeFileUpload   document createElement  div        fakeFileUpload className    fakefile       var filename   document createElement  input        filename type  text       filename value fileValue      filename id fileName      filename title  Title       fakeFileUpload appendChild filename       var image   document createElement  input        image type  button       image value  Browse File       image size 5100      image style border 0      fakeFileUpload appendChild image       var x   document getElementsByTagName  input        for  var i 0  i amp lt x length i              if  x i  type     file   continue          if  x i  parentNode className    fileinputs  continue          x i  className    file hidden           var clone   fakeFileUpload cloneNode true           x i  parentNode appendChild clone           x i  relatedElement   clone getElementsByTagName  input   0           x i  onchange  function                  this relatedElement value   this value                 if document forms 0  firstFile    null  amp  amp  document getElementById  firstFile1      null            document getElementById  firstFile1   value  document forms 0  firstFile value      document forms 0  firstAttachmentFileName title document forms 0  firstFile value           function submitFile     alert  document forms 0  firstAttachmentFileName value      lt  script gt   lt style gt div fileinputs1  position  relative  div fileinputs2  position  relative   div fakefile  position  absolute top  0px left  0px z-index  1   input file  position  relative text-align  right -moz-opacity 0  filter alpha opacity  0       opacity  0 z-index  2   lt  style gt    lt html gt   lt body onLoad   setFileName     gt   lt form gt   lt div class  fileinputs1  gt   lt INPUT TYPE file NAME  firstAttachmentFileName  styleClass  file    gt   lt  div gt   lt INPUT type  button  value  submit  onclick  submitFile       gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

Actually  just before FF3 was out  I did some experiments  and FF2 sends only the filename  like did Opera 9 0  Only IE sends the full path  The behavior makes sense  because the server doesn t have to know where the user stores the file on his computer  it is irrelevant to the upload process  Unless you are writing an intranet application and get the file by direct network access   What have changed  and that s the real point of the bug item you point to  is that FF3 no longer let access to the file path from JavaScript  And won t let type paste a path there  which is more annoying for me  I have a shell extension which copies the path of a file from Windows Explorer to the clipboard and I used it a lot in such form  I solved the issue by using the DragDropUpload extension  But this becomes off-topic  I fear   I wonder what your Web forms are doing to stop working with this new behavior    EDIT  After reading the page linked by Mike  I see indeed intranet uses of the path  identify a user for example  and local uses  show preview of an image  local management of files   User Jam-es seems to provide a workaround with nsIDOMFile  not tried yet

User · Answer

Simply you cannot do it with FF3   The other option could be using applet or other controls to select and upload files

User · Answer

Simply you cannot do it with FF3   The other option could be using applet or other controls to select and upload files

User · Answer

This is an example that could work for you if what you need is not exactly the path  but a reference to the file working offline   http   www ab-d fr date 2008-07-12   It is in french  but the code is javascript     This are the references the article points to  http   developer mozilla org en nsIDOMFile http   developer mozilla org en nsIDOMFileList

User · Answer

This is an alternate solution fix    In FF3  You can retrieve file s full path in a textbox instead of file browse box  And that too    By drag dropping the file    You can drag drop your file into a text box in your html page  and it will display the file s complete path  This data can transferred to your server easily or manipulate them   All you have to do is to use the extension DragDropUpload  http   www teslacore it wiki index php title DragDropUpload  This extension will helps you in drag dropping files into your File Browse  Input file  box  But still you wont able to get the file full path  If you try to retrieve   So  I tweaked this extension a little  In the way I can drag drop a file on to any  Text Input  box and get the file full path  And thus I can able to get the file full path in FF3 Firefox 3

User · Answer

Actually  just before FF3 was out  I did some experiments  and FF2 sends only the filename  like did Opera 9 0  Only IE sends the full path  The behavior makes sense  because the server doesn t have to know where the user stores the file on his computer  it is irrelevant to the upload process  Unless you are writing an intranet application and get the file by direct network access   What have changed  and that s the real point of the bug item you point to  is that FF3 no longer let access to the file path from JavaScript  And won t let type paste a path there  which is more annoying for me  I have a shell extension which copies the path of a file from Windows Explorer to the clipboard and I used it a lot in such form  I solved the issue by using the DragDropUpload extension  But this becomes off-topic  I fear   I wonder what your Web forms are doing to stop working with this new behavior    EDIT  After reading the page linked by Mike  I see indeed intranet uses of the path  identify a user for example  and local uses  show preview of an image  local management of files   User Jam-es seems to provide a workaround with nsIDOMFile  not tried yet

User · Answer

Simply you cannot do it with FF3   The other option could be using applet or other controls to select and upload files

User · Answer

Actually  just before FF3 was out  I did some experiments  and FF2 sends only the filename  like did Opera 9 0  Only IE sends the full path  The behavior makes sense  because the server doesn t have to know where the user stores the file on his computer  it is irrelevant to the upload process  Unless you are writing an intranet application and get the file by direct network access   What have changed  and that s the real point of the bug item you point to  is that FF3 no longer let access to the file path from JavaScript  And won t let type paste a path there  which is more annoying for me  I have a shell extension which copies the path of a file from Windows Explorer to the clipboard and I used it a lot in such form  I solved the issue by using the DragDropUpload extension  But this becomes off-topic  I fear   I wonder what your Web forms are doing to stop working with this new behavior    EDIT  After reading the page linked by Mike  I see indeed intranet uses of the path  identify a user for example  and local uses  show preview of an image  local management of files   User Jam-es seems to provide a workaround with nsIDOMFile  not tried yet

User · Answer

One extremely ugly way to resolve this is have the user manually type the directory into a text box, and add this back to the front of the file value in the JavaScript.

Messy... but it depends on the level of user you are working with, and gets around the security issue.

<form>
    <input type="text" id="file_path" value="C:/" />
    <input type="file" id="file_name" />
    <input type="button" onclick="ajax_restore();" value="Restore Database" />
</form>

JavaScript

var str = document.getElementById('file_path').value;
var str = str + document.getElementById('file_name').value;

User · Answer

This is an example that could work for you if what you need is not exactly the path  but a reference to the file working offline   http   www ab-d fr date 2008-07-12   It is in french  but the code is javascript     This are the references the article points to  http   developer mozilla org en nsIDOMFile http   developer mozilla org en nsIDOMFileList

User · Answer

Have a look at XPCOM  there might be something that you can use if Firefox 3 is used by a client

User · Answer

For preview in Firefox works this - attachment is object of attachment element in first example              if  attachment files               previewImage src   attachment files item 0  getAsDataURL               else              previewImage src   attachment value

User · Answer

Actually  just before FF3 was out  I did some experiments  and FF2 sends only the filename  like did Opera 9 0  Only IE sends the full path  The behavior makes sense  because the server doesn t have to know where the user stores the file on his computer  it is irrelevant to the upload process  Unless you are writing an intranet application and get the file by direct network access   What have changed  and that s the real point of the bug item you point to  is that FF3 no longer let access to the file path from JavaScript  And won t let type paste a path there  which is more annoying for me  I have a shell extension which copies the path of a file from Windows Explorer to the clipboard and I used it a lot in such form  I solved the issue by using the DragDropUpload extension  But this becomes off-topic  I fear   I wonder what your Web forms are doing to stop working with this new behavior    EDIT  After reading the page linked by Mike  I see indeed intranet uses of the path  identify a user for example  and local uses  show preview of an image  local management of files   User Jam-es seems to provide a workaround with nsIDOMFile  not tried yet

User · Answer

This is an example that could work for you if what you need is not exactly the path  but a reference to the file working offline   http   www ab-d fr date 2008-07-12   It is in french  but the code is javascript     This are the references the article points to  http   developer mozilla org en nsIDOMFile http   developer mozilla org en nsIDOMFileList

User · Answer

Have a look at XPCOM  there might be something that you can use if Firefox 3 is used by a client

User · Answer

We can t get complete file path in FF3  The below might be useful for File component customization    lt script gt   function setFileName         var file1 document forms 0  firstAttachmentFileName value        initFileUploads  firstFile1   fileinputs1  file1         function initFileUploads fileName fileinputs fileValue        var fakeFileUpload   document createElement  div        fakeFileUpload className    fakefile       var filename   document createElement  input        filename type  text       filename value fileValue      filename id fileName      filename title  Title       fakeFileUpload appendChild filename       var image   document createElement  input        image type  button       image value  Browse File       image size 5100      image style border 0      fakeFileUpload appendChild image       var x   document getElementsByTagName  input        for  var i 0  i amp lt x length i              if  x i  type     file   continue          if  x i  parentNode className    fileinputs  continue          x i  className    file hidden           var clone   fakeFileUpload cloneNode true           x i  parentNode appendChild clone           x i  relatedElement   clone getElementsByTagName  input   0           x i  onchange  function                  this relatedElement value   this value                 if document forms 0  firstFile    null  amp  amp  document getElementById  firstFile1      null            document getElementById  firstFile1   value  document forms 0  firstFile value      document forms 0  firstAttachmentFileName title document forms 0  firstFile value           function submitFile     alert  document forms 0  firstAttachmentFileName value      lt  script gt   lt style gt div fileinputs1  position  relative  div fileinputs2  position  relative   div fakefile  position  absolute top  0px left  0px z-index  1   input file  position  relative text-align  right -moz-opacity 0  filter alpha opacity  0       opacity  0 z-index  2   lt  style gt    lt html gt   lt body onLoad   setFileName     gt   lt form gt   lt div class  fileinputs1  gt   lt INPUT TYPE file NAME  firstAttachmentFileName  styleClass  file    gt   lt  div gt   lt INPUT type  button  value  submit  onclick  submitFile       gt   lt  form gt   lt  body gt   lt  html gt

User · Answer

This is an alternate solution fix    In FF3  You can retrieve file s full path in a textbox instead of file browse box  And that too    By drag dropping the file    You can drag drop your file into a text box in your html page  and it will display the file s complete path  This data can transferred to your server easily or manipulate them   All you have to do is to use the extension DragDropUpload  http   www teslacore it wiki index php title DragDropUpload  This extension will helps you in drag dropping files into your File Browse  Input file  box  But still you wont able to get the file full path  If you try to retrieve   So  I tweaked this extension a little  In the way I can drag drop a file on to any  Text Input  box and get the file full path  And thus I can able to get the file full path in FF3 Firefox 3

User · Answer

Simply you cannot do it with FF3   The other option could be using applet or other controls to select and upload files

User · Answer

Have a look at XPCOM  there might be something that you can use if Firefox 3 is used by a client

User · Answer

For preview in Firefox works this - attachment is object of attachment element in first example              if  attachment files               previewImage src   attachment files item 0  getAsDataURL               else              previewImage src   attachment value

[html] How to get the file path from HTML input form in Firefox 3

Examples related to html

Examples related to file-upload

Examples related to firefox-3