Undefined index error while using $_FILES in PHP and JQuery - php

Question

I am building file upload using php and jquery, I made it without a submit button. But everything is working fine but only there is an error it shows me undefined index message.
This is my html code:
<div id='show'></div>
<form action='demo.php' method='POST' enctype='multipart/form-data'>
<input type='file' id='file' name='file'>
</form>
This is my jquery code:
$(document).ready(function(){
$('#file').change(function(){
var name = $('#file').attr('name');
$.ajax({
url: 'demo.php',
type: 'POST',
data: {'file':name},
beforeSend: function(){
$('#show').html('Loading...');
},
success: function(data){
$('#show').html(data);
}
});
return false
});
});
This is my php code:
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 = 'uploads/' . $new_file;
if(move_uploaded_file($file_tmp, $file_destination)){
echo $file_destination;
}
}
}
}
}
I don't know what is the error and why it's coming.

Answer 1

You are not sending data to $_FILES, but to $_POST actually.
Note the data parameter in your $.ajax() call: data: {'file':name}

Answer 2

Instead of using the jQuery .ajax function, just have the form "submit
$(document).ready(function(){
$('#file').change(function(){
$('form').submit();
return false
});
});

Answer 3

add following right after
// Disable errors completely
error_reporting(0);
This will help you to remove/ hide all error messages including fatal errors.
Alternatively you can use
// Report simple running errors
error_reporting(E_ERROR | E_WARNING | E_PARSE);
You can also view PHP Official documents for alternative options.
Viewing your problem in detail seems more identical like you are trying to upload file via Ajax. Please read a sample about this scenario on Simple File Upload Using jQuery.