1

Hi all I have searched many forums and came to know that we can not load a file locally from local drive, but I got a requirement where I need to display the images from the local drive. I will have my image path saved in my database from that path I need to load and show the image this is what I have written

<img data-bind="attr: { src: loadImage() }" />

 <script type="text/javascript">
    function loadImage() {
        return "D:/SampleFolder/SampleFile.jpg"; // this is what I will get from my database
    }
</script>

so can some one tell me how can I do this using javascript

demouser
  • 103
  • 2
  • 4
  • 12
  • You cannot do that from JavaScript. You can load local files in some restricted circumstances in modern browsers, but not from some arbitrary local path like that. – Pointy Jan 07 '14 at 14:27
  • 2
    If you don't care about IE clients and the file is local to the person running the JavaScript, you can use the HTML5 FileReader API. – George Stocker Jan 07 '14 at 14:27
  • 1
    @GeorgeStocker yes but that doesn't give you unfettered access to arbitrary local paths. – Pointy Jan 07 '14 at 14:27
  • 1
    If you *only* cared about 1 browser, you could write an extension. From a Firefox extension, you *can* read arbitrary local paths, and you can expose javascript functionality to remotely loaded scripts. – David-SkyMesh Jan 07 '14 at 14:28
  • Think if you could do that then you could "steal" images from users personal pc – laaposto Jan 07 '14 at 14:29
  • The path you are getting from the database, is it related to the web server or the client user's machine? – asm00 Jan 07 '14 at 14:30
  • Ok just me give the solution which will work for temporarily, from the path I need to load the image – demouser Jan 07 '14 at 14:30
  • 1
    @demouser -- you're not listening :-) – David-SkyMesh Jan 07 '14 at 14:31
  • @asm00 To the local machine; an obvious sandbox/origin violation under normal circumstances. – David-SkyMesh Jan 07 '14 at 14:33
  • @demouser We don't know nearly enough to help you. Where are the images stored? Are they stored on each users's hard drive? Are they stored in a central database? Are they stored in a server with the path being stored in a central database? If they are on a server, why do you need JavaScript to load them? – George Stocker Jan 07 '14 at 14:33
  • @GeorgeStocker -- OP is quite clear that the path returned from the server is a local (to the client machine) path. – David-SkyMesh Jan 07 '14 at 14:34
  • `George Stocker` it will be from server – demouser Jan 07 '14 at 14:34
  • @demouser ++ way to answer to the positive and negative at the same time. :-) Sort of like, "`Will I be doing it? Or will you?`", answer: "`Yes`". – David-SkyMesh Jan 07 '14 at 14:35
  • Ok forgot about the storage suppose if the files are stored in my local drive when I am running the application locally how can I store the Image from the path I mentioned – demouser Jan 07 '14 at 14:38
  • @demouser. If you're loading the HTML, script and images from the same origin (i.e: `file:///`) then there won't be a permission problem. Otherwise, you just can't. – David-SkyMesh Jan 07 '14 at 14:39
  • `David-SkyMesh` : Even when I am loading the images from the path I am getting an error in console as `Not allowed to load local resource: file:///D:/SampleFolder/SampleFile.jpg` – demouser Jan 07 '14 at 14:42
  • @demouser -- are you loading the HTML + JavaScript from the SAME ORIGIN? (i.e: `file:///`). If not, it won't work. Ever. – David-SkyMesh Jan 07 '14 at 14:43
  • @demouser you need to provide a clear picture of what you are trying to do. It's really frustrating to work on a solution just to be told that the suggested approach won't work because it doesn't solve the actual problem, because we didn't get the problem right. Nevertheless, I think this should do it: http://stackoverflow.com/questions/1887519/how-to-preview-an-image-before-upload-in-various-browsers – asm00 Jan 07 '14 at 14:43
  • 1
    @asm00 That Q/A doesn't remotely resemble this question. – David-SkyMesh Jan 07 '14 at 14:44
  • @David-SkyMesh I believe it does. If you can preview it (that is, showing it) then you are "loading it" in the sense the OP wants it. In the end, is a way to take a local image file, and use it as the source of a tag... – asm00 Jan 07 '14 at 14:50
  • @asm00 Sure -- if there were an answer that actually *did* that. But there isn't. The closest answers use HTML5 MediaCapture or File APIs that were specifically designed to do preview/local-access, and neither can use arbitrary local paths. The user must select them. – David-SkyMesh Jan 07 '14 at 14:52
  • `David-SkyMesh` when I checked using `firebug` in the desired path it is giving me the file name as `localpath`+`directory` name so it is some thing like `http://localhost/portno/pathoftheimage`. – demouser Jan 07 '14 at 15:05
  • 1
    @demouser You CANNOT *EVER* MIX ORIGINS. `file:///` and `http://localhost` are DIFFERENT ORIGINS. It's simply impossible, the browser is specifically designed to either a) stop you from doing it (i.e: for local files) or b) warn you (i.e: for mix of HTTP + HTTPS). And from the sound of your question, you don't actually *have* a local webserver; you're misconstruing `localhost` (the machine) and your client PC as being the same thing (they're not, at least to your browser). – David-SkyMesh Jan 07 '14 at 15:06
  • 1
    @David-SkyMesh I think you proved my point that we didn't have enough information to help the OP. :-) – George Stocker Jan 07 '14 at 15:13

0 Answers0