I am trying to develop a simple app using node.js and express.js that works as follows. Attaching the screen shot of my app for reference
The user basically enters a location in his computer where image files are stored and then I dynamically generate the HTML file that displays those images as thumbnails. I am almost done except that Express is not serving my images and they appear as empty square boxes. Need help in trying to address this.
Before people mark this question as duplicate I would like to point out that this is not static web content where I can use the static middleware to sort this out. The user can input any directory on his computer and if there are any image files present then I need to display them.
EDIT:
This is how the standalone HTML page looks like. There are no problems with respect to paths in img
When you are opening standalone html in the browser, the protocol of the opened page is FILE. When you run a server on your localhost, the protocol is http or https. Modern browsers, do not allow to cross from the http protocol to the file protocol, that is why you are getting error:
Not allowed to load local resource
I can suggest you to create a buffer directory under the server directory root, and copy all the images from the desired folder there. That will allow you to show the images without any restrictions.
Related
I've built an online photo tagging tool that has a low-res mirror of what is on my local laptop. I'd like to find an easy way to display the high-res version of a given image from my local file system.
Currently I have to get the image name from the web tool, paste it into Lightroom's search system and view that way. I'd like to be able to pull up the high res version, either in the browser or another local app, with a single click.
Options I've investigated:
HTML5 File API/FileReader()/fetch()
These cause even more friction than going to Lightroom, as the user has to select files via the OS file selector and the image directory structure is complex.
Configure local web server to host disk-based images
I've looked at hosting the local image directory with a simple web service, but would need to configure HTTPS to prevent cross-zone violations, and that's more client-side config than I'd prefer.
Any solution that would allow me to reference a local file path directly would work, but modern browsers have (rightly) eliminated most direct paths to local file access.
I'm wondering if there is a way to ask an app on the client side to open the file, in the way that browsers will prompt you for permission to open Zoom and join a meeting, or open a link in the client OS app store. If I could find some way to tell Lightroom to open the specific image without having to copy/paste file names, etc.
I've been working on a game in javascript for my CS course. When I open the document by hitting run in Webstorm, it loads the game correctly, however when I just try opening the html file from Finder, the webpage opens but none of the png files I'm using for the sprites load. I opened Inspect Element in google chrome, and the javascript files loaded correctly but all the png files listed as canceled. This doesnt happen when the game is run from webstorm (when I run it from webstorm, all image files load properly).
When the game is opened directly from an html file (that's when I have the problem), chrome lists the path of the html document as the webaddress, although when opened from webstorm, it lists http://localhost:63342/CS%20Week%2010/CS105_Jessica.Davis_DogGame.html?_ijt=tmrr2fndgac82h07hlvt101gi4
How can I get around this issue so that when opening the html file from Finder it loads everything correctly? All image files are in the same directory as the html file.
Because of browsers security, loading files like this might not work from a url starting with file://
What webstorm is probably is making a local web server so that instead of saying file:// you could say http://. if any website was able to load images from file:// then any webpage you visit would have been able to search for any file on your computer and send it over the internet without your consent so browser often have these settings on. So you'd need a server. If you are working on your computer, you could make a local server just like webstorm and host your own files there. or host it on another service like github pages or codepen.
Now since all images are in the same directory, make sure that every time you call loadImage you use the images name and extension instead of saying /User/user/whatever_other_directory_you_have_it_under/image.png.
Once you did that you can make a local web server for the project. To make a local server, open Terminal (an application under utilities, you could spotlight search for it as well) and type cd, drag your project folder and drop it over terminal, and hit enter. Then type python -m SimpleHTTPServer and wait till it says something like Serving HTTP on 0.0.0.0 port 8000 .... Then taking the 0.0.0.0 and the 8000 you see in the example (yours may or may not be the same) go to your browser and type http://0.0.0.0:8000 (replacing the digits with whatever you got, not this link doesn't work until you do that)
Images should load alright. If you need to stop the server you can go back to terminal and hit control+C.
Note that when presenting your p5 sketch, no one else would be able to see the website on their computers if you make your local server. The local server is secluded to the device that is running it (although if their making their own local server and have your project files it should work just fine).
If you want the website hosted so that you could share a link with anybody in the world you could use codepen or github pages. If you go to codepen.io it should be self-explanatory although you'd have to upload your images to some image hosting site like tumblr or something and add the URL source of those images to codepen or you could put everything into github for even better results!
To use github pages you'd need to make a github account (preferably with your username being whatever you want your page to be named). Make a repository named insert_username_here.github.io. add your files to the repository (make sure to try to keep all sub directories and folder exactly as they are from your project folder). After a minute or two go to http://insert_username_here.github.io to admire your brand new hosted webpage!
I have created a webapp using JSP,Html and Javascript which currently runs on my localhost using apache webserver. I want to display the files and folders and of a directory in local computer. I also want to create a download link or view link of those so that when anyone click on it it will be viewed in new tab or become downloadable as it happens in any ftp server. I know similar type of question has
been asked but none of them worked for me.
To create the download link I used
Download
this does not work as it is not in my webapp path and download attribute also does not work in internet explorer.
I'm not sure why you are exposing your local drive contents on the web but here's an option:
On the page that should display the files, in java code, list all
folders and files then for each file/folder show a link to some page
(for example "navigateLocalDrive" that sends the path of the clicked
file/folder like this:
Download
Now in that jsp, check if the GET variable is a path for a file or a directory,
if its a file, just send it back in the response, if its a
directory, list all files/folders and do the same as in step 1
Please note:
How I encoded the file path in the href in order to work properly.
The Access permissions for the webserver should allow write/read to that path (I'm already doing it on my Tomcat server on local host with the default setup no change needed)
For your reference, here are some helpers for this task:
How to list contents of a server directory using JSP?
Downloading file from JSP/Java
I am not sure if this is possible. In general the access rights are limited to the src and webContent Folder (for your html coding mentioned above for sure) . This is also reasonable, because you do not want to access or change data on your Computer in general, because after local development you want to deploy your web application to a server.
To make a test copy some file to the webContent and you will be able to download it. Within your Java coding you can use some IO package like java.io.File to navigate over folders and files. However keep in mind, that you will get some exceptions like
java.io.FileNotFoundException: C:\WeatherExports\export.txt (Access is denied)
if you want to access files outside the server.
I have several users on an intranet and all have a mapped drive to server (E:).
All users are on Win7 and use FireFox.
I have used XAMPP on the server to allow users access to MySQL files using PHP.
They currently use windows explorer to open a folder on (E:) so save/modify files (jpgs, docs etc.).
I want to put a link in the html to open this folder for them.
I've spent some time researching this with varying amounts of success and I have found out that this may have security issues such as...
A web application does not have access to the local machine's filesystem
but these are all clients accessing the same server on a local intranet.
I can type...
file:///C:/MyFolder/MySubFolder/
in my browser address bar which opens a page with a directory listing of the files in the sub folder. Not ideal but half way to a solution!
But the script below does not work...
window.open("file:///C:/MyFolder/MySubFolder/");
Can this be done?
you path would be
window.open("http://localhost/MyFolder/MySubFolder/");
or
window.open("http://IP/MyFolder/MySubFolder/");
use absolute path for this
Firefox will work if the link is in its own mangled form using five slashes (file://///C:/MyFolder/MySubFolder/) and the user has disabled the security restriction on file: links in a page served over HTTP.
check this post for more info
I'm developing an application which runs on a localhost server.! In this application I do ajax calls and get items from a local h2 DB! Using the response I create dynamic elements using jQuery. The elements use an item image as background and the requirement is that I should get the images from a local folder. ( The folder is created when the server is first started and the images are synchronized from a main server over the intranet. ) The folder hierarchy is shown below.
c:/----
|
zharaimages/ -----
|
[item id]/-----
|
[image].jpg
The image can contain any name for it but will be a jpg. How can I read the file system using jQuery to get the necessary image file when the item is dynamically loaded. I thought of this method but for that I can only read a file with a static name. I want to write a method where the image name can be anything.
clone.css('background-image','c:/zharaimages/' + items[i].itemId + '/image.jpg');
Any ideas or plugins are welcome.
Thank you.
update
This is a deployable application which uses an embedded jetty server. The folders are in the same computer as the application is!
Unfortunately a big NOOOOOO...
javaScripts cannot read or write files on users' computers (File API - not currently supported by many browsers - allows files to be read by scripts if the user specifically chooses to allow it),
though they can cause the browser to load remote pages and resources like scripts or images, which the browser may choose to cache locally.
They cannot create files on the server (except by communicating with a server side script that creates files for them).
You have to make a server request(many ways...) for the resources.
I'm not sure weather its possible with HTML5 or not
jQuery runs on the browser.
The files are on the server.
The only way that jQuery can read the files on the server is if it makes an AJAX call to the server, and your web server enumerates them.