List local directory on Web Application - javascript

I have an idea a Web Application and I would need to list all files of a directory that exists on the client machine (For example C:\Temp).
I searched a lot on the Internet and as well on Stack Overflow. I couldn't find an answer on any questions that soved my problems.
I want to be able to list all files and subdirectories of a directory and if possible get the file type.
I know that this isn't able to do only with native Javascript. If there is something restricted to a browser like Firefox, like XPCOM I wouldn't mind using.
I just wanted to know what is the best approach to do this on a WEB Application. (Windows apps are not acceptable, and also don't want to rely on ActiveX since we're no planning on IE support).
We have a preference for Javascript based solutions. We really don't want to rely on Server-Side to do this. But we are opened to Server-Side suggestions.
For any server-side suggestion, we are using ASP .NET MVC.
We area looking for something similar to jscript - getting list of files in directory but I don't want to rely on ActiveX at all. As said before a Firefox-only solution would be OK.

In short:You can't get the control to list the files resides on local system(client machine) from browser.

Java applets, if signed and set up properly, can get access to the local filesystem if the user clicks allow on the popup dialog box.
Flash and Silverlight, being built by intelligent beings, do not allow you access to the local filesystem -- and if they did, they would also have a dialog pop up asking if the user trusts the web app. Otherwise people could use it to collect all sorts of potentially dangerous information about your system.

Related

Web Dialog box used to capture a full file path / UNC

I'm building a browser application in web2py (Python based CMS). One requirement this application has is to enable is the user to browse to a folder within the local network or local drive. The user selects a folder, that selection becomes a string that I record in the application's database. File selection is entirely off the table. I don't care at all about file selection. I only need to select one and only one folder. And get the one folder's fullpath/UNC as a string, collection is strings, object, or whatever that I can then assemble the fullpath as a string.
How can I develop a browser user interface screen object of some sort that enables the user to browser to and select a folder ( c:\folder\folder -or- \\server\share\folder ...) Then capture that string in a variable I can write to a databases?
I'm finding there are a lot of impediments to just such use of a browser application (didn't used to be that way). I get the security concerns but I also can't believe all similar enterprise uses of a browser are being torn down and made impossible (again, because it didn't used to be that way).
I don't want to dictate implementation. So spitball ideas if you like. Get out of the box of this tech stack if you like. But browser based is HIGHLY compelling (if I were to do this as a desktop app or something else I wouldn't even need to post this question).
The current tech stack of the application is: browser (open to suggestions but Chrome is the preference), JavaScript, jQuery, JQWidgets, Python, MSSQL (server hosted, not CE/local). But none of these elements are hard limitations. Except IE/Edge. We'll never use that.
If you can point me to fiddle, GitHub, ... examples that would be greatly appreciated.
Is there a particular JavaScript library, browser addin, Python import, ... I should research?
Would .Net be better suited to champion this challenge?
Is there a better forum you know of where I should post this question?
Thanks
I had to resort to this.
The application's user interface is posting to methods back on the site's controllers.
Then code executing on the site's server (Python) is providing the user's interface lists of folders and files on the file server's shares.
With some effort I will be able to provide the user with a rich and comprehensive UX that will effectively be the same originally desired. Or at least enough so.
What I will not be able to provide is a folder-file lists of the user's local hard drive. And any drives mapped between the user's workstation and the file server will not be represented from the web server to the file server. Meaning the user will have to learn to live without the mapped drive letters which they have become accustomed to.

Simple, standalone (i.e., no external files), offline, client-based solution for selecting file and displaying contents in HTML with Javascript

I'd sum this up as looking for an offline client solution that is 100% standalone and uses no external files/libraries or other machine resources to tabulate data from a user-chosen TSV file (the result is simply rendered in a plain HTML table - nothing fancy, just data).
I am not a web programmer, but have volunteered to do this project. I have been asked to code this as a browser-based solution because the party deems it the most user-friendly for their needs.
Again, this is not an html file that is served; it is emailed to a client that copies it into a folder of their choosing and run (by selecting a local file to render).
Every time I attempt some solution (e.g., FileReader, etc.), I can only get it to only work in a certain manner with specific browsers (including having to use it differently in the same code depending upon the browser - is this simply my lack of knowledge?).
My question is: Is there one single way to code this for most browsers (including older browsers like IE8)?
If not, I would most appreciate suggestions - both general and specific.
An example would be helpful if possible.
Thank you in advance.
If you're looking for client/browser specific, you won't have access to the file system. That's a security breach that isn't implemented into the browsers. You're going to need to implement some sort of server-side technology to take a crack at the file being handed over, or you will need to strictly specify which browsers are supported (things like FileReader are only IE10 or better).
I've never tried using the INPUT FILE to see if it will load a file before pushing it to the server (in say a FORM POST or a XHR/AJAX push)- but maybe look here:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications
Let's see -- what else. If the file has a specific name, your HTML could reference it in an IFRAME and see if you can't communicate back and forth between the IFRAME and the parent window.
You're really limiting yourself without having a server being able to process it, and the browser range you need. Your best bet might be the File API and restrict the lower limit of browser compatibility?
http://www.html5rocks.com/en/tutorials/file/dndfiles/
AFAIK, there is no way to do this for all browsers. Especially for IE8. If you need a standalone application, the best way is to use C++/Java/C# or any language that allows to create desctop applications.

Can local JavaScript edit/save files on same local machine? How using jQuery?

