Image hiding on load in bpopup

Question

I need help!!

I have the following code onSubmit of a file upload:

function uploadFile() {
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "php_parsers/file_upload_parser.php");
    ajax.send(formdata);
}

function completeHandler(e) {
    var fileDest = e.target.responseText; //file location is responseText
    _("uloadedImg").src=fileDest;         // '_' is getelementbyid function
    $('#sesame').bPopup();
}

I am initializing JCrop on the object as follows:

jQuery(function($) {
        $('#uloadedImg').Jcrop();
    });

The HTML is:

<div id="sesame" style="display:none">
<img src="" id="uloadedImg">
</div>

For some reason when I test this code the image tag turns into:

<img src="user/admin/default_avatar.jpg" id="uloadedImg" style="display: none; visibility: hidden; width: 0px; height: 0px;">

I don't understand what is putting the style elements in the image tag but also JCrop isn't working when I remove these elements from in the chrome dev tools.

I am about to throw my laptop at a wall if I can't get this to work. :(

Answer 1

Considering the overwhelming response I had to this question I thought I'd share what was going wrong!

I was initializing jcrop on the image tag before I had an image in there. I moved the jcrop part of my script to the ajax response as follows:

function uploadFile() {
    var file = _("file1").files[0];
    var formdata = new FormData();
    formdata.append("file1", file);
    var ajax = new XMLHttpRequest();
    ajax.upload.addEventListener("progress", progressHandler, false);
    ajax.addEventListener("load", completeHandler, false);
    ajax.addEventListener("error", errorHandler, false);
    ajax.addEventListener("abort", abortHandler, false);
    ajax.open("POST", "php_parsers/file_upload_parser.php");
    ajax.send(formdata);
}

function completeHandler(e) {
    var fileDest = e.target.responseText; //file location is responseText
    _("uloadedImg").src=fileDest;         // '_' is getelementbyid function
    jQuery(function($) {
        $('#uloadedImg').Jcrop();
    });
    $('#sesame').bPopup();
}

Thank you for all your help everyone!