On hover upload image

I am creating a project and I want the user to change his/her profile picture so actually what I did is when I hover on the profile picture a change picture button will appear but when I click at it and select the file it doesn’t get uploaded.
This is my JQuery code:

$(document).ready(function(){
        $('#file').change(function(){
               var name = $('#file').attr('name');
               $.ajax({
                  url: 'demo.php',
                  type: 'POST',
                  data: ({'filename':name}),
                  processData: false,
                  contentType: false,
                  beforeSend: function(){
                      $('#show').html('Loading...');
                  },
                  success: function(data){
                      $('#show').html(data);
                  }
               });
           return false;
        });
    });

HTML code

<div id='show'></div>
<form action='demo.php' id='form' method='POST' enctype='multipart/form-data'>
    <input type='file' id='file' name='file'>
</form>

PHP code:

include "connect.php";

 if(isset($_FILES['file'])){
    $file = $_FILES['file'];

    // File properties
    $file_name = $file['name'];
    $file_tmp = $file['tmp_name'];
    $file_size = $file['size'];
    $file_error = $file['error'];

    //Extension
    $file_ext = explode('.', $file_name);
    $file_ext = strtolower(end($file_ext));

    $allowed = array('jpg', 'png');

    if(in_array($file_ext, $allowed)){
        if($file_error === 0){
            if($file_size <= 2097152){
                $new_file = uniqid('', true) . '.' . $file_ext;
                $file_destination = 'profile_pictures/' . $new_file;

                if(move_uploaded_file($file_tmp, $file_destination)){
                    echo $file_destination;
                }
            }
        }
    }
}