0

Una funcionalidad requerida necesita agregar varias entradas en una tabla. Por lo que agregué el siguiente campo mi ModelCrudController:

$this->crud->addField([
'name'            => 'cookware_variants',
'label'           => 'Variants',
'type'            => 'table_with_image',
'entity_singular' => 'variant', // used on the "Add X" button
'columns'         => [
    'name'  => 'Variant name',
    'details'  => 'Variant details',
    'image'  => 'Variant image'
],
'max' => 10, // maximum rows allowed in the table
'min' => 1, // minimum rows allowed in the table

// Tabs fields
'tab'      => 'Tab',
'fake'     => true, // show the field, but don't store it in the database column above
// 'store_in' => 'details' // [optional] the database column name where you want the fake fields to ACTUALLY be stored as a JSON array 
]);

El campo table existe en Backpack, solamente creé uno nuevo, con base en el original y modifiqué esta parte para que, en vez de crear todos los campos tipo texto, dependiendo la llave, añada uno tipo file.

<tr class="array-row clonable" style="display: none;">
@foreach( $field['columns'] as $column => $label)
@if($column == "image")
<td>
    <input class="form-control form-control-sm" type="file" accept="image/*" data-cell-name="item.{{ $column }}">
</td>
@else
<td>
    <input class="form-control form-control-sm" type="text" data-cell-name="item.{{ $column }}">
</td>
@endif
@endforeach
<td>
    <span class="btn btn-sm btn-light sort-handle pull-right"><span class="sr-only">sort item</span><i class="la la-sort" role="presentation" aria-hidden="true"></i></span>
</td>
<td>
    <button class="btn btn-sm btn-light removeItem" type="button"><span class="sr-only">delete item</span><i class="la la-trash" role="presentation" aria-hidden="true"></i></button>
</td>

El código visualmente funciona:

introducir la descripción de la imagen aquí

Pero cuando mando el request no manda nada relativo al input file que anadí, solo manda la información de los input text. Esta la salida de un dd($this->crud->getRequest()->request);:

introducir la descripción de la imagen aquí

Aún no he encontrado la forma para que estos input file aparezcan en el request para poder manipularlos y guardarlos apropiadamente.

Las versiones de Laravel y Backpack For Laravel (Con licencia) son:

"php": "^8.0.2"
"backpack/crud": "^5.4"

2 respuestas 2

2

La forma en la que se envían los datos de un formulario que incluye campos de tipo file es diferente a la de los campos de tipo text. Los campos de tipo file se envían en un array dentro del objeto $_FILES en lugar del objeto $_POST que contiene los datos de los campos de tipo text.

Para acceder a los datos enviados a través de un campo de tipo file en Laravel, puedes utilizar la función request()->file(). Esta función te devuelve una instancia de la clase Illuminate\Http\UploadedFile, la cual tiene métodos para acceder a la información del archivo subido, como su nombre, tamaño y ubicación temporal en el servidor.

Por ejemplo, si tu formulario incluye un campo de tipo file llamado image, puedes acceder a ese archivo subido en tu controlador de la siguiente manera:

public function store(Request $request)
{
    $image = $request->file('image');
    // Aquí puedes hacer algo con el archivo subido, como
    // moverlo a una ubicación permanente en el servidor
}

Es importante tener en cuenta que, para poder acceder a los datos de un campo de tipo file en Laravel, el atributo enctype del formulario HTML debe ser configurado como multipart/form-data. Por ejemplo:

<form method="POST" enctype="multipart/form-data">
    ...
</form>

Si estás utilizando Backpack For Laravel, es posible que tengas que agregar esta configuración manualmente a tu formulario. Por ejemplo, si estás utilizando la plantilla create.blade.php de Backpack para generar el formulario de creación de un registro, puedes agregar el atributo enctype a la etiqueta form de la siguiente manera:

@section('content')
    <form method="POST" enctype="multipart/form-data">
        ...
    </form>
@endsection

Espero que esta información te ayude a resolver tu problema.

1

Lo primero que hay que hacer, como lo indico en la misma pregunta es obtener el archivo del campo:

php artisan backpack:field --from=table

Después hay que modificar el nombre del archivo por algo como table_with_image.blade.php. Solamente para no poder seguir usando el campo table normalmente en otros lados.

Mandar llamar este campo en el field con el type => 'table_with_image'.

Ahora empezaremos a modificar el archivo table_with_image.blade.php en la parte del <tbody>, explicaré cada modificación en los comentarios:

