I've been setting up an import script for plain-text files in a web application.

My script is as follows:

function dataImport(files) {
    confirm("Are you sure you want to import the selected file? This will overwrite any data that is currently saved in the application workspace.");
    for (i = 0; i < files.length; i++) {
        file = files[i]
        console.log(file)
        var reader = new FileReader()
        ret = []
        reader.onload = function(e) {
            window.localStorage.setItem("ApplicationData", e.target.result);
        }
        reader.onerror = function(stuff) {
            console.log("error", stuff)
            console.log (stuff.getMessage())
        }
        reader.readAsText(file)
    }
}

It's essentially a modification of that posed on this question.

However, at the moment the user can technically attempt to import any file. As it's designed for plain-text files, problems can arise if a different type of file is imported.

I've noticed in the console that the browser detects the content-type of the file being imported. Here's an example.

fileName: "ideas.txt"
fileSize: 377
name: "ideas.txt"
size: 377
type: "text/plain"
webkitRelativePath: ""

Is it possible, then, to set up an argument where the script detects the content-type of the file, and if it isn't one of a number of specified suitable content-types, have the script refuse to import it?

Thanks in advance for any advice.

I've been setting up an import script for plain-text files in a web application.

My script is as follows:

function dataImport(files) {
    confirm("Are you sure you want to import the selected file? This will overwrite any data that is currently saved in the application workspace.");
    for (i = 0; i < files.length; i++) {
        file = files[i]
        console.log(file)
        var reader = new FileReader()
        ret = []
        reader.onload = function(e) {
            window.localStorage.setItem("ApplicationData", e.target.result);
        }
        reader.onerror = function(stuff) {
            console.log("error", stuff)
            console.log (stuff.getMessage())
        }
        reader.readAsText(file)
    }
}

It's essentially a modification of that posed on this question.

However, at the moment the user can technically attempt to import any file. As it's designed for plain-text files, problems can arise if a different type of file is imported.

I've noticed in the console that the browser detects the content-type of the file being imported. Here's an example.

fileName: "ideas.txt"
fileSize: 377
name: "ideas.txt"
size: 377
type: "text/plain"
webkitRelativePath: ""

Is it possible, then, to set up an argument where the script detects the content-type of the file, and if it isn't one of a number of specified suitable content-types, have the script refuse to import it?

Thanks in advance for any advice.

• javascript
• import
• content-type
• plaintext
• filereader

• I think, by 'detect content-type' u mean, inferring from the file's extension.. – Robin Maben Commented Nov 24, 2010 at 7:25
• inferring by the extension would be one way to do it, but I was hoping that I could access whatever tells the browser that a file is, for example, "text/plain" or "text/x-tex" or "image/jpeg" and so on. – 木川 炎星 Commented Nov 24, 2010 at 8:20

2 Answers 2

if (file.type.match('text/plain')) {
    // file type is text/plain
} else {
    // file type is not text/plain
}

String.match is a RegEx, so if you would want to check, if the file is any type of text, you could do that:

if (file.type.match('text.*')) {
    // file type starts with text
} else {
    // file type does not start with text
}

The Content Type can be read with the following code:

// Note: File is a file object than can be read by the HTML5 FileReader API
var reader = new FileReader();

reader.onload = function(event) {
  var dataURL = event.target.result;
  var mimeType = dataURL.split(",")[0].split(":")[1].split(";")[0];
  alert(mimeType);
};

reader.readAsDataURL(file);