I am busy building a small gallery that is pulled from my local file system. I have an element that gets the directory:

    <input type="file" webkitdirectory>

I then display all the images and videos in that directory on the page in a container.

At the moment for security reasons I only have access to the relative path so I had to add a hardcoded e:/downloads for it to find the files when I display them because the location of the file is on my desktop.

I want to extend this so I can choose a directory from anywhere on my local file system, but I need the aboslute path. Currently only IE gets me the absolute path, chrome returns a fakepath. I know how to get to the settings to allow local file system files to be included in IE, but I don't know how to enable it in Chrome. I would like to know if there is an option to allow this like in IE.

I have done searches around and most people say it is not possible, however I believe there must be a setting somewhere, I am hoping someone knows.

Here is my code just for kicks if you want to have a look: /

Please note because it is hardcoded to e:/downloads you might want to change it to make it work for you.

You can open up the console and run the function called GetDirectory if you want to see the absolute path it tries to return. (you should also ment out the removal of the element after it has changed as well)

I hope my question was clear and not too long. Thank you.

Summary:
I want to access the absolute path of my local files from the element within Chrome. I can already do it in IE.

I am busy building a small gallery that is pulled from my local file system. I have an element that gets the directory:

    <input type="file" webkitdirectory>

I then display all the images and videos in that directory on the page in a container.

At the moment for security reasons I only have access to the relative path so I had to add a hardcoded e:/downloads for it to find the files when I display them because the location of the file is on my desktop.

I want to extend this so I can choose a directory from anywhere on my local file system, but I need the aboslute path. Currently only IE gets me the absolute path, chrome returns a fakepath. I know how to get to the settings to allow local file system files to be included in IE, but I don't know how to enable it in Chrome. I would like to know if there is an option to allow this like in IE.

I have done searches around and most people say it is not possible, however I believe there must be a setting somewhere, I am hoping someone knows.

Here is my code just for kicks if you want to have a look: https://jsfiddle/3mp1znx9/

Please note because it is hardcoded to e:/downloads you might want to change it to make it work for you.

You can open up the console and run the function called GetDirectory if you want to see the absolute path it tries to return. (you should also ment out the removal of the element after it has changed as well)

I hope my question was clear and not too long. Thank you.

Summary:
I want to access the absolute path of my local files from the element within Chrome. I can already do it in IE.

• javascript
• jquery
• html
• css
• google-chrome

• That won't work because of security restrictions. However, you should take a look at the HTML5 file API (just type that into google). – reg4in Commented Jun 20, 2015 at 23:33
• Thank you for the ment and the information. However if I understand it correctly it only applies to files being uploaded. I am not uploading any of the files, I am just reading everything in the directory. – Chris Commented Jun 20, 2015 at 23:40
• The files will not be uploaded, just loaded in local memory. – reg4in Commented Jun 20, 2015 at 23:41
• Thanks, I think I got it working. But that means I will have to select all the files I want to be displayed which means it won't get all the sub directories. But thanks anyway. I think if I do not receive any other responses to this I will just stick with IE... which is sad... but oh well. – Chris Commented Jun 20, 2015 at 23:46

1 Answer 1

I finally found a solution to my own problem. It is nearly impossible to get the absolute path with Chrome, it only works with Internet Explorer.

So the solution is to use the temporary path.

URL.createObjectURL(e.target.files[0])

This is what was needed, I then use this as the src. I hope this will help someone else when they stumble upon this one day.