HTML5 Filereader Alternative

HTML5 FileReader alternative

Ended up not using FileReader at all, instead I looped through event.files and got each file by files[i] and sent an AJAX request by XHR with a FormData object (worked for me because I decided I don't need to get the file data):

var xhrPool = {};
var dt = e.dataTransfer;
var files = (e.files || dt.files);
for (var i = 0; i < files.length; i++) {
    var file = files[i];
    // more code...

    xhrPool[i] = getXMLHttpRequest();
    xhrPool[i].upload.onprogress = uploadProgress;
    initXHRRequest(xhrPool[i], i, file);
    data = initFormData(i, file);

    xhrPool[i].send(data);
}

function initFormData(uploaded, file) {
    var data = new FormData();
    data.append(uploaded, file);
    // parameters...

    return data;
}

function uploadProgress() {
    // code..
}

function initXHRRequest(xhr, uploaded, file) {
    // code... onreadystatechange...
    xhr.open("POST", "ajax/upload.php");
    xhr.setRequestHeader("X-File-Name", file.name);
}

function getXMLHttpRequest() 
{
    if (window.XMLHttpRequest) {
        return new XMLHttpRequest();
    }
    else {
        try {
            return new ActiveXObject("MSXML2.XMLHTTP.3.0");
        }
        catch(ex) {
            return null;
        }
    }
}

HTML 4 equivalent of HTML 5's FileReader?

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!

HTML5 FileReader equivalent for nodejs 'fs'

There is no* fs equivalent in web APIs, for obvious security reasons.

fs -> filesystem, and browsers won't give access to the user's filesystem to any random script on the web.

• You can read files with a FileReader,
• you can load files from a server with XHR, or you can ask your user to give you files from their filesystem,
• and you can prompt your user to save files.

But none of these operations will be done directly from the user's file-system, without his own action.

(*Actually we could consider IndexedDB and alike as filesystems, but they can't be compared to fs either...)

Is there an alternative for File() constructor for Safari and IE?

I Suggest to use the blob api, I've found the same problem and I solved like that:

var html = <svg>whatever on svg </svg>
var fileName = "myfile.svg";
var blob = new Blob([html], {type: 'image/svg'});
blob.lastModifiedDate = new Date();
// var blobAttrs = {type: "image/svg"};
// var file = new File([html], fileName, blobAttrs);
var formData = new FormData();
formData.append("file",blob,fileName);

It is not a "file", but you can use it like it was.

Read a file synchronously in Javascript

Synchronous tasks (blocking) are generally bad. If there is no real reason to do that synchronously, I strongly recommend you to use the event callback.

Imagine your file is broken and the HTML5 api cant read, it wont give you the result. It would break your code and block the site. Or, someone could select a 10GB file, which would freeze your HTML page until the file is completely loaded. With that asynchronous event handler you are able to catch possible errors.

To work around limitations with callbacks, i use a simple trick:

var ready = false;
var result = '';

var check = function() {
    if (ready === true) {
         // do what you want with the result variable
         return;
    }
    setTimeout(check, 1000);
}

check();

var reader = new FileReader();
reader.onloadend = function(evt) {
    // file is loaded
    result = evt.target.result;
    
    ready = true;
};
reader.readAsDataURL(file);

the check function, checks every second if the ready flag variable is set to true. If so, you can be sure the result is available.

It may not be best practice to do so, but i made a webapp using this technique about 30 times with more than 10 setTimeouts at the same time running, and experienced no problem until now.

---

Related Topics