0

Veran, estoy creando un formulario para almacenar los datos de una planta, en el cual hay que captar una imagen. El codigo es este:

@extends('layouts.app')
@section('content')

@Logged()
@include('partials.errors')
<div align="center" class="panel panel-default">
    <h1 class="text-center text-mute"> {{ __("Nueva Planta") }} </h1>
</div>
<div class="row">
    <form method="POST" action="../planta" enctype="multipart/form-data">
        {{ csrf_field() }}
        <div class="form-group">
            <label for="nombre" class="col-md-12 control-label"> {{ __("Nombre") }}
            </label>
            <input id="nombre" class="form-control" name="nombre" value="{{ old('nombre') }}"/>
        </div>

        <div class="form-group">
            <label for="tamaño" class="col-md-12 control-label"> {{ __("Tamaño") }}
            </label>
            <input id="tamaño" class="form-control" name="tamaño" value="{{ old('tamaño') }}"/>
        </div>

        <div class="form-group">
            <label for="flor" class="col-md-12 control-label"> {{ __("Flor") }}
            </label>
            <input id="flor" class="form-control" name="flor" value="{{ old('flor') }}"/>
        </div>

        <div class="form-group">
            <label for="hoja" class="col-md-12 control-label"> {{ __("Hoja") }}
            </label>
            <input id="hoja" class="form-control" name="hoja" value="{{ old('hoja') }}"/>
        </div>

        <div class="form-group">
            <label for="descripcion" class="col-md-12 control-label"> {{ __("Descripción") }}
            </label>
            <input id="descripcion" class="form-control" name="descripcion" value="{{ old('descripcion') }}"/>
        </div>

        <label class="btn btn-warning" for="foto">
            <input id="foto" name="foto" type="file" style="display:none;"> {{ __("Subir imagen (Opcional)") }}
        </label>

        <button type="submit" name="addPlanta" class="btn btn-default"> {{ __("Añadir Planta") }}
        </button>
    </form>
</div>
@else
    <h1 class="text-center text-mute" style="color:#FF0000"> {{ __("Insistimos, ¡INICIA SESIÓN SI QUIERES INTRODUCIR NUEVAS PLANTAS!") }} </h1>
@endLogged
@endsection

introducir la descripción de la imagen aquí

Pero la historia es que ejecuto el formulario, me voy a phpMyAdmin para ver la nueva planta y me todo con esto: introducir la descripción de la imagen aquí

Y ovbiamente esto esta de todo menos acertado. De hecho, modifico la variable citada por girasol.jpg (que esta en public) y me topo con que ahora si se ve la imagen. introducir la descripción de la imagen aquí

¿Como arreglo esto? Aparte, estoy convocando imagenes almacenadas en public, pero no siempre voy a tener almacenado justo ahi la imagen, por lo que una de 2, o consigo que la imagen se busque desde una ruta absoluta o que en caso de que no haya importado desde el directorio public la imagen que se genere una copia de la imagen en ese directorio (y veo esto ultimo lo más recomendable).

Y cierto, la vista que utilizo:

@extends('layouts.app')
@section('content')
<div class="row">
    <div class="col-md-8 col-md-offset-2">
        <div align="center" class="panel panel-default">
            <div class="panel-heading">
                <h1 class="text-center text-mute"> {{ __("Plantas") }} </h1>
            </div>
            <div class="panel-body">
                @Logged()
                    <a href="formulario/plantas">Crear una nueva planta</a>
                    @include('partials.errors')
                @else
                    <p style="color:#0000FF">Para poner insertar nuevas plantas tienes que iniciar sesión</p>
                @endLogged
            </div>
        </div>
        @forelse($planta as $plantas)
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3><a href="comentarios/{{ $plantas->id }}">{{ $plantas->nombre }}</a></h3>
            </div>
            <div class="panel-body">
                <h4>{{ $plantas->descripcion }}</h4>
                @if(empty($plantas->foto)==false)
                    <img src="{{ $plantas->foto }}" style="width: 200px; height: 200px; border: 2px solid green" class="img-responsive img-rounded" >
                @endif
            </div>
            <div class="panel-body">
                <b>Tamaño:</b> {{ $plantas->tamaño }}<br>
                <b>Flor:</b> {{ $plantas->flor }}<br>
                <b>Hoja:</b> {{ $plantas->hoja }}<br>
                <span class="pull-right"> {{ __("Comentarios") }}: {{ $plantas->comentarios->count() }} </span>
            </div>
        </div>
        @empty
        <div class="alert alert-danger">
            {{ __("No hay ninguna planta en este momento") }}
        </div>
        @endforelse
        @if($planta->count())
        {{$planta->links()}}
        @endif
    </div>
</div>
@endsection

Edito: Amplio la información para mostrar más datos.

