title: Drag and Drop Only Animated GIFs and Preview them
body: <p>I'm trying to create a box where i can drag an animated gif onto the page and then in a form box below it add tags so I can sent them via POST to the server via AJAX. I'm still learning javascript but I've misstepped somewhere Here is the code I'm fiddling with to do a preview when something is dropped on the box to show it in the holder div:</p>
  
  <pre><code>acceptedTypes = {
    'image/gif': true
  },
  
  function previewfile(file) {
       if ( acceptedTypes[file.type] === true) {
       var reader = new FileReader();
     reader.onload = function (event) {
    var image = new Image();
    image.src = event.target.result;
    image.width = 250; // a fake resize
    holder.appendChild(image);
  };
  </code></pre>
  
  <p>Here is a JSFiddle I'm JSStruggling with
  <a href="http://jsfiddle.net/fightfirewithfire/mkLp6/1/" rel="nofollow">http://jsfiddle.net/fightfirewithfire/mkLp6/1/</a></p>