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!

4
  • 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 stackoverflow.com/questions/10341685/… Commented Jan 27, 2013 at 1:44
  • Thanks! I will give that a try and look at the EXIF data answer you recomended. Commented Jan 27, 2013 at 11:05
  • I found another very usefull solution to get the width and height of an image: stackoverflow.com/a/952185/1098122 Commented Jan 28, 2013 at 1:48
  • i think taking a look at this question might give you an idea. Commented May 17, 2013 at 3:36

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.