CODEWITHSUNDEEP
javascriptfileapi
user592704
user592704

Reputation: 3704

JS HTML 5 - Cannot integrate sample code - help

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 :)

Upvotes: 1

Views: 2254

Answers (3)

user592704
user592704

Reputation: 3704

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

Upvotes: 0

tjm
tjm

Reputation: 7550

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).

Upvotes: 3

jfriend00
jfriend00

Reputation: 707328

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.

Upvotes: 1

Related Questions