Drag and drop and scale images but user's upload pic isn't draggable and resizable

Question

Hello guys i found this amazing drag and drop and resize image and i am trying to add a custom modification. I added an upload button so user can upload a photo.

i added the function bellow to find the last img id, create a new one and replace the latest id and img source. The user's photo uploading well but it's not draggable and resizable like other objects.

Official projects link is: http://tympanus.net/Tutorials/ImageVampUp/

The code that i added is:

<script>
$(document).ready(function() {

$("input").change(function(e) {

    for (var i = 0; i < e.originalEvent.srcElement.files.length; i++) {

        var file = e.originalEvent.srcElement.files[i];

        var reader = new FileReader();
        reader.onloadend = function() {
        var newoid = parseInt($("#objects .obj_item:last img").attr("ID").split("_")[1], 10) + 1;
        var newoimage = reader.result;  
        $("#objects").append("<div class='obj_item' style='width:80px; height:80px; float:left; margin-left:5px; margin-top:5px;'><img id='"+newoid+"' width='80' height='80' class='ui-widget-content' src='"+newoimage+"' alt='el'/></div>");
        //$('#obj_25').attr('src', reader.result);

        }
        reader.readAsDataURL(file);        
        }
});

});
</script>

and inside projects left bar i added a div with an input so user can load the pic:

<input type='file' onchange="readURL(this);" />

Answer 1

Just invoke the following putting it in a function after the image is appended:

$('#objects img:last').resizable({
   /* only diagonal (south east) */
   handles  : 'se',
   stop : resizestop 
}).parent('.ui-wrapper').draggable({
    revert  : 'invalid'
});