I am trying to have a web application access local files. A web IDE like vscode can directly change or rename local files. While vscode doesn't seem to use a tag like <input type="file" />
My hope is to load a local directory and control the files like remove/rename through my web application. The web IDE's solution may provide some reference.
How does vscode access the local file?
vscode.dev uses the File System Access API, which allows web applications to directly read and modify the filesystem.
Rather than using a <input type="file" />, it calls window.showOpenFilePicker() to get a FileSystemFileHandle, which can then, in turn, be read and converted into a FileSystemWritableFileStream to which the browser can write and save files. Similarly, the API can handle directories and browse the file hierarchy.
Of course, this is a simplification, as I could not possibly go through every detail of the API in this answer. The MDN article has a lot of examples and thorough documentation that you will want to read through. For testing, it should be noted that the API is only available on sites served through HTTPS, so you're going to need to set up SSL for your localhost. Also, the API is not available in all browsers, so be sure to check the compatibility table.
Related
I am building a chrome extension, I want to read and write in the user's disk storage. I want to make folders in users' documents, store screenshots, and delete and read. Is it possible?
I have searched, but could not find a way to do this, I want to know if it is possible, if it is possible, could you tell me, how to do that, or refer to some docs?
Extensions cannot access the file system directly.
(except in very limited ways)
Native Messaging allows extensions to access the file system, by passing messages to and receiving messages from a native application, such as a Python script.
The native application (which you have to program yourself) then accesses the file system directly.
Because your question isn't specific, I can only refer you to the official documentation:
https://developer.chrome.com/docs/apps/nativeMessaging/
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.
Is it possible to create something like Google Chrome's Workspaces, but with HTML5, Javascript or some other web based language?
I'm currently working on a web based ide, and I'm interested in implementing something similar to how Google Chrome handles local file editing. Basically asking the user for permission for accessing files in a particular directory that they select.
I've managed to open files that the user selects and show its content, but after editing there's no way to save it back to the same file, short of downloading it every time they save.
Is this possible with current technologies? or would I have to use something like Java?
The Achilles heel of your plan comes from a misunderstanding of the File System API. The most common misunderstanding about the File System API is that it might somehow give scripts direct read/write access to the client's local file system (e.g., C://whatever). As has been widely documented, including in the tag Wiki for HTML5-FileSystem here on Stackoverflow, "the File System API cannot directly access the local file system." The API provide access to a "virtual" file system, not the user's local file system. You cannot, therefore, use the File System API to "ask the user for permission for accessing files in a particular directory that they select," as you're seeking to do for your browser-based IDE project.
I am adding a google hangout api to my application, and am trying to keep the JS locally for development purposes.
The XML file is available publicly on a server (as required by google).
The only way I was able to get it to work right now is to point the XML file to my local server using an HTTPS protocol. Otherwise, I get an error in the JS browser console that the insecure JS code is blocked.
This is the snippet that asks for the local JS file:
<script src="//localhost:3000/hangouts.js"></script>
The Hangout documentation and example apps don't reference https in any way and make it seem like it should work out of the box with a local JS file, so hopefully this can serve as another point of reference.
It seems like a pain to have to run the local server with SSL in development mode, so I'm wondering if there is a way around this or a better way to handle it?
Take a look at the hangoutiframer. It's a tool that provides an interface to automatically generate an .xml file that wraps an HTML page, and allows you to host your html where ever you want during developmen.
I am writing a very simple Elearning application for my virtual class. I wander if there may be a way using Javascript that works on the background to read the content of a file located on the user's computer and send its content to my server. Any one knows an open source code of Javascript doing this ?
I think that this can be done using XMLHttpRequest, i.e. AJAX, but I could not graps my way through. Any help
You can't gain access to a local file in browser because you are in sandbox, but there are some File API for Html 5 that you can programmatically select them and access their data just have a look at the following link
File API
Web applications should have the ability to manipulate as wide as possible a range of user input, including files that a user may wish to upload to a remote server or manipulate inside a rich web application. This specification defines the basic representations for files, lists of files, errors raised by access to files, and programmatic ways to read files. Additionally, this specification also defines an interface that represents "raw data" which can be asynchronously processed on the main thread of conforming user agents. The interfaces and API defined in this specification can be used with other interfaces and APIs exposed to the web platform.
Unfortunately there is no way to give JavaScript any access to the user's local files.
There is a very serious security issue with that.
There is however API for that on IE browsers (Which give nice big warning when you attempt to access the files)
I recommend to ask from the user to upload his own file (using <input type="file" />) and upload it to the server.
HTML5 specifications specify an API to access the local filesystem. It is supported in the latest versions of Chrome. See here for details http://net.tutsplus.com/tutorials/html-css-techniques/toying-with-the-html5-filesystem-api/.
If the environment is controlled (i.e in a classroom or intranet) you can build your application using this API.