I've got a web page which needs to be able to load files into the DOM from the local machine on which the browser is running. I've found that this is very easy to do using the HTML 5 File API.
I can just do:
var reader = new FileReader();
reader.onload = function (fileContents) { ... load contents to a div ... }
reader.readAsText(f) //where f is an HTML5 File object
Annoyingly, I need this to work in IE7, and also some earlier versions of Firefox which don't support the API. Is there any easy way to load a local file into the DOM in older browsers?
Many thanks!
No, you cannot do that in older browsers. FileReader (any file system access really) is a new HTML5 feature which is not supported in older browsers.
Your best option in an older browser is either:
A Silverlight, Flash or Java app (or similar) that runs on the client-side and has local file system access.
Having the user upload files using the <input type="file"> element, and do your processing server-side.
Further to the other answers here, it does appear that there's no consistent way of doing this client-side (other than Flash) for older browsers.
For IE7/8 however, I've managed to hack something together using ActiveX.
var filePath = f:\oo.txt;
var fso = new ActiveXObject("Scripting.FileSystemObject");
var textStream = fso.OpenTextFile(filePath);
var fileData = file.ReadAll();
I can then pass this to the same function as reader.onload in the question above. Obviously this is a bad, hacky solution, and liable to be blocked by some security policies - it does at least work for IE7 though!
Looks like you can do that through Flash. Flash alternative for FileReader HTML 5 API
Related
If one searches File on caniuse.com and expands show all, it's evident that older browsers (e.g. Android) have the following issues:
Does not have FileReader support.
Does not support the File constructor.
I want to understand what the first statement means in practice.
For instance, I'm receiving a file via an HTML input element like so:
var img_file = e.target.files[0];
Note that img_file is an object of type File.
Next, I'm reading the first few bytes of the file using a FileReader() object, and then determining the mime type:
var reader = new FileReader();
reader.onload = validate_file;//validates the file's mime type
reader.readAsArrayBuffer(img_file.slice(0,4));
Does "Does not have FileReader support" imply that the statements above will give an error? If so, are there any workarounds for unsupportive browsers? I'd love to see an illustrative example around such workarounds (if they exist).
Note: Please use pure JS for the scope of this question, and sans any 3rd party libraries.
i want to ask that if i want to rename a file in javascript, what can i do ? i have try a function which i see it online but cannot work.
function ChangeFileName()
{
var fso, f;
fso = new ActiveXObject("Scripting.FileSystemObject");
f = fso.GetFile("FilePath/MyFile.txt");
f.name = "MyFile.htm";
}
i search online and it says that the ActiveXObject is only available for IE and i intended to use it on mozilla because mozilla comes with ubuntu.
beside this, is there any method that i can rename a file inside the javascript ? thanks in advance for your help .
It is Javascript (in the browser), right?
If you run in the browser it is not allowed for security reasons. I think there is some way to do this using IE and ActiveX but using Pure Javascript I think it is not possible.
But you can do in JScript in the console, for example to delete a single file:
function MoveFile2Desktop(filespec)
{
var fso;
fso = new ActiveXObject("Scripting.FileSystemObject");
fso.MoveFile(filespec, "newname");
}
No, you cannot rename a file with javascript. Javascript is not able to interact with the user's computer in any way - it is only intended to be used to interact with the content of the web page it is rendered on.
JavaScript has no built in means to interact with a file system.
A host object might provide such a means.
The host object (window) that is available to JavaScript loaded from a web page in a typical web browser exposes no such object. Web pages are not allowed to edit the disks of people visiting their sites. (The exception is IE, with ActiveX, and some security warnings).
If you were running JavaScript in a browser extension or in a different environment (such as node.js) then it might be possible.
I've just watched the mozilla File API file reading as
new FileReader();
etc. and I must ask is there something like that for IE?
Yes, you can use ActiveX' FileSystemObject. However, an confirmation box is shown to the user everytime he runs the code. Some users might not trust you and could choose not to run the ActiveX control.
Also, please note that some users also use non-IE browsers which don't support FileReader (Safari, older versions of Firefox and so on). By adding ActiveX, you still won't have 100% support for file-related APIs.
Internet Explorer 10 also supports the FileReader:
var reader = new FileReader();
reader.onloadend = function(){
// do something with this.result
}
reader.readAsText(readFile);
For managed compatability tables regarding the FileReader, be sure to check out caniuse.com.
If you wanted to provide a fall-back for those who may not be visiting your site in Internet Explorer 10, I would encourage you to do a bit of feature-detection to determine whether or not you want to use the FileReader:
if ( window.FileReader ) {
/* Use the FileReader */
} else {
/* Do something else */
}
Note also that using an ActiveXObject approach isn't necessarily going to work all the time either as some users browse with ActiveX Filtering enabled, meaning you can't touch their file-system, or run any types of plugins in their browser.
if (window.ActiveXObject) {
try {
var fso = new ActiveXObject("Scripting.FileSystemObject");
fso.CopyFile("C:\\Program Files\\GM4IE\\scripts\\source.txt","C:\\Program Files\\GM4IE\\scripts\\target.txt", 1);
fso = null;
}
catch (e) {
alert (e.message);
}
}
I am getting error :
"Automation server can not create object" on the line where I am creating ActiveXObject instance.
I understand that it's considered very bad to access hard-drive data using javascript but I just need it.
I am using IE8 , Greasemonkey4IE to run my javascript.
Thank you,
Mohit
******************************
function WriteFile()
{
var fso = new ActiveXObject("Scripting.FileSystemObject");
fso.CopyFile("C:\\source.txt","C:\\target.txt", 1);
}
I've put the above code inside a simple HTML page and it worked perfect.
http://www.c-point.com/JavaScript/articles/file_access_with_JavaScript.htm
You can find the similar code on above mentioned location.
I modified it a bit, tough.
But when I am trying to run it through GreaseMonkey4IE it simply spitting the same error I specified earlier.
I did it guys, but thanks a lot for your quick and helpful replies.
All I did is :
Go to Tools > Internet options > Security > Custom Level
Under the ActiveX controls and plug-ins, select Enable for Initializing and Script ActiveX controls not marked as safe.
Using native JavaScript, no, it is not generally possible to access a local file. Using plugins and extensions like ActiveX, Flash, or Java you can get around this rule, generally with some difficulty.
For some browser and OS specific exceptions to this general rule, you might want to have a look here:
Local file access with javascript
Note that as of late 2012, the FileReader API has been supported in all major browsers and provides a native JavaScript mechanism for accessing local files that the user nominates (via an input element or by dropping them into the browser).
This still cannot be used to access an arbitrary file by name/path as in the examples in the original question.
HTML5 File API has multiple ways to access local files.
window.requestFileSystem allows you to request access to the filesystem. Browser support is very poor on this (Chrome only).
FileReader is the HTML5 FileReader API that allows you to programatically read files that users select through a <input type='file' /> Browser support is better on this.
You should use fallbacks like flash and POST to a server for full file access.
Generally reading arbitary files is considered "cheating the browser" so I you'll either have to use secure HTML5, ActiveX or Flash. All 3 of those require user permissions.
After some research I have found:
var fso = new ActiveXObject("Scripting.FileSystemObject");
//This line will create a xml file on local disk, C drive
fh = fso.CreateTextFile( "C:\\fileName.xml", true);
fh.WriteLine("this is going to be written in fileName.xml");
This is how we can do it.There are other methods also.
Accessing local file system is very bad thing to do but yes we can do it.
Automation server can not create object
To get rid of this error go to Tools → Internet Options → Security → select Internet icon → click Custom level → select Enable for Initialize and script ActiveX controls not marked as safe for scripting.
I have not tested this on any other berowser except IE8, but I am sure it will work.
am trying to read few lines from a txt file using JS,and i have this code but its not working for some reason,,
var fso = new ActiveXObject("Scripting.FileSystemObject");
var s = fso.OpenTextFile("C:\\wamp\\www\\22.txt", 1, true);
var row = s.ReadLine();
alert(row);
any suggestions?!
Make sure your browser has the right permissions to perform that kind of operation. Usually, browsers won't allow direct file system access by default.
Only IE supports ActiveXObject. Trying to use ActiveXObject on any other browser will fail because there is no such variable defined.
You need to either limit yourself to IE, write a browser plugin instead, or give up trying to get file system access on other browsers and proxy files through a server instead.
If you're running WAMP anyway, just use standard AJAX to fetch the file 22.txt from the server. The easiest way is to use jQuery, where the code would be:
$.get("22.txt", function(data) {
alert(data);
}
You can search for how to do this without jQuery if you wish.