I have a form that allows a user to upload a profile picture (calling it 'avatar'). The file saves correctly to the directory and the database. The problem is, the image only shows in the browser after the page is refreshed. Until refreshing the page, a broken image icon is displayed.
How can I fix this so the avatar image shows on the webpage immediately after the user clicks the button, 'Save My Avatar'?
Here's my code:
ROUTES - routes.php:
Route::get('profile',[
'as' => 'profile',
'uses' => 'ProfileController@edit'
])->before('auth');
Route::put('profile',[
'as' => 'profile',
'uses' => 'ProfileController@update'
])->before('auth');
MODEL - User.php:
public function uploads() {
return $this->hasMany('Upload');
}
public function avatar() {
return $this->hasOne('Upload')->where('type', 'avatar');
}
VIEW - profile.blade.php:
<form action="{{ 'profile' }}" method="put" id="MyForm">
<div class="fileupload fileupload-new" data-provides="fileupload">
<!-- DISPLAY AVATAR IF USER HAS SAVED ONE: -->
<div class="fileupload-new thumbnail" style="width: 200px; height: 200px;">
<img src="<?php
if ($user->avatar) {
echo Croppa::url('user' . DS . $user->uploadDirectory . DS . $user->avatar->file_name,200, 200);
} else {
echo URL::to('/mcsimple/assets/images/no-avatar.jpg');
}
?>" />
</div>
<div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 200px; line-height: 20px;"></div>
<div>
<!-- BUTTON TO SAVE AVATAR: -->
<div class="fileupload-exists" style="padding-bottom: 5px">
<input class="btn-primary btn" type="submit" value="Save My Avatar">
</div>
<!-- BUTTONS TO SELECT OR CHANGE AVATAR: -->
<span class="btn btn-file">
<span class="fileupload-new">Select image</span>
<span class="fileupload-exists">Change</span>
<input type="file" id="avatar" name="avatar" >
</span>
<!-- <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a> -->
</div>
</div>
</form>
CONTROLLER - ProfilerController.php:
<?php
define('DS', DIRECTORY_SEPARATOR);
class ProfileController extends BaseController {
// ******************************************************************
// VIEW THE PAGE TO EDIT A USER PROFILE:
// ******************************************************************
/**
*
* @param int $id
* @return Response
*/
public function edit() {
$user = Auth::user();
//If user hasn't saved a home address, lets add a temporary placeholder for the view
if ($user->homeAddress == NULL){
unset($user->homeAddress);
$home = new Address;
$home->type = 'home';
$home->user_id = $user->id;
$home->save();
}
return View::make('user.profile')->with(array('user' => $user));
}
// ******************************************************************
// UPDATE A USER PROFILE:
// ******************************************************************
/**
*
* @param int $id
* @return Response
*/
public function update()
{
$user = Auth::user();
// VALIDATION RULES:
$rules = array(
'first_name' => 'required',
'last_name' => 'required',
'username' => 'required|email'
);
$validation = Validator::make(Input::all(), $rules);
// CHECK RULES PASS BEFORE UPDATING USER PROFILE:
if ($validation->fails()) {
return Redirect::route('profile')->withErrors($validation)->withInput();
// UPDATE USER PROFILE:
} else {
$user->first_name = Input::get('first_name');
$user->last_name = Input::get('last_name');
$user->username = Input::get('username');
$user->phone = Input::get('phone');
$user->cell_phone = Input::get('cell_phone');
$user->allow_sms = Input::get('allow_sms');
$user->birth_date = Input::get('birth_date');
// UPDATE USER ADDRESS - IF NONE EXISTS, CREATE A NULL ADDRESS:
if ($user->homeAddress() == NULL){
// unset($user->homeAddress);
$home = new Address;
$home->type = 'home';
$home->user_id = $user->id;
$home->save();
} else {
$home = $user->homeAddress;
}
foreach (Input::get('home_address') as $key => $value) {
$home->$key = $value;
}
$home->save();
// ##################################################
// AVATAR:
// ##################################################
if (Input::hasFile('avatar')) {
// REMOVE OLD AVATAR:
if ($user->avatar != NULL) {
// DELETE FROM THE DIRECTORY:
File::delete(public_path() . DS . 'user' . DS . $user->uploadDirectory . DS . $user->avatar->file_name);
// DELETE FROM THE DATABASE:
$user->avatar->delete();
}
$file = Input::file('avatar');
$file_name = time() . '-' . $file->getClientOriginalName();
// SAVE AVATAR TO THE DATABASE:
$avatar = new Upload;
$avatar->type = 'avatar';
$avatar->file_name = $file_name;
$avatar->user_id = $user->id;
$avatar->save();
// Input::file('avatar')->move('/home/regattanetwork/www.regattanetwork.com/htdocs/myrn/public/' .$user->upload_directory, $avatar->file_name);
// SAVE FILE TO PUBLIC PATH:
$file = $file->move(public_path() . DS . 'user' . DS . $user->uploadDirectory, $file_name);
$user->uploads()->save($avatar);
//for some reason laravel caches this
unset($user->avatar);
}
// SAVE CHANGES TO DATABASE AND DISPLAY MESSAGE:
$user->save();
return View::make('user.profile')->with(array('user' => $user, 'alert_message' => 'Your Information Has Been Saved!', 'alert_class' => 'alert-success'));
}
}
}
Thanks!
Rachel