Laravel AJAX Image Upload Validation - ajax

Question

I'm having trouble with validation on this AJAX POST for a file upload. Here's what I have so far. The 'required' validation keeps coming back telling me to select an image. When I console.log() the js variable with the image, it shows the filepath correctly.
View:
<form role="form" method="post" action="{{ route('profile.edit') }}" enctype="multipart/form-data">
<div class="form-group new-pic{{ $errors->has('profile-image') ? ' has-error' : '' }}">
<input type="file" id="newProfilePic" name="profile-image"/>
</div>
</form>
JS:
$('.btn-edit-profile-pic').click(function(e){
e.preventDefault();
var newPic = $('#newProfilePic').val();
$.ajax({
type: "POST",
url: "/profile-edit",
data: newPic,
error: function(data) {
var errors = $.parseJSON(data.responseText);
console.log(errors);
},
success: function() {
}
});
});
Controller:
if ($request->ajax())
{
$this->validate($request, [
'newPic' => 'required|image|max:4999'
],[
'required' => 'You must select an image',
'image' => 'The file must be an image',
'max' => 'The image file size must be less than 5mb'
]);
$extension = Input::file('profile-image')->getClientOriginalExtension();
$fileName = rand(11111,99999).'.'.$extension;
$image = Image::make(Input::file('profile-image'))
->orientate()
->resize(300, null, function ($constraint) {
$constraint->aspectRatio();
})
->save('images/profiles/'.$fileName);
Auth::user()->update([
'image_path' => $fileName,
]);
}

Answer 1

this is an intended behavior, you cant send upload file over XMLHTTPRequest, that is why you will always received the image file is required validation.
you can use an ajaxfileuploader plugins (They create a new form with in an iframe and submit it)
[http://www.sitepoint.com/10-jquery-ajax-file-uploader-plugins/]