filesystems.php:

 'planta' => [
            'driver' => 'local',
            'root' => storage_path('public\images\planta'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

web.php:

Route::get('/images/{path}/{attachment}', function ($path, $attachment){
    $storagePath = Storage::disk($path)->getDriver()->getAdapter()->getPathPrefix();
    $imageFilePath = $storagePath . $attachment;
    if(File::exists($imageFilePath)){
        return Image::make($imageFilePath)->response();
    }
});

plantas.php:

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class plantas extends Model{
    protected $table = 'plantas';

    protected $fillable = [
        'nombre', 'tamaño', 'flor', 'hoja', 'descripcion', 'foto',
    ];

    public function comentarios(){
        return $this->hasMany(Comentario::class,'planta');
    }

    public function pathAttachment(){
        return "/images/planta/" . $this->attachment;
    }
}

Edito: Probe a retirar el fragmento del formulario para la imagen el style="display:none;" introducir la descripción de la imagen aquí

Tal y como se observa en la imagen, el formulario alcanza a ver el nombre de la imagen. Si cuando esta variable se almacenase en mi base de datos de phpMyAdmin conservase el nombre con el que muestra, tendria todo esto solucionado, pero adivinad que... introducir la descripción de la imagen aquí

Algo sale mal y se almacena con otro nombre.

Otra cosa más, en la función store() de plantasController.php he probado a poner esto:

dd($request->foto);

Lo cual produce el siguiente resultado:

introducir la descripción de la imagen aquí

Si de algun modo podiera hacer que lo que esta en la variable subrayada fuese lo que almacenase la base de datos solucionaria esto. De hecho, la función con la que se obtiene el nombre original es $request->foto->getClientOriginalName(), aunque es una información que tiende a perderse tras efectuar el formulario.

6
  • 1
    Lo que tienes que hacer es al procesar el envio del formulario copiar esos archivos que subes a una ruta que ya conozcas de antemano, es decir copiar el archivo desde la ubicación temporal a una carpeta upload, media o como quieras ponerle. Commented el 14 feb. 2018 a las 22:00
  • 1
    @DarielRamosDíazdeVillegas De momento yo almaceno las imagenes en la carpeta public. Dices que en principio debo almacenar las imagenes en dicha carpeta y luego asegurarme que el formulario apunta ahi. Pero no se como arreglo el formulario para que apunte a una dirección correcta. Commented el 15 feb. 2018 a las 8:38
  • 1
    Creo que este enlace te puede ayudar: laravel.com/docs/5.6/requests
    – track3r
    Commented el 17 feb. 2018 a las 23:57
  • 1
    @track3r En relación a lo que aparece en el articulo que enlazas he editado mi pregunta para dar más información. Commented el 18 feb. 2018 a las 11:32
  • 2
    Sin información de los métodos implicados en el tratamiento de la imagen y sus atributos (tal como se ve en la respuesta), es (era) un poco complicado ayudar.
    – Shaz
    Commented el 18 feb. 2018 a las 13:46

2 respuestas 2

1
+100

Voy a indicar todo el proceso de como subir una imagen y después mostrarla con Laravel 5.1. Creo que no cambió nada en versiones posteriores, por si acaso, la parte que parece que no sabes hacer ahora mismo, es decir guardar la imagen en el servidor a partir del fichero temporal y obtener la ruta, la indico en PHP puro, que es lo más sencillo. Para ver como funciona se puede probar esto en una instalación limpia de Laravel.

1. Rutas.

Creo tres rutas, una para mostrar un formulario, otra para enviarlo/procesarlo y una tercera para mostrar la imagen recién cargada.

//Ver formulario
Route::get('imagen', function () {
    return view('form-imagen');
});

//Procesar formulario
Route::post('imagen',
    [
        'as'    => 'imagen',
        'uses'  => 'ImagenController@store'
    ]
);

//Ver imagen subida
Route::get('show-imagen', function () {
    return view('show-imagen');
});

2. Vistas.

  1. Formulario simplificado, basado en el tuyo, solo con el campo nombre y el input de carga de la imagen.

        <h1>Formulario de carga de imagen</h1>
    
        <div class="row">
        <form method="POST"
            action="{{ route('imagen') }}"
            enctype="multipart/form-data">
    
            {{ csrf_field() }}
    
            <div class="form-group">
                <label for="nombre" class="col-md-12 control-label">Nombre</label>
                <input id="nombre" class="form-control" name="nombre" value="nombre"/>
            </div>
    
            <input type="hidden" name="MAX_FILE_SIZE" value="1000000" />
            <!-- Se recomienda usar el campo anterior en el formulario.
            Ver documentación de PHP:
            http://php.net/manual/es/features.file-upload.post-method.php -->
    
            <label class="btn btn-warning" for="foto">
            <input id="foto"
                name="foto"
                type="file"
                style="display:none;">Cargar imagen (Opcional)</label>
    
            <button type="submit"
                class="btn btn-default">Enviar imagen</button>
        </form>
    </div>
    

En el head iría la carga de bootstrap:

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
  1. Vista que solo muestra los datos cargados con el formulario anterior y un enlace al mismo para volver a cargar otra imagen.

    <body>
        <div class="wrap">
            <h1>Vista de imagen</h1>
    
            @if (session('data'))
                <p>Se reciben datos...</p>
                {{-- var_dump(session('data')) --}}
    
    
    
                <p>Imagen cargada: {{ session('data')['name'] }}</p>
                <img src="{{ asset( session('data')['path'] ) }}" alt="imagen">
            @else
                <p>No se reciben datos...</p>
                {!! var_dump(session('data')) !!}
            @endif
    
            <p><a href="{{ url('/imagen') }}">Cargar imagen</a></p>
        </div>
    </body>
    

3. Controlador

Voy a usar PHP puro para guardar la imagen en la carpeta public, dentro de imagenes, es decir en "public/imagenes/". No la he validado, solo almacenado y cargado la ruta en los datos que paso a la vista que prueba que la imagen se ha subido. Se puede validar con PHP con los datos que se muestran al depurar $_FILES o bien con los métodos de Laravel, en todo caso lo habitual sería: peso de la imagen (que esté dentro de unos límites) y formato, por ejemplo si solo se admiten jpeg y png.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Http\Requests;
use App\Http\Controllers\Controller;


class ImagenController extends Controller
{

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(Request $request)
    {
        //información de depuración (uso raw PHP)
        print_r($_REQUEST); echo('<br>');
        print_r($_FILES);   echo('<hr>');

        /**
         * Procesando imagen
         *
         */
        if (isset($_FILES['foto'])) {

            if (isset($_REQUEST['nombre'])) {
                $name = $_REQUEST['nombre'];
            } else {
                $name = basename($_FILES['uploadedfile']['name']);
            }

            $target_path = 'imagenes/';
            $target_path = $target_path . basename($_FILES['foto']['name']);
            if (move_uploaded_file($_FILES['foto']['tmp_name'], $target_path)) {
                return self::processPath($target_path, $name);
            } else {
                echo('ERR -> Fallo carga de imagen.');
            }
        } else {
            echo('ERR -> No se envío imagen.');
        }
    }


    private static function processPath(String $path, String $name)
    {

        //dd('Ruta imagen: ' . $path);

        /**
         * Aquí se persiste la ruta al fichero en BD, fichero, etc.
         * Para el ejemplo sólo voy a pasar los datos a la vista para
         * comprobar que se ha subida la imagen y se encuentra disponible
         *
         */

        $arr_data = [
            'name' => $name,
            'path' => $path,
        ];

        return redirect('show-imagen')
            ->with('data', $arr_data);
    }

} //class

Nota: si la imagen no se carga, una posibilidad es que se supere el tamaño de MAX_FILE_SIZE que he incluido en el formulario.

Y esto es todo. Para tener un sistema completo faltaría persistir la ruta donde guardamos la imagen y luego recuperarla para mostrarla a partir de esta.

1
  • Esta respuesta es mucho más coherente y entendible que la otra, teniendo en cuenta que falta información en la pregunta (y es proporcionada en la otra respuesta).
    – Shaz
    Commented el 20 feb. 2018 a las 14:36
1

Para empezar, hay que modificar el metodo store() de plantas.php:

public function store(Request $request){
        $normas=[
            'nombre' => 'required|max:100|unique:plantas',
            'descripcion' => 'required|max:200',
            'foto' => 'image',
        ];

        $this->validate($request,$normas);

        $real=$request->foto->getClientOriginalName();

        Plantas::create(['id'=>$request->id, 'nombre'=>$request->nombre, 'tamaño'=>$request->tamaño, 'flor'=>$request->tamaño, 'hoja'=>$request->hoja, 'descripcion'=>$request->descripcion, 'foto'=>$real]);


        return back()->with('message', ['success', __("Planta creada correctamente")]);
    }

La clave esta en el metodo getClientOriginalName(), el cual obtiene el nombre de la imagen. A partir de ahi, siempre que se deje la imagen en public (o en alguna carpeta dentro de public, para lo cual hay que tomar su ruta relativa) todo ira bien.

El problema radica en que a partir de ahora la variable foto es obligatoria, dandome error si quiero introducir una nueva planta ignorando la foto, lo que me deja el código así si quiero que la foto sea un atributo opcional:

if(is_null($request->foto))
            Plantas::create($request->all());
        else
            Plantas::create(['id'=>$request->id, 'nombre'=>$request->nombre, 'tamaño'=>$request->tamaño,
                'flor'=>$request->tamaño, 'hoja'=>$request->hoja, 'descripcion'=>$request->descripcion,
                'foto'=>$request->foto->getClientOriginalName()]);

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.