4

I'm toying around with the HTML 5 File API and so far created a nice little image preview: http://jsfiddle.net/ZZNn9/3/

<div id="dropbox" data-bind="style: {background: mapBackground}, event:dragenter:imageDropboxDragEnter, dragover:imageDropboxDragOver, drop: imageDropboxDrop}" style="width:400px;height:400px;background-color:#ccc"></div>
<p data-bind="text:status"></p>
<script>
var viewModel;

function ViewModel()
{
    var self = this;
    self.status = ko.observable();
    self.mapBackground = ko.observable();

    self.imageDropboxDragEnter = function(data, event)
    {
        self.status('enter');
    }
    self.imageDropboxDragOver = function(data, event)
    {
        self.status('over');
    }
    self.imageDropboxDrop = function(data, event)
    {
        event.stopPropagation();
        self.status('drop');
        console.log(event.dataTransfer.files[0]);

        var fileReader = new FileReader();
        fileReader.onload = function(event)
        {
            console.log(event);
            var mapImage = event.target.result;
            self.mapBackground('url(' + mapImage + ') no-repeat center');
        }
        fileReader.readAsDataURL(event.dataTransfer.files[0]);
    }
}

viewModel = new ViewModel();
ko.applyBindings(viewModel);
</script>

Now my next goal would be to read file properties like dimensions of an image. I can't find these information in either the

event.dataTransfer.files[0]

nor in the FileReader() event

So my question is: is it possible to read any of these properties? I don't seem to find any helpful information on that matter.

Thanks a lot!

Maximilian Lindsey
  • 809
  • 4
  • 18
  • 35
  • 2
    If you just want height/width then you can load the file into a hidden image and extract that info. If you want more of the EXIF data then this answer should help http://stackoverflow.com/questions/10341685/html-javascript-acces-exif-data-before-file-upload/10346298#10346298 – Offbeatmammal Jan 27 '13 at 01:44
  • Thanks! I will give that a try and look at the EXIF data answer you recomended. – Maximilian Lindsey Jan 27 '13 at 11:05
  • I found another very usefull solution to get the width and height of an image: http://stackoverflow.com/a/952185/1098122 – Maximilian Lindsey Jan 28 '13 at 01:48
  • i think taking a look at this [question](http://stackoverflow.com/questions/5173796/html5-get-image-dimension) might give you an idea. – Xyldrun Jacob May 17 '13 at 03:36

0 Answers0