I'm testing some of the new JS filesystem abilities, i.e. creating an empty text file in the local filesystem. I'm running the HTML & JS files from a local path (file:///). For this purpose I launched Google Chrome with the --allow-file-access-from-files flag from the CLI. The filesystem request is PERSISTENT (and works).
I have read up on different posts about the filesystem, copied and modified some of the code in the tutorials; When I launch the HTML file, my custom success/ failure messages are outputted in the console;
This is the result:
Opened file system:/ // this is the root path of the JS Filesystem.
/wtf.txt // this is the name and path of the text file I created+ it's a success
However, when I look at my directory's (both system and application root), there's no .txt file with the name I assigned to it. How can I know where Javascript really wrote this file? In what "root" (since the 'root' cannot be assigned)? What does it mean that the FileSystem is a 'sandbox'? That I cannot access the (virtual?) contents of it on my local drive, but only with JS? If this is the case, is there a way to prompt the user to save the file?
Thanks in advance for your answers
It seems you're expecting the File System API to work locally similar to an OS file system. The client doesn't work like that. In fact, and API is designed to be your interface, as a programmer, to the files and directories -- the client itself (e.g., Chrome, etc.) will handle the rest on the local level. The API is not designed by which you can create a file via the browser and easily access it via the operating system.
How can I know where Javascript really wrote this file? In what "root" (since the 'root' cannot be assigned)?
Technically speaking, each client can store locally as it chooses. So while you can go to the local file system to look for the file, something is wrong with your approach if you're attempting to do so; the File System API is not meant for that. To your question, you can assume that if there's content the client's storage area (e.g., for Chrome it's something like "C:\Users\USERNAME\AppData\Local\Google\Chrome\User Data\Default\File System\") then you can assume that the JavaScript wrote it. But again, it's not set up for user friendly browsing on the local system.
What does it mean that the FileSystem is a 'sandbox'?
Sandbox simply means an area created and set aside for a specific purpose, outside of which the client cannot see/access. See this from Mozilla: https://developer.mozilla.org/en-US/docs/WebGuide/API/File_System/Introduction#virtual
That I cannot access the (virtual?) contents of it on my local drive, but only with JS?
That is correct, and by design.
If this is the case, is there a way to prompt the user to save the file?
If I understand your question right, you're asking if there is a way to provide a specific file to the user and have it prompt them to save it locally. Well, of course if you provide a link to the file (or push it, a different discussion) then the client will prompt the user to save/store it if their platform allows them to do so. But you have no control over where they save it locally nor can you later get it it. If I've misunderstood your question, comment below and I'll follow up.
Related
I'm trying to develop HTML base editor equipped with browsing local files function.
I know basically that is restricted by browser to open local files.
However I found out some method doing this activity.
using path begin from "localexplorer://" it works perfect for English path name.
But when I use Japanese folder name or file name it becomes error.
I tried to convert SJIS format that file names but this is not work.
Here is code.
[![error[![\]\[1\]][1]][1]][1]url = 'localexplorer:' + event.target.innerText;
array = str2array(url);
sjis_array = Encoding.convert(array, "SJIS", "UNICODE");
sjis= Encoding.codeToString(sjis_array);
window.open(url, '_blank');
According to browser security, javascript is only allowed to run in the sandbox, you cannot read or write arbitrary files:
JavaScript and the DOM provide the potential for malicious authors to
deliver scripts to run on a client computer via the Web. Browser
authors minimize this risk using two restrictions. First, scripts run
in a sandbox in which they can only perform Web-related actions, not
general-purpose programming tasks like creating files.
If the user selects a file via <input type="file">, you could try to read the content of the file through FileReader API, like this case: How to open a local disk file with JavaScript?
If you need to interact with files on the user's local device or a user-accessible network file system, you can try to use the File System Access API. And this must be done in a secure context, and must be called from within a user gesture. You can also read this article to learn more about it：The File System Access API: simplifying access to local files.
Thank you for your response, I solved this issue by Forefox plug in extensions, it seems like chrome did not support this functions even if there is plug in extensions.
I created a prototype about a tool that would analyze source code and write metadata about it in files to be read by a web application served locally.
Now I need to specify details about how I'll implement it. The data would need to go both ways, first the backend write to file and the frontend read from file, second the frontend write to file and backend read from file.
My question is about how I do the second part, saving from the browser to local files, knowing that I will be serving the page locally.
I've found this api https://web.dev/native-file-system/ that might be what I need, but it's pretty new and requires permission from the user. I guess I can do it differently because I'll serve it locally.
For more context, here's the video of my prototype
Used Filesaver.js plugins to download a text file. By default file download in My download folder. Need to store the downloaded file in a specific folder.
It is not possible... fortunately! Imagine what would happen if JS which runs in your browser could change your filesystem. The security hole would be so big that everyone would (and definitely should) stop using the Internet. Imagine a situation where I've built a website which onload fires the code which save a file in your filesystem. The file lands in your cron.daily directory (suppose you use Linux). What is the file doing? - you may ask (if you knew that it's been even saved :smiling_imp:). Nothing special - just looking for some private data and when finished it deletes random files from /usr/bin, /proc, /sys and maybe /etc - just to see what happens.
Do you see the problem now? The code which runs in your browser before you can react to this cannot have such power to save anything in your filesystem. The only thing you can do to give the user a file is to use a module like Filesaver.js which, in fact, does not have access to user's file system at all. It just makes a GET request to the file directly and it's the browser which downloads the file (because that's how a browser works). So the only way you can change the location of the downloaded file is to change the browser settings. No other way I know of.
The answer is No,
changing a directory is not possible due to security reasons in the
File API.
https://github.com/eligrey/FileSaver.js/issues/42
I am working on an application that should take file system path as directory and then further processing is done on that path. The code is written into javascript. I do no want to use Node.js or any external library for validation.
We just want to give path : C:/Users/Desktop/Test_Folder
How can we validate that path in js?
We need the solution to be worked on Windows, Linux and Mac OS.
If this is just an application in browser, then, generally, it is not possible. See the following questions:
Local file access with javascript
https://stackoverflow.com/questions/24369131/is-html5-file-api-dead
List local directory on Web Application
There was an attempt of a standardized file system API, which was discontinued. Seems like it only worked in Chrome anyway.
Update
A quote from the Chrome documentation:
Use the chrome.fileSystem API to create, read, navigate, and write to the user's local file system. With this API, Chrome Apps can read and write to a user-selected location. For example, a text editor app can use the API to read and write local documents. All failures are notified via chrome.runtime.lastError.
I am working on project for desktop application. I am using Qt controls with visual c++.
I am loading an html file in the QWebView as,
m_pWebView->load(QUrl("../../../demo/index_Splash_Screen.html"));
Now, what i want is, say, I have some .zip files in my location "c:\demo", I want list (or array of file names) of the files present in that directory.
How can i do this through javascript ?
PS: I went through this link, but it didnt match my requirement. I have not worked with of html, javascript and jquery. Please help me.
I'm afraid you cannot access local files or directories using javascript due to security issues.
Edit: I hadn't thought about the file api so thought for a moment this might not be true, but without some user input to give permission, this still cannot be done.
This question has a good response from PhilNicholas:
I'm afraid I may be the bearer of bad news for your design: The action
you are requesting expressly violates the security model as specified
in the File API spec. The client implementation of FileReader() must
make sure that "all files that are being read by FileReader objects
have first been selected by the user." (W3C File API , 13. Security
Considerations: http://www.w3.org/TR/FileAPI/#security-discussion).
It would be a huge security risk of browser scripts could just
arbitrarily open and read any file from a path without any user
interaction. No browser manufacturer would allow unfettered access to
the entire file system like that.
Thinking about it however, if it is all being run locally, you could use ajax to query a server side script that could return the directory you request.
If it is a Windows application then you could access the local filesystem by using ActiveX objects. You might have a look at this link Reading a txt file from Javascript
Note that activeX usage is possible only when using IE as browser/engine; I used to need it a while ago for developing an HTML application (.hta files).