JS HTML 5 - Cannot integrate sample code - help

Question

I have found these code snippets http://www.html5rocks.com/en/tutorials/file/dndfiles/#toc-selecting-files-input and I want to see how they work but the code doesn't work in my case. Maybe I do something wrong with its integration? Please share some integration snippets because I am really new in JS :)

here is my maybe wrong integration...

<html>

  <head>
<script language="javascript" type="text/javascript">

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
  // Great success! All the File APIs are supported.
} else {
  alert('The File APIs are not fully supported in this browser.');
}


  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
      output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ',
                  f.size, ' bytes, last modified: ',
                  f.lastModifiedDate.toLocaleDateString(), '</li>');
    }
    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
</head>

<body>
<div>
<input type="file" id="files" name="files[]" multiple />
  <output id="list"></output>
</div>
<body>


</html>

P.S> My Internet Browser: FF 5.0

All useful comments are appreciated :)

What doesn't work in your case? What *is* your case? How have you tried to integrate that snippet into your case? Let's assume the snippet you linked to works. So, what we need to see is an example of how you've tried to use it. — tjm, Jul 04 '11 at 01:13
I can see the file input and I can select file but I cannot see it is added below as the example shows :( — user592704, Jul 04 '11 at 01:15

tjm · Accepted Answer · 2011-07-04T14:49:40.067

3

There are a couple of immediate problems with your example firstly, your close <body> is actually another open <body>! That, won't be causing your problem though.

The second error, is the line,

document.getElementById('files').addEventListener('change', handleFileSelect, false);

this can't be out in the open, so to speak, because the element with id=files doesn't exist until the window has completed loading, so you need to wrap that up in a function and call it on window load (or better, in document.ready if you're using jQuery or similar). Like this,

window.onload = function() {
    document.getElementById('files').addEventListener('change', handleFileSelect, false);
};

Unfortunately, after both of these I still get an error, f.lastModifiedDate is undefined. Implying the lastModifiedDate is not a property of a File object. Whether this is an error in the snippet you linked too or something else I'm not sure. I'm trying to find out.

Update

Ok. Well as you said you wanted to know whether this is a problem with Firefox or not, so I went and tested in Chrome and it worked fine. My conclusion being, that the lastModifiedDate attribute of a File object is not implemented in Firefox (5) but is in Chrome. (This can be confirmed by iterating over the available attributes of a File object).

What this doesn't explain is why trying the example in the link you posted works in Firefox but copying and pasting the example doesn't. The only reason this could be is that the code in the snippet, is not quite exactly the same as the code actually being used on the page. There must be some check for whether the fileModifiedDate attribute actually exists. Sure enough, looking at the source of the page in question you'll see that instead of this,

f.lastModifiedDate.toLocaleDateString(),

it seems they are using this,

f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',

So replacing that line should fix the problem. Here's a jsfiddle with it working (in Chrome and Firefox 5 at least).

edited Jul 04 '11 at 14:49

answered Jul 04 '11 at 01:58

tjm

7,500
2
32
53

I replaced code with window.onload = function() { document.getElementById('files').addEventListener('change', handleFileSelect, false); }; But it doesn't work :( – user592704 Jul 04 '11 at 02:10
Please show your running code snoppet because I need to know maybe this is all the FF 5.0 problem :( – user592704 Jul 04 '11 at 02:32
Thank you but I still don't get it because the example shows JS and HTML in separate way so I am not sure where the JS code is really placed as a whole html code should be? Should it be placed in head tags or where? This make me confused :( – user592704 Jul 04 '11 at 16:04
@user The javascript in the jsfiddle works just as if you had included it as an external file. If you want it inline, just copy and paste it in between your `script` tags in your `head` section, as you have in your original example. Hope this helps. – tjm Jul 04 '11 at 16:08
But why IE doesnt work with File API? Which IE version supports File API? – user592704 Jul 04 '11 at 16:15
@user That I don't know. It should probably be a new question. But before you ask it, there's a similar question here : http://stackoverflow.com/questions/4349144/will-ie9-support-the-html5-file-api, that may help. – tjm Jul 04 '11 at 16:20
OK :) Concerning the modified date... Hmm so the snippet uses f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a' and it is a boolean expression, right? If you and me get n/a only it means that it returns false only. But why? – user592704 Jul 04 '11 at 16:25
It returns false when `f.lastModifiedDate` is undefined. Which as we've seen it *always* is in Firefox. If you're confused about it's use, again ask another question, or better yet do a search for "ternary operator", that's what the `? ... : ...` syntax is called. – tjm Jul 04 '11 at 16:32

score 1 · Answer 2 · answered Jul 04 '11 at 02:01

First of all, you can't execute this line of the code:

document.getElementById('files').addEventListener('change', handleFileSelect, false);

from code in the HEAD tag. The document has not yet loaded so the 'files' object does not exist so that line of code will, at best, always fail.

You must wait for the document to finish loading before executing. If you are not using any library (like jQuery or YUI), then you can hook up to the onload method for the page and run your code from that.

I tried to replace elements but it didn't help :( Does FF 5.0 support File API? — user592704, Jul 04 '11 at 02:33

score 0 · Answer 3 · answered Jul 04 '11 at 16:13

So, I have modified the code as

<html>

    <head>

<script>

function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object
    // files is a FileList of File objects. List some properties.
    var output = [];
    for (var i = 0, f; f = files[i]; i++) {
        output.push('<li><strong>', f.name, '</strong> (', f.type || 'n/a', ') - ', f.size,
          ' bytes, last modified: ', f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',  
          '</li>');
    }

    document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

window.onload = function() {

    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        // Great success! All the File APIs are supported.
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }

    document.getElementById('files').addEventListener('change', handleFileSelect, false);
};
</script>

    </head>

    <body>
        <div>
            <input type="file" id="files" name="files[]" multiple />

            <output id="list"></output>
        </div>
    </body>
</html>

and it worked in my FF 5.0 :)

@tjm, thank you so much for really good code sample

JS HTML 5 - Cannot integrate sample code - help

3 Answers3