Html 5 file api & jcrop issue

Question

I render a picture in local using html5 and File API.

html:

<form action="/Picture/UpdateProfilePicture" id="profile_pic_form" method="post">
       <input type="file" id="file"><br>
</form>
<div>
       <output id="result"></output>
</div>

javascript:

<script type="text/javascript">
function handleFileSelect(evt) {
    var files = evt.target.files;
    var file = files[0];
    if (files[0].type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img id="cropbox" class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('result').innerHTML = "";
                document.getElementById('result').insertBefore(span, null);
            };
        })(file);
        // Read in the image file as a data URL.
        reader.readAsDataURL(file);
        //$('#cropbox').Jcrop(options, function () { jcrop_api = this; });
    } else {
        alert("the file you entered is not a picture");
        $("#profile_pic_form").each(function() {
            this.reset();
        });
    }
}

$(document).ready(function() {
    // Check for the various File API support.
    if (window.File && window.FileReader && window.FileList && window.Blob) {
        document.getElementById('file').addEventListener('change', handleFileSelect, false);
    } else {
        alert('The File APIs are not fully supported in this browser.');
    }
});

The js gets the file and generate the span & img tag inside the output tag.

What I want now is to "Jcrop" the picture BUT when I try $("#cropbox).Jcrop(); nothing happens, why ?

L105 · Accepted Answer · 2013-08-08 16:19:44Z

2

+50

You are calling Jcrop in the wrong place. It's called before the image is created.

if (files[0].type.match('image.*')) {
        var reader = new FileReader();
        reader.onload = (function (theFile) {
            return function (e) {
                // Render thumbnail.
                var span = document.createElement('span');
                span.innerHTML = ['<img id="cropbox" class="thumb" src="', e.target.result,
                    '" title="', escape(theFile.name), '"/>'].join('');
                document.getElementById('result').innerHTML = "";
                document.getElementById('result').insertBefore(span, null);
                $('#cropbox').Jcrop(); // <---- Should be here.
            };
        })(file);
}

edited Aug 8, 2013 at 16:19

answered Aug 8, 2013 at 15:42

L105

5,4193 gold badges20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Giu Over a year ago

Thanks, it was what I needed, you'll have my bounty in 19h.

L105 Over a year ago

I didn't receive my bounty :(

Giu Over a year ago

My bad, w-e stuffs, I didn't find time. Here it is :)

Collectives™ on Stack Overflow

Html 5 file api & jcrop issue

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related