Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FileReader - which encodings are supported?

Want to simlpy read user-input files as text.

Can rely on modern browser usage, so I use FileReader for that (which works like a charm).

reader.readAsText(myfile, encoding);

I know that encoding defaults to UTF-8.

But as my users will upload files from various sources (Windows, Mac, Linux) and various browsers I ask the user to provide the encoding via a select box.

So e.g. for a western european windows text file I expect the user to choose e.g. windows-1252.

I was not able to find a list of supported encodings for FileReader (assuming this is at least depending on the browser).

I am not asking to auto-determine the encoding, I just want to fill my select box in a way like:

<select id="encoding">
   <option value="windows-1252">Windows (Western Latin)</option>
   <option value="utf-8">UTF-8</option>
   <option value="...">...</option>
</select>

So my questions are:

  1. Where do I get a list of supported encodings to fill the option values?
  2. How to determine the exact writing of those values (is it 'utf8' or 'UTF-8' or...) and are those depending on the OS / browser?
  3. Does readAsText(myfile, unsupportedEncoding) throw any error which I can catch if encoding is not supported?

I'd prefer not to use any major 3rd party libraries for that.

Bonus Question:

Is there a simple way to get meaningful translations of the values, e.g. cp10029 means Mac (Central European)?

like image 941
LBA Avatar asked Nov 24 '16 15:11

LBA


People also ask

What does the readAsText () function return?

The readAsText() method is used to read the contents of the specified Blob or File . When the read operation is complete, the readyState is changed to DONE , the loadend event is triggered, and the result property contains the contents of the file as a text string.

What does FileReader do in Javascript?

The FileReader object lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.

What does FileReader return?

The FileReader result property returns the file's contents. This property is only valid after the read operation is complete, and the format of the data depends on which of the methods was used to initiate the read operation.


1 Answers

  1. Encoding standarts - https://github.com/whatwg/encoding/ (in JSON format - https://github.com/whatwg/encoding/blob/master/encodings.json. Use values from fields "labels")

enter image description here

  1. Encoding parameter is not case sensitive.

  2. NO, readAsText(myfile, unsupportedEncoding) not throw any error. The function simply uses the default encoding("utf8").

    window.onload = function() {
    
        //Check File API support
        if (window.File && window.FileList && window.FileReader) {
            var filesInput = document.getElementById("files");
    
            filesInput.addEventListener("change", function(event) {
    
                var files = event.target.files; //FileList object
                var output = document.getElementById("result");
    
                for (var i = 0; i < files.length; i++) {
                    var file = files[i];
    
                    //Only plain text
                    if (!file.type.match('plain')) continue;
    
                    var picReader = new FileReader();
    
                    picReader.addEventListener("load", function(event) {
    
                        var textFile = event.target;
    
                        var div = document.createElement("div");
    
                        div.innerText = textFile.result;
    
                        output.insertBefore(div, null);
    
                    });
                    //Read the text file
                    picReader.readAsText(file, "cP1251");
                }
    
            });
        }
        else {
            console.log("Your browser does not support File API");
        }
    }
    

Demo

To get translations of the values you can use JSON file (https://github.com/whatwg/encoding/blob/master/encodings.json), parameter "heading" and "name".

like image 84
Artee Avatar answered Oct 09 '22 14:10

Artee