Que se vea imagenes en la lista de un formulario


#1

Veran, para empezar, tengo esta tabla:

Schema::create('fotos', function (Blueprint $table){`
    $table->increments('id');
    $table->string('foto');
    $table->string('nombre');
    $table->date('fecha');
    $table->timestamps();
});

Esta tabla almacena fotos para usarlas en un formulario para otra tabla que tendra una clave foranea a esta tabla.
Como las fotos se almacenan en la carpeta public/bajada, tengo esta función:

public function ruta(){
    return "bajada/".$this->foto;
}

Este es el formulario:

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Publicar una noticia</div>

                <div class="card-body">
                    <form method="POST" action="subir_foto" enctype="multipart/form-data">
                        @csrf

                        <input type="hidden" name="user_id" value="{{ auth()->user()->id }}"/>

                        <div class="form-group row">
                            <label for="foto_id" class="col-md-4 col-form-label text-md-right">Foto de Archivo</label>

                            <div class="col-md-6">
                                <select id="foto_id" class="form-control{{ $errors->has('foto_id') ? ' is-invalid' : '' }}" name="foto_id">

                                    @foreach($fotos as $fot)
                                        <option value="{{$fot->id}}" {{(old('foto_id') == $fot->id) ? 'selected' : ''}}>{{$fot->nombre}}</option>
                                    @endforeach
                                </select>

                                @if ($errors->has('foto_id'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('foto_id') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="titulo" class="col-md-4 col-form-label text-md-right">Título</label>

                            <div class="col-md-6">
                                <input id="titulo" type="text" class="form-control{{ $errors->has('titulo') ? ' is-invalid' : '' }}" name="titulo" value="{{ old('titulo') }}" required autofocus>

                                @if ($errors->has('titulo'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('titulo') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="texto" class="col-md-4 col-form-label text-md-right">Cuerpo de la noticia</label>

                            <div class="col-md-6">
                                <input id="texto" type="text" class="form-control{{ $errors->has('texto') ? ' is-invalid' : '' }}" name="texto" value="{{ old('texto') }}" required autofocus>

                                @if ($errors->has('texto'))
                                    <span class="invalid-feedback">
                                        <strong>{{ $errors->first('texto') }}</strong>
                                    </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row mb-0">
                            <div class="col-md-6 offset-md-4">
                                <button type="submit" class="btn btn-primary">
                                    Subir Foto
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Y este es el resultado:

Pero claro, en este formulario no se ve la foto que usare. Quiero que se vea, tal y como ocurre en este ejemplo:
AgxQO

Hay quien me sugerio algo llamado Selec2, pero no entiendo que es lo que tengo que hacer.


#2

Are you using an HTML template?


#3

Yes, I use a HTML file for the view.


#4

Maybe the HTML template does not support what ypu want to do?


#5

Maybe, but, what I can do?


#6

Use another theme maybe?


#7

I hear about something called selec2, but I haven’t any idea about how use it.


#8

Can you explain and show another example sorry?


#9

Este es ahora mi formulario.
El primer elemento es un desplegable llamado Foto de Archivo, que apunta a la tabla Foto.
Por ahora solo muestra la variable nombre, pero tambien quiero que se muestre la variable foto, la cual es la imagen. Es decir, quiero que se muestre un pequeño icono con la foto que sera usada para crear el articulo.