13 - Tutorial de Laravel 5 - Upload Image (Perfil de usuario)

En este capítulo del Tutorial de Laravel 5 empezamos a incluir opciones en el panel de control de usuarios, crearemos una opción que permita a los usuarios cambiar su imagen de perfil.

Para esta tarea crearemos dos nuevas acciones en el controlador UserController, la acción profile será la encargada de obtener el formulario para subir la imagen y la acción updateProfile será la encargada de procesar los datos enviados en el formulario.

Código de la acción profile ...

    public function profile(){
        return View('user.profile');
    }

Código de la acción updateProfile ...

public function updateProfile(Request $request){
        $rules = ['image' => 'required|image|max:1024*1024*1',];
        $messages = [
            'image.required' => 'La imagen es requerida',
            'image.image' => 'Formato no permitido',
            'image.max' => 'El máximo permitido es 1 MB',
        ];
        $validator = Validator::make($request->all(), $rules, $messages);
        
        if ($validator->fails()){
            return redirect('user/profile')->withErrors($validator);
        }
        else{
            $name = str_random(30) . '-' . $request->file('image')->getClientOriginalName();
            $request->file('image')->move('perfiles', $name);
            $user = new User;
            $user->where('email', '=', Auth::user()->email)
                 ->update(['perfiles' => 'perfiles/'.$name]);
            return redirect('user')->with('status', 'Su imagen de perfil ha sido cambiada con éxito');
        }
    }

En la acción updateProfile se puede ver como se valida el atributo "image" del formulario. Si la validación falla se redirecciona a la ruta "user/profile" con los errores, si es correcto se guarda la imagen en la carpeta "perfiles" y se actualiza la columna "perfiles" del usuario con la nueva ruta hacia la imagen subida y finalmente se redirecciona a la ruta "user" con un mensaje flash (status).

A continuación crearemos las rutas en routes.php para manejar las acciones creadas anteriormente:

Route::get('user/profile', 'UserController@profile');
Route::post('user/updateprofile', 'UserController@updateProfile');

También tenemos que crear la vista asociada a la acción "profile", esta vista la crearemos en la carpeta "user" como "profile.blade.php" y con el siguiente código que alberga el formulario:

@extends('layouts.home')
@section('content')
<h1>Cambiar imagen de perfil</h1>
<form method='post' action='{{url("user/updateprofile")}}' enctype='multipart/form-data'>
	{{csrf_field()}}
	<div class='form-group'>
		<label for='image'>Imagen: </label>
		<input type="file" name="image" />
		<div class='text-danger'>{{$errors->first('image')}}</div>
	</div>
	<button type='submit' class='btn btn-primary'>Actualizar imagen de perfil</button>
</form>
@stop

Otra cosa importante es modificar la vista "user.blade.php" para agregar un link con la nueva opción. Código completo de la vista "user":

@extends('layouts.home')
@section('content')
<h1>Bienvenid@ {{Auth::user()->name}} a su Panel de Control</h1>
@if (Session::has('status'))
<hr />
<div class='text-success'>
    {{Session::get('status')}}
</div>
<hr />
@endif

<img src='{{url(Auth::user()->perfiles)}}' class='img-responsive' style='max-width: 150px' />

<h3>Opciones:</h3>
<ul>
    <li><a href="{{url('user/profile')}}">Cambiar mi imagen de perfil</a></li>
</ul>

@stop

Ahora puedes probar a cambiar tu imagen de perfil desde el panel de control.