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.
Related
I am looking a functionality like follows for a web application,
User select a local folder with high resolution images.
Resize this images and send to server for processing.
Make folders in the local file system and copy the original high resolution images according to the server response
Can we achieve this without using any locally installed application but with a web application only. Please guide me, which method/technology can I start with.
Browsers will not allow to access local file system due to security reasons. Image any website able to play with local files. Browser provides sandbox where your js app can run.
You best options could be to use webstorage. You have limited capacity there though and it is not accessible directly to user. Different browsers can be varying implementations.
You can do this with node.js and sharp or Imagemagick.
As others have mentioned in browser Javascript cannot access a local file system for security reasons. So you'd have to provide an upload interface to upload the image to a node server first, then you can convert the image into a buffer/data stream resize the buffer and save it again on the server ready to be downloaded.
NodeJs is a Javascript runtime
https://nodejs.org/en/
Express is a application framework you can build a webserver that can execute your javascript
https://expressjs.com/
(You've already said you'd prefer not to but) You could build it as an node desktop application using electron which would have access to the filesystem, but it would be a self contained app not a in browser application.
https://electronjs.org/
Sharp and imagemagick plugins are the most popular nodejs based image processors
https://www.npmjs.com/package/sharp
https://www.npmjs.com/package/imagemagick
Hope this helps you get started
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'm developing a Chrome App to allow users to create virtual documents that are stored within the app itself, meaning I don't want the users to have direct access to the files.
The reason why this is is because when the app first starts, it's a screen showing previews/thumbnails of all the created files. If I gave users control over where the files were stored, this could be interferred with by having multiple files in various locations.
What I'd like to do is store everything inside of the app. If possible, I'd like to use JavaScript to create, modify, and edit files within the packaged app, not through the user-accessible file system. Is there any way to dynamically add files and folders to a packaged app using JavaScript?
If not, what are my options for a controlled system in which users cannot move their files to a different directory to keep my thumbnails/previews intact?
You only have read-only access to your package directory.
For an isolated virtual filesystem specific to your app, you should use the HTML5 Filesystem API. Yes, it has a big warning regarding its status, but it's the basis of Chrome's own APIs so it is not going anywhere in Chrome.
You should carefully consider though if it's really the best experience for your users. The good part though, if you ever wish to allow to use a location on the real filesystem, you don't need to change much - the chrome.fileSystem API simply provides another DirectoryEntry, but the rest of working with it is pretty much the same.
The new version of Linux Mint allows HTML 5 login window themes -- I'm trying to write one that will grab each user's wallpaper. These wallpapers are located in the folder /home/#USER#/.cache/wallpaper/, however the file name is not consistent and I need a programmatic way of determining it. Once I know the filename, the login screen will display the image correctly using the file:///.. format.
I don't have any tools other than client-side HTML/CSS/JavaScript[/jQuery/etc] available to me. Is there any way I can grab the file names in that directory, so that I can grab the wallpaper image?
EDIT: Figured it out! The browsers won't allow access to the file:/// resources at all, the mdm-theme-emulator will.
It looks like these files are located on the client machine, in which case you would not be able to access them using jQuery. Javascript does not have access to the local file system.
If you are sending the request through a server, you'd be able to use the server-side code (ASP.NET, PHP, etc.) to loop through the filenames
I am using ExtJs for front end development and I am looking for a way to set the destination for a file to be downloaded. I know I can use xtype:filefield to browse files, but that requires me to select an actual file, I just need to select a folder for the file destination and then send that path elsewhere. Any way I can do that?
You will not be able to choose the user's download location with javascript. This can only be set from the user's end, otherwise it would violate user's security.
If your app is for an intranet only there are various ways you can push a config onto the user's browsers (depending on which web browser they are running in the intranet). But that would make ALL downloads go to that location.
Most browsers also have a configuration that allow the user to define a location for every download as covered here and here's more specifics for different browsers. The user would be able to (and have to) select the download location for every download.
If this is for an intranet app, and if your intranet is running Firefox, there is also this add-on. You would have to push it out to all your user's computers (or manually install it on them all). I haven't tried it yet but I was planning on using it should a situation like yours arise (all my ExtJS work is for an intranet running Firefox - I push out things like this using a logon script whenever a user logs into the network to automatically install them).