I'm building a little locally run CSS driven site map for auditing a huge intranet site. I've already coded the ability, to bring up a context menu which provides for options to make updates to the DOM of index.html. I would like to save these changes to index.html.
I know JavaScript doesn't allow manipulation to the client file system, but I've also read in places that it is allowed if the JavaScript is retrieved from the local machine.
Can anyone confirm this and point me in the right direction on how this can be done WITHOUT setting up a local server?
It is possible to write to the local filesystem using the Filewriter object, as described here: http://www.html5rocks.com/en/tutorials/file/filesystem/
It is also possible to edit local files using the File System Access API.
I don't think this is possible even in IE's trusted zone, at least not with pure javascript (you may be able to with an activeX control / maybe flash or silverlight with the right trust levels).
It's a slightly different subject, but there is a writeup on HTML 5 local storage which may help for background reading: http://diveintohtml5.ep.io/storage.html

Creating a Javascript local application(ran in browser)?

I'd like to write an application that would use both Javascript and HTML as for the user interface. The app wouldn't really need an internet connection but will need access to the user's local files.
My first thought was that this would be impossible in a browser due to the security restrictions on the access to local files.
My second thought was to try to use webkit directly from C++ and use Python instead of Javascript, but that seems rather complicated, and I feel like overkilling by using Qt.
My third thought was to use a signed Java applet to make all local accesses, but then I'm not too sure of this either.
Any suggestions on what I should do?
I'll admit that I know very little about this, but it sounds like what you're after is what XUL provides.
From the homepage:
XUL (XML User Interface Language) is Mozilla's XML-based language that lets you build feature-rich cross platform applications that can run connected or disconnected from the Internet.
...
Web developers already familiar with Dynamic HTML (DHTML) will learn XUL quickly and can start building applications right away.
Regarding filesystem access: https://developer.mozilla.org/en/Code_snippets/File_I//O
This article describes local file input/output in chrome JavaScript.
You access the file system using Mozilla XPCOM components. A list of resources and interfaces for local I/O is available for both Files and Streams at XUL Planet.
Because of my lack of familiarity, I'll leave it up to the community to decide whether or not this answer has merit.
EDIT: Making this answer a community wiki since I don't have much real information to offer.
It seems, 5 years after the question was asked, there is a framework to do exactly this: build cross platform desktop app with JavaScript, HTML, and CSS, and with access to local files, http://electron.atom.io/.
I have not used it myself, but it is recommended in other answers.
You can always install needed servers locally and access user's local files that way.
I have been using Server2Go and MAMP
You could - for example - use Cappuccino: It allows you to build Applications in Objective-J (a language written in JavaScript) and run them either in the browser or as a Desktop application with local file access .
Then there is Adobe AIR, which allows you to write apps in JavaScript/HTML and access the file system.
Or you could use the new File Access API: http://hacks.mozilla.org/2009/12/w3c-fileapi-in-firefox-3-6/ (it has big restrictions, though: HTML 5 File API)
JavaScript is a beautiful language! Please update this question with information on which route you choose.
If you're not a Microsoft basher and/or don't mind being bound to IE, a Hypertext Terminal Application (HTA) is another option. I once (long ago) create a complete and pretty large stand alone database-application using HTA.
Do you know PHP? I suggest you to install Wamp or phpTriad or something similar for Windows. That way you can reach to the local files. If it is Linux most of the *nix based operating systems have build in Apache and PHP..
Mozilla currently develops Chromeless, which seems to be able to do exactly what you want and has filesystem access

Accessing contents of a file in a web-application without uploading

As far as I can tell, it is impossible to access the content of files on the user's computer in a web application without first uploading to the server, then re-downloading to user, unless some sort of plug-in is used. (Flash, etc.) Ideally, the user would upload the file directly to localstorage and then scripts would have a chance to process/display/validate/filter without the user having to wait on an upload.
Are there any features in upcoming web standards such as html5 that will allow this? If not, why has there been no effort to make this possible, and how can I work around it without getting stuck with plugins?
EDIT: DO NOT assume that I want to let JavaScript access arbitrary files on the hard drive without any user intervention. We already have the ability to prompt the user for a file and upload it, I only want the ability to prompt the user for a file to be loaded into the browser's memory. I was only hoping HTML5 would have support for something you can already do with both Flash and Java applets.
Doesn't the File API ( http://www.w3.org/TR/FileAPI/ ) do that ?
It's implemented in Firefox 3.6 (see https://developer.mozilla.org/en/DOM/FileReader and https://developer.mozilla.org/en/Using_files_from_web_applications )
According to http://code.google.com/events/io/2010/sessions/html5-status-chrome.html it is supported in chrome.
What you can do in HTML 5 (or 6, 7, ...) depends on what a diverse group of vendors with competing agendas think the new HTML version should or should not do... it is designed by committee.
Giving a web page that you create permission to access resources (e.g. files) on your computer creates a very large security hole (would you like my web page to read your emails and home banking files?)
It's very unlikely that a committee will agree to standardize on a feature that creates a security risk, given that only one browser on one device/platform needs to poorly implement that standard to open Pandora's Box to hackers.
Individual vendors (the people that make plugins) don't have to get a bunch of other companies to agree on a feature. They just implement it, and users get to decide if they trust it enough to install it. Microsoft's first attempt at this was a major security disaster.
Like Raul and Eric pointed out, there is a significant trust issue involved, and requiring people to give code they don't know access to their hard drives will not make your site popular.
You are probably stuck with choosing between plugins or browser specific features/addons for a long time.
That said, you can do cool things by just making the best of this situation. One approach I've used several times is to have an invisible plugin (Applet in my case) present on a web page, but control it entirely via JavaScript, giving the web app a very "natural" look and feel.
Another approach is progressive enhancement of some sort - providing an enhanced experience for users who have the required plugin installed and opt to use it. I've experimented with this on sites such as http://www.pdfcombine.com - users who don't have the Java plugin installed get to merge PDF files by uploading them to a server and downloading the merged file, whereas users with the Java plugin are given the option to do it all locally with the Applet.

Categories

Resources