prepending images to existing images after image upload

I have an image uploader and picker in a modal. When uploading images, the actual file name should be prepended with mt_rand() in order to prevent duplicate file names. The php part of the below code works fine as when I check the directory they were uploaded to, the files all have random figures in front of the file name. The problem though is that after the upload is complete, it prepends those images to the images already displaying in the file picker and those file names don't have the mt_rand() applied which results in file not found errors in console.

So, if the file is called cat.jpg and I upload, the file in the uploads directory is 723672365273cat.jpg but the image prepended with the jQuery is just cat.jpg and obviously that cannot be found in the directory because it doesn't exist. I don't know how to solve this issue. Any help would be greatly appreciated.

The html form:

<form method="POST" enctype="multipart/form-data">
 <input type="file" name="file[]" data-method="ajax" accept="image/*" data-maxfilesize="5000000" multiple>
</form>

Select allOpen in new window

The jQuery:

var lastId;
        $(document).ready(function(){
            $('input[type=file]').drop_uploader({
                uploader_text: 'Drop files to upload, or',
                browse_text: 'Browse',
                only_one_error_text: 'Only one file allowed',
                not_allowed_error_text: 'File type is not allowed',
                big_file_before_error_text: 'Files, bigger than',
                big_file_after_error_text: 'is not allowed',
                allowed_before_error_text: 'Only',
                allowed_after_error_text: 'files allowed',
                browse_css_class: 'button button-primary',
                browse_css_selector: 'file_browse',
                uploader_icon: '<i class="pe-7s-cloud-upload"></i>',
                file_icon: '<i class="pe-7s-file"></i>',
                time_show_errors: 5,
                layout: 'thumbnails',
                method: 'normal',
                url: 'ajax_upload.php',
                delete_url: 'ajax_delete.php',
            });

			$( "#drop_uploader_0" ).on( "file_upload_end", function( event, name) {
				lastId++;

			var str = '<div class="col-md-3 img-box">';
			str += '<input type="checkbox" id="image_' + lastId +'" name="pics[]" value="' + name + '" data-id="image_' + lastId +'" checked/>';
			str += '<label for="image_' + lastId +'" style="background-image: url(uploads/' + name + ')">';
			str += '<i class="glyphicon glyphicon-ok"></i>';
			str += '</label>';
			str += '</div>';
			$( "#gallery-body" ).prepend(str);
			$('a[href="#home"]').tab('show');
			$( ".save" ).show();
			$( ".ajax" ).empty();
			});
			});

Select allOpen in new window

The below is the ajax_upload.php

if(isset($_FILES['file'])) {
    $name = mt_rand().$_FILES['file']['name'];
    $type = $_FILES['file']['type'];
    $size = $_FILES['file']['size'];
}

$uploaddir = 'uploads';

if(isset($_FILES['file']['name'])) {
    $new_name = mt_rand().$_FILES['file']['name'];
    $uploadfile = getcwd().DIRECTORY_SEPARATOR.$uploaddir.DIRECTORY_SEPARATOR.$new_name;
    if(move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
        // ok
        $file_id = md5($uploadfile);
        // Store File id in session. We can delete file by this id from other script
        $_SESSION["drop_uploader_".$file_id] = $uploadfile;
        $_SESSION["drop_uploader_".$file_id."_name"] = $new_name;
        $_SESSION["drop_uploader_".$file_id."_type"] = $_FILES['file']['type'];
        $_SESSION["drop_uploader_".$file_id."_size"] = $_FILES['file']['size'];
        $success_message = $file_id;
    } else {
        $error_message = "Error while uploading file ".$_FILES['file']['name'];
    }
}

Select allOpen in new window