<tbody class="table-striped items sortableOptions">

    <!-- Detectar si existen valores para saber si se está editando o creando -->
    @if(isset($field['value']))
        <tr class="array-row clonable" style="display: none;">
            
            @foreach( $field['columns'] as $column => $label)
                @if($column == 'image') <!-- Si la columna que se está agregando es nuestro espacio deseado para la imagen -->
                    <td> <!-- Hay que crear un input disabled para después manejarlos en JS, agregarle la clase variant-image para control -->
                        <input disabled class="form-control form-control-sm variant-image" type="text" data-cell-name="item.{{ $column }}">
                    </td>
                @else <!-- Campo normal de texto que ya viene por defecto -->
                    <td>
                        <input class="form-control form-control-sm" type="text" data-cell-name="item.{{ $column }}">
                    </td>
                @endif
            @endforeach


            <td>
                <span class="btn btn-sm btn-light sort-handle pull-right"><span class="sr-only">sort item</span><i class="la la-sort" role="presentation" aria-hidden="true"></i></span>
            </td>
            <td>
                <button class="btn btn-sm btn-light removeItem" type="button"><span class="sr-only">delete item</span><i class="la la-trash" role="presentation" aria-hidden="true"></i></button>
            </td>
        </tr>

    @else
        <tr class="array-row clonable" style="display: none;">
            
            @foreach( $field['columns'] as $column => $label)
                @if($column == "image")<!-- Si la columna que se está agregando es nuestro espacio deseado para la imagen -->
                    <td> <!-- Si estamos creando una entrada nueva, hay que poner un input file con el name terminando en [] para tener todos los archivos con el mismp nombre -->
                        <input class="form-control form-control-sm" type="file" accept="image/*" data-cell-name="item.{{ $column }}" name="item.{{ $column }}[]">
                    </td>
                @else
                    <td> <!-- Campo normal de texto que ya viene por defecto -->
                        <input class="form-control form-control-sm" type="text" data-cell-name="item.{{ $column }}">
                    </td>
                @endif
            @endforeach


            <td>
                <span class="btn btn-sm btn-light sort-handle pull-right"><span class="sr-only">sort item</span><i class="la la-sort" role="presentation" aria-hidden="true"></i></span>
            </td>
            <td>
                <button class="btn btn-sm btn-light removeItem" type="button"><span class="sr-only">delete item</span><i class="la la-trash" role="presentation" aria-hidden="true"></i></button>
            </td>
        </tr>
    @endif
</tbody>

Y ahora, justo encima de la línea @endpush colocamos nuestro script:

