I'm having a problem getting my AJAX to work. I've looked around but I can't seem to find anything that helps with how I've structured my code.
Right now the data fields input into the database fine, however I want to also add a file upload (profile picture) but when I look into the networking tab it doesn't appear within the form data. I'm not too worried about the controller itself for the moment, but how do I get the AJAX request to send the file to the controller?
If anybody knows how I can fix this I'd really appreciate it.
Thanks!
AccountController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Http\Requests;
use Illuminate\Support\Facades\Auth;
class AccountController extends Controller
{
/**
* Display a listing of the resource.
*
* @return \Illuminate\Http\Response
*/
public function index()
{
//
return view('Account.index');
}
/**
* Show the form for creating a new resource.
*
* @return \Illuminate\Http\Response
*/
public function create()
{
//
}
/**
* Store a newly created resource in storage.
*
* @param \Illuminate\Http\Request $request
* @return \Illuminate\Http\Response
*/
public function store(Request $request)
{
//
}
/**
* Display the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function show($id)
{
//
}
/**
* Show the form for editing the specified resource.
*
* @param int $id
* @return \Illuminate\Http\Response
*/
public function edit($id)
{
//
}
/**
* Update the specified resource in storage.
*
* @param \Illuminate\Http\Request $request
* @param int $id
* @return \Illuminate\Http\Response
*/
public function update(Request $request)
{
$this->validate($request, [
'name' => '',
'email' => '',
'telephone' => '',
'job_title' => '',
'profile_description' => '',
'education' => '',
]);
User::find(Auth::user()->id)->update([
'name' => $request->get('name'),
'email' => $request->get('email'),
'telephone' => $request->get('telephone'),
'job_title' => $request->get('job_title'),
'profile_picture' => $request->get('profile_picture'),
'profile_description' => $request->get('profile_description'),
'education' => $request->get('education'),
]);
$userImage = User::find(Auth::user()->id);
if (!empty($request->file('profile_picture')) && $request->file('profile_picture')->isValid()) {
$fileName = md5(time() . pathinfo($request->file('profile_picture')->getClientOriginalName(), PATHINFO_FILENAME)) . '.' . pathinfo($request->file('profile_picture')->getClientOriginalName(), PATHINFO_EXTENSION);
$request->file('profile_picture')->move('profile-pictures', $fileName);
$userImage->update([
'profile_picture' => $fileName,
]);
} else {
$fileName = $request->get('old-image');
}
$userImage->update([
'profile_picture' => $fileName,
]);
}
Form
<form class="form-horizontal" id="account-update" role="form" method="POST" action="{{ url('account.update', auth()->user()->id) }}" enctype="multipart/form-data">
{{ csrf_field() }}
<div class="form-group">
<label for="name" class="col-sm-2 control-label">Name</label>
<div class="col-sm-10">
<input name="name" type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="email" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input name="email" type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="telephone" class="col-sm-2 control-label">Contact Number</label>
<div class="col-sm-10">
<input name="telephone" type="telephone" class="form-control" id="telephone" placeholder="+(44)754 5635 950">
</div>
</div>
<div class="form-group">
<label for="job_title" class="col-sm-2 control-label">Job Description</label>
<div class="col-sm-10">
<input name="job_title" type="text" class="form-control" id="job_title" placeholder="Web Developer">
</div>
</div>
<div class="form-group">
<label for="profile_description" class="col-sm-2 control-label">About Me</label>
<div class="col-sm-10">
<textarea name="profile_description" class="form-control" id="profile_description" placeholder="Tell us about yourself..."></textarea>
</div>
</div>
<div class="form-group">
<label for="education" class="col-sm-2 control-label">Education</label>
<div class="col-sm-10">
<input name="education" type="text" class="form-control" id="education">
</div>
</div>
<div class="form-group">
<label for="profile_picture" class="col-sm-2 control-label">Profile Picture</label>
<div class="col-sm-10">
<input name="profile_picture" type="file" class="form-control" id="profile_picture">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn send-btn">Submit</button>
</div>
</div>
</form>
AJAX
<script>
$(document).ready(function(){
$('#account-update').on('submit', function(e) {
e.preventDefault();
$.ajax({
url: '{{ route('account.update', auth()->user()->id) }}',
enctype: 'multipart/form-data',
method: "PUT",
data: {
'name':$('input[name=name]').val(),
'email':$('input[name=email]').val(),
'telephone':$('input[name=telephone]').val(),
'job_title':$('input[name=job_title]').val(),
'profile_description':$('textarea[name=profile_description]').val(),
'education':$('input[name=education]').val(),
'profile_picture': $('file[name=profile_picture]').val(),
'_token': $('input[name=_token]').val()
},
success: function(data){
console.log(data);
}
});
return false;
});
});
</script>