0

tengo una aplicación de encuestas tipo facebook, en donde un usuario puede crear las preguntas y las posibles respuestas.... en los campos de respuesta tengo un input de tipo text obviamente... A las posibles respuestas tiene la opción de agregarle una imagen para referencia de la respuesta si así lo desea...

<form action="{{url('encuesta')}}" class="form-horizontal" method="POST" enctype="multipart/form-data">
    {{ csrf_field() }}
    <div class="card-body">
        <h4 class="card-title">Completa los datos para crear tu encuesta <b>{{$tipo_encuesta}}</b></h4>
        <div class="form-group row">
            <input type="hidden" value="{{$tipo_encuesta}}" name="tipo_encuesta">
            <label for="fname" class="col-sm-3 text-right control-label col-form-label">Titulo *</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" name="titulo" id="titulo" placeholder="Agrega el titulo (requerido)" required>
            </div>
        </div>
        <div class="form-group row">
            <label for="" class="col-sm-3 text-right control-label col-form-label">Fecha Inicio *</label>
            <div class="col-sm-9">
                <input type="datetime-local" class="form-control" name="fecha_inicio" data-select="datepicker">
            </div>
        </div>
        <div class="form-group row">
            <label for="" class="col-sm-3 text-right control-label col-form-label">Fecha Finalizacion *</label>
            <div class="col-sm-9">
                <input type="datetime-local" class="form-control" name="fecha_finalizacion" data-select="datepicker">

                <div style="width: 250px; margin: 50px auto;">
                    <div id="picker"> </div>
                    <input type="hidden" id="result" value="" />
                </div>
            </div>
        </div>
        <div class="form-group row">
            <label for="" class="col-sm-3 text-right control-label col-form-label">Portada</label>
            <div class="col-sm-9">
                <input type="file" class="form-control" name="foto" accept="image/*" onchange="loadFile(event)">
                <img id="output" width="50" />
            </div>
        </div>
        <div class="form-group row">
            <div class="col-sm-12">
                <h4>Apartir de abajo escribe las preguntas que deseas que los usuarios respondan:</h4>
            </div>
        </div>
        <div class="form-group row">
            <label for="" class="col-sm-3 text-right control-label col-form-label">Escribe una pregunta</label>
            <div class="col-sm-9">
                <input type="text" class="form-control" name="subtitulo" id="subtitulo" placeholder="Escribe una pregunta">
            </div>
        </div>
        <div class="form-group row" v-for="(item, index) in lista">
            <label for="" class="col-sm-3 text-right control-label col-form-label">
                Opción @{{ index + 1 }}
            </label>
            <div class="col-sm-9">
                <div class="row">
                    <div class="col-md-6">
                        <input :id="index + 1" type="text" class="form-control" name="opcion[]" placeholder="">
                    </div>
                    <div class="col-md-6">
                        <label :for="'input'+index + 1">
                            <img width="50" src="{{asset('imagenes/addImage.png')}}" alt="">
                        </label>
                        <input type="file" name="opcionesImg[]" :id="'input'+index + 1" style="display: none;">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group row">

            <div class="col-sm-6">
                <button type="button" class="btn btn-info float-right" v-on:click="agregarInput">
                    <i class="fa fa-plus-circle"></i>
                </button>
            </div>
            <div class="col-sm-6">
                <button type="button" class="btn btn-warning" v-on:click="quitarInput">
                    <i class="fa fa-minus"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="border-top">
        <div class="card-body">
            <button type="submit" class="btn btn-success">Guardar</button>
        </div>
    </div>
</form>

Como se puede ver el formulario es dinámico.. la cantidad de campos que se puede agregar es 20, para eso uso un poco de vuejs. El problema aquí es que las imágenes deben ser opcionales... y al ser opcionales un usuario podría crear 5 posibles respuestas y solo agregar 3 imágenes. En mi controlador:

public function store(Request $request)
    {
        //
        $pregunta = new Pregunta();
        $pregunta->titulo = $request->titulo;
        $pregunta->subtitulo = $request->subtitulo;
        $pregunta->fecha_inicio = $request->fecha_inicio;
        $pregunta->fecha_finalizacion = $request->fecha_finalizacion;
        $pregunta->estado = '1';
        if(Input::hasFile('foto')) {
            $file=Input::file('foto');
            Image::make($request->file('foto'))
                ->resize(244, 245)
                ->save(public_path().'/imagenes/preguntas/' . $file->getClientOriginalName());
            $pregunta->foto=$file->getClientOriginalName();
        }
        $pregunta->user_id = Auth::user()->id;
        $pregunta->opciones = serialize($request->opcion);
        var_dump($request->opcionesImg); die;
        if ($request->opcionesImg) {
            if(Input::hasFile('opcionesImg')) {
                foreach($request->file('opcionesImg') as $image)
                {
                    Image::make($image)
                        ->resize(400, 150)
                        ->save(public_path().'/imagenes/preguntas/' . $image->getClientOriginalName());
                    $name=$image->getClientOriginalName(); 
                    $data[] = $name;  
                }
            }
        }
        $pregunta->opcionesImg=json_encode($data);
        $pregunta->tipo_encuesta = $request->tipo_encuesta;
        if ($pregunta->save()) {
            var_dump("encuesta agregada");
        }
    }

En mi controlador como se puede apreciar estoy haciendo uso de las imágenes y de las respuesta totalmente aparte y como dije mas arriba un usuario podria crear 5 respuestas pero solo 3 imagenes... Esto es un problema porque el sistema se basa en colocar la imagen con la respuesta por el orden y la cantidad de imágenes que hay... Por ejemplo si yo creo una encuesta de quien es el mejor jugador del mundo y las opciones serian

 `imagen_messi` `Messi`
    `imagen_neymar` `Neymar`
    `imagen_cavanni` `Cavanni`
    `imagen_suarez` `Suarez`
    `imagen_ronaldo` `CR7`

en el caso de que el usuario agregue las 5 imágenes y 5 posibles respuestas no habría problema.. Pero si el usuario crea 5 respuestas pero solo agrega 3 imágenes quedaría así y me saltaría un error al querer mostrar

   `imagen_messi` `Messi`
    `imagen_suarez` `Neymar`
    `imagen_ronaldo` `Cavanni`
     `Suarez`
     `CR7`

Intente agregando una imagen por defecto a mi input file pero según leí y pregunte no se puede... Entonces mi pregunta es... Como puedo asociar mis preguntas con mis imágenes para no tener este problema?

1 respuesta 1

0

Lo que tendrías que hacer es primero, especificarle un indice al arreglo de inputs en tu html y no ir pidiendo memoria consecutiva conforme se van creando, es decir:

<input :id="index + 1" type="text" class="form-control" name="opcion[@{{ index + 1 }}]" placeholder="">

<input type="file" name="opcionesImg[@{{ index + 1 }}]" :id="'input'+index + 1" style="display: none;">

Una vez que ya tienes tus índices, ya podrás saber que imagen le pertenece a cada opción, entonces en tu controlador harías algo como lo siguiente:

$opciones = $request->opcion;
$data = array();
foreach($opciones as $indice => $valor){
   $aux_array = array();
   $opcion = $valor;
   $name = ''; //aquí no sé si quieras igualar el nombre así o en nulo en dado caso que no exista imagen correspondiente al índice...

   if($request->hasFile('opcionesImg.'.$indice)){
      Image::make($image)
                        ->resize(400, 150)
                        ->save(public_path().'/imagenes/preguntas/' . $image->getClientOriginalName());
                    $name=$image->getClientOriginalName();

   }

   //Recomendaría que los indices fueran numéricos los de la primera dimensión del array y en la segunda dimensión fueran los nombres de los campos, en este caso, opción e imagen
   $aux_array['opcion'] = $opcion;
   $aux_array['name'] = $name;
   $data[] = $aux_array;
}

Tus campos quedarían como lo siguiente:

array(
   '0' => ['opcion' => 'Messi',
           'nombre' => 'imagen_messi.jpg'],
   '1' => ['opcion' => 'Neymar',
           'nombre' => 'imagen_neymar.jpg'],
)

El problema si queda como tenías pensado así:

`imagen_neymar`: `Neymar`
`imagen_cavanni`: `Cavanni`
`imagen_suarez`: `Suarez`
`imagen_ronaldo`: `CR7`

Correrías el riesgo de que quizá se repita el índice en algún caso y sobreescribirá los valores, pero si aún así deseas que quede de esa forma yo creo que te puedes basar en mi solución para hacerlo, es muy sencillo.

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.