<script>

    // Función para crear inputs necesarios para agregar un nuevo archivo o guardar el valor actual del campo
    function createFileInput(hidden = false, named = true, value = null) {
        let input = document.createElement('input');
        if (hidden) {
            input.type = "hidden";
            if (value) {
                input.value = value;
            } else {
                input.value = 'NA';
            }
        } else {
            input.setAttribute('data-dummy', 'true');
            input.type = "file";
        }
        if (named) {
            input.name = "item.image[]";
        }
        input.accept = "image/*";
        input.setAttribute('data-cell-name', 'item.image');
        input.classList.add('form-control');
        input.classList.add('form-control-sm');
        return input;
    }

    // Función para crear las filas de la tabla
    function createImageColumns() {

        // Obtenemos los campos por medio de la clase de control que agregamos más arriba
        let variant_fields = document.querySelectorAll('.variant-image');

        // Esto era para quitar el primer element que era un clonable que hace Backpack por defecto, pero al final no lo quité y puse 0 para que no quitara ningún elemento
        // Puedes ser nodes = variant_fields
        let nodes = [].slice.call(variant_fields, 0);

        for (let i = 0; i < nodes.length; i++) {

            // Obtener el div padre de la columna
            let parent = nodes[i].parentElement;

            // Verificar si no es el elemento clonable que hace Backpack por defecto
            if (!parent.closest('tr').classList.contains('clonable')) {

                // Aplicar un estilo y agregar un dataset de control para el indice de fila
                parent.style.width = '35%';
                parent.setAttribute('data-index', i);

                // Obtener la ruta de la imagen si es que existe una y eliminar el nodo
                let img_route = nodes[i].value;
                nodes[i].remove();

                // Si la imagen existe 
                if (img_route == null || img_route == undefined || img_route === 'NA') { // NA es control propio

                    // Crear un file input y uno más hidden input para ponérselos al div padre
                    let input = createFileInput();
                    // True #1 porque no hay valor y necesito un hidden para controlar con 'NA' como vacío
                    // True #2 porque necesito que se agregue el attributo nombre para tomarlo después en el request
                    let input_hidden = createFileInput(true, true); 
                    parent.appendChild(input);
                    parent.appendChild(input_hidden);

                } else {

                    // Si existe un valor válido como imagen...

                    // Creamos un contenedor general
                    let image_container = document.createElement('div');

                    // Creamos una imagen y le ponemos su attributo src
                    let image = document.createElement('img');
                    image.src = img_route;

                    // Un botón si desean ver la imagen más grande en otra pestaña
                    let view_button = document.createElement('a');
                    view_button.href = img_route;
                    view_button.innerHTML = 'View';
                    view_button.target = '_blank';

                    // Un botón para borrar la imagen
                    let delete_button = document.createElement('a');
                    delete_button.href = '#';
                    delete_button.innerHTML = 'Delete';
                    delete_button.classList.add('delete-button');

                    // Un input hidden para guardar el valor actual de la imagen (la ruta)
                    let hidden_input = createFileInput(true, true, img_route);

                    // Meter todos los elementos al contenedor general
                    image_container.appendChild(view_button);
                    image_container.appendChild(image);
                    image_container.appendChild(delete_button);
                    image_container.appendChild(hidden_input);

                    // Y meter el contenedor general dentro del contenedor padre de la columna de imagen
                    parent.appendChild(image_container);

                }
            }
        }
    }

    // Timeout para darle tiempo a crear todos los elementos antes de trabajar nuestro script personalizado
    setTimeout(() => {
        createImageColumns();
    }, 1000);

    // Listener con event delegation para eventos de nuevo archivo en input
    document.addEventListener("change", function(e) {

        // Obtener el dummy input 
        let current_dummy = e.target.closest('[data-dummy="true"]');

        if (current_dummy) { // Verificación de existencia por la delegación de eventos

            // Obtenemos el td
            let closest_td_element = current_dummy.closest('td');

            // Obtenemos el dataset de index como control para que la imagen se acomode en el index que le corresponde y se añada en orden en el array de archivos
            let index = closest_td_element.dataset.index;
            current_dummy.name = "item.image[" + --index + "]";

            // Añadimos clases y atributos por defecto de Backpack
            current_dummy.setAttribute('data-cell-name', 'item.image');
            current_dummy.classList.add('form-control');
            current_dummy.classList.add('form-control-sm');
            current_dummy.nextElementSibling.remove();
        }
    });

    // Listener para eventos de eliminación de imagenes
    document.addEventListener("click", function(e) {
        // Obtener el botón actual
        let current_delete_button = e.target.closest('.delete-button');

        if (current_delete_button) { // Verificación por la delegación de eventos
            e.preventDefault();

            // Creamos dos input, para controlar la data
            let input = createFileInput(false, false);
            let input_hidden = createFileInput(true, true);

            // Removemos todo lo relacionado a la imagen que ya estaba guardada
            let div_container = current_delete_button.parentElement;
            let parent_container = div_container.parentElement;
            div_container.remove();

            // Añadimos los inputs al contenedor padre de la columna
            parent_container.appendChild(input);
            parent_container.appendChild(input_hidden);
        }
    });
</script>

Ahora lo que falta es la manipulación de los archivos dentro de los métodos store() y update() según corresponda, el mismo código funciona en ambos:

// $variants es un array que contempla dos tipos de valores diferentes:
// 1. string que puede contener la ruta completa de una imagen, indicando que fue previamente guardada y no modificada en este request o 'NA' indicando que se eliminó
// 2. Un objeto de la clase UploadedFile que indicaría que es una nueva imagen que se quiere guardar en este request
// Los campos se llaman "item.image[]" pero no estoy seguro el por qué funciona llamando el nombre como "item_image"
$variants = $this->crud->getRequest()->item_image;

// Si no estáa vacío
if (!empty($variants)) {

    // Crear array de paths
    $image_paths = [];

    // Make path variants' array
    foreach ($variants as $variant) {
        // Si es string, guarda la ruta tal cual
        // Si no es string (O sea un objeto UploadedFile), lo guardas como prefieras, yo uso un archivo personalizado, solo hay que retornar la URL completa para guardarla
        $image_paths[] = is_string($variant) ? $variant : FileHandler::saveFile($variant, 'product/variants', false, true);
    }

    // Obtenemos el contenido del campo table que en mi caso se llama cookware_variants y lo convertimos a array
    $variants_field = json_decode($this->crud->getRequest()->cookware_variants, true);
    foreach ($image_paths as $key => $path) {

        // Como $image_paths y $variants_field están preparados para que tengan el mismo número de elementos
        // Sincronizamos los valores usando la $key
        $variants_field[$key]['image'] = $path;
    }

    // Modificamos el campo table (cookware_variants) y le mandamos un json con el array que acabamos de crear
    $this->crud->getRequest()->request->add(['cookware_variants' => json_encode($variants_field)]);
}

Y listo, la tabla ahora soporta archivos (en mi caso imágenes), su visualización previa y su edición.

El código, especialmente JS, tiene oportunidad de mejoras, pero ya no le quise mover porque ya funcionaba como quería.

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.