file input files not read onChange on mobile

Question

I'm building a puzzle app in React that allows the user to upload their own puzzles. This works fine on the web (the user clicks the input's label and it opens a dialog. When the user picks a file the onChange event is triggered), but on mobile, or at least on Chrome on Android, the files are not read...

This is where the input is declared:

        <div className="file-input-wrapper">
            <label for="puzzleUpload" className="button-dark">Upload Puzzle(s)</label>
            <input type="file"
                   accept="application/json"
                   multiple
                   id="puzzleUpload"
                   onChange={handleFiles}/>
        </div>

and this is the handleFiles() method

// when a file is uploaded, this checks to see that it's the right type, then adds it to the puzzle list
const handleFiles = () => {
    var selectedFiles = document.getElementById('puzzleUpload').files;


    // checks if the JSON is a valid puzzle
    const validPuzzle = (puzzle) => {
        let keys = ["name", "entitySetID", "logic", "size"];
        return keys.every((key) => {return puzzle.hasOwnProperty(key)});
    };


    const onLoad = (event) => {
        let puzzle = JSON.parse(event.target.result);
        if(validPuzzle(puzzle)) {
            appendPuzzleList(puzzle);
        }
        else {
            console.log("JSON file does not contain a properly formatted Logike puzzle")
        }
    };

    //checks the file type before attempting to read it
    for (let i = 0; i < selectedFiles.length; i++) {
        if(selectedFiles[i].type === 'application/json') {
            //creates new readers so that it can read many files sequentially.
            var reader = new FileReader();
            reader.onload = onLoad;

            reader.readAsText(selectedFiles[i]);
        }
    }
};

A working prototype with the most recent code can be found at http://logike.confusedretriever.com and it's possible to quickly write compatible JSON using the builder in the app.

I've been looking up solutions for the past hour and a half and have come up empty handed, so any help would be greatly appreciated! I read the FileReader docs, and everything seems to be supported, so I'm kind of stumped.

Interestingly, the file IS selected (you can see the filename in the ugly default version of the input once it's selected, but I hide it via CSS), so I'm tempted to implement a mobile-only button to trigger the event, if there isn't a more legit solution...

Answer 1

Chrome uses the OS's list of known MIME Types.
I guess Android doesn't know about "application/json", and at least, doesn't map the .json extension to this MIME type, this means that when you upload your File in this browser, you won't have the correct type property set, instead, it is set to the empty string ("").

But anyway, you shouldn't trust this type property, ever.

So you could always avoid some generic types, like image/*, video/*, but the only reliable way to know if it was a valid JSON file or not will be by actually reading the data contained in your file.

But I understand you don't want to start this operation if your user provides a huge file, like a video.

One simple solution might be to check the size property instead, if you know in which range your generated files might come.

One less simple but not so hard either solution would be to prepend a magic number (a.k.a File Signature)to your generated files (if your app is the only way to handle these files).

Then you would just have to check this magic number only before going to read the whole file:

// some magic-number (here "•MJS")
const MAGIC_NB = new Uint8Array([226, 128, 162, 77, 74, 83]);

// creates a json-like File, with our magic_nb prepended
function generateFile(data) {
  const str = JSON.stringify(data);
  const blob = new Blob([MAGIC_NB, str], {
    type: 'application/myjson' // won't be used anyway
  });
  return new File([blob], 'my_file.json');
}

// checks whether the provided blob starts with our magic numbers or not
function checkFile(blob) {
  return new Promise((res, rej) => {
    const reader = new FileReader();
    reader.onload = e => {
      const arr = new Uint8Array(reader.result);
      res(!arr.some((v, i) => MAGIC_NB[i] !== v));
    };
    reader.onerror = rej;
    // read only the length of our magic nb
    reader.readAsArrayBuffer(blob.slice(0, MAGIC_NB.length));
  });
}

function handleFile(file) {
  return checkFile(file).then(isValid => {
    if (isValid) {
      return readFile(file);
    } else {
      throw new Error('invalid file');
    }
  });
}

function readFile(file) {
  return new Promise((res, rej) => {
    const reader = new FileReader();
    reader.onload = e => res(JSON.parse(reader.result));
    reader.onerror = rej;
    // don't read the magic_nb part again
    reader.readAsText(file.slice(MAGIC_NB.length));
  });
}

const my_file = generateFile({
  key: 'value'
});
handleFile(my_file)
  .then(obj => console.log(obj))
  .catch(console.error);

And in the same way note that all browsers won't accept all the schemes for the accept attribute, and that you might want to double your MIME notation with a simple extension one (anyway even MIMEs are checked only against this extension).