bootstrap issue, "fileupload" not working inside of a modal - php

Question

So, i am using a bootstrap modal, and inside of the modal, i want to use image upload, but when an image is selected, nothing happens, i am asuming it is a javascript issue, the script and the css is included outside of the modal in the header.
http://jasny.github.com/bootstrap/javascript.html#fileupload
Any suggestions? I asume it is a javascript issue
<?php
if (isset($_SESSION['login']) and !empty($_SESSION['login']) and $_SESSION['rank'] == 3) {
echo '
<!-- Modal -->
<div id="insert_post_modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Insert Post</h3>
</div>
<div class="modal-body">
<p>
<form action="insert_post_sql" method="post" enctype="multipart/form-data">
<table border="0">
<div class="fileupload fileupload-new" data-provides="fileupload">
<div class="fileupload-new thumbnail" style="width: 200px; height: 150px;"><img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&text=no+image" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;">
</div>
<div>
<span class="btn btn-file"><span class="fileupload-new">Select image</span>
<span class="fileupload-exists">Change</span><input type="file" /></span>
Remove
</div>
</div>
</table>
</form>
</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<input type="submit" button class="btn btn-primary" value="Submit Post">
</div>
</div>
</form>
';
}
?>

Answer 1

Try to use Document Ready function because the Script is loaded prior to the Modal HTML
$('document').ready(function(){
$('#insert_post_modal').on('shown', function(){
$('.fileupload').fileupload();
});
});

Answer 2

Try calling the fileupload on modal shown (i.e. when the user opens it):
$('#insert_post_modal').on('shown', function(){
$('.fileupload').fileupload();
});
Can't test it right now though, I'm sorry

Answer 3

$(document).ready(function(){
$image_crop = $('#image_demo').croppie({
enableExif: true,
viewport: {
width:300,
height:300,
type:'square' //circle
},
boundary:{
width:400,
height:400
}
});