Jump to content

open file dialog trouble


Recommended Posts



I have a function that opens a file dialog, lets me choose a file from my hd, and then loads the contents as JSON data into an object. So far, so good: all the individual elements work. But there's a problem: I can't seem to get it right so that I can read the file name from the file dialog correctly, unless I pause the program in dev tools, and I'm just terribly confused.


This is the code:

   loadFile: function() {        var file, fr;                var input = document.createElement("INPUT");        input.setAttribute("type", "file");        document.body.appendChild(input);        input.click();// here comes the problematic bit        for (var i = 0; i < 1e7; i++) {            if (input.files.length == 1) break;        }         // here ends the problematic bit        file = input.files[0]; // this is the line that I only want executed after i have chosen a file name in the file dialog        fr = new FileReader();        fr.onload = receivedText;        fr.readAsText(file);        document.body.removeChild(input);        function receivedText(e) {            lines = e.target.result;            var newArr = JSON.parse(lines);        }    },

I've put some comments in there. What happens is that the statement in the for loop is never evaluated. And it makes sense, too, since the loading can't take place while the CPU is counting up i. But how do I make sure that the next line is only executed after I'm sure that I've chosen a file in the dialog (i.e. that input.files[0] exists)?

Link to comment
Share on other sites

So, with the help of a few friends on twitter this got solved, if anybody else ever runs into the problem, this is what I changed:


    loadFile: function() {        var input = document.createElement("INPUT");        input.setAttribute("type", "file");        input.setAttribute("id", "fileinput");            document.body.appendChild(input);        input.addEventListener("change", this.fileChosen.bind(this));                input.click();        document.body.removeChild(input);            },    fileChosen: function(e) {                var fr = new FileReader();        fr.onload = receivedText.bind(this);        fr.readAsText(e.currentTarget.files[0]);                function receivedText(e) {                        lines = e.target.result;            var tempObj = JSON.parse(lines);                   }            }

The problem had been that while javascript was stuck in the loop doing nothing in particular, it was too busy to receive word from the window that a file had been chosen. So I needed to move the code that should only happen after the choice into its own function and execute that when the file choice came to javascript's attention. Not being a programmer by trade, many of these basic concepts are exceedingly alien to me... I just want to make a game goddammit :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...