DEVHIDE
Login Or Sign up

Filepond file processing

106 Views Asked by At

I have this HTML

<div class="row">
    <div class="col-md-6">
        <input type="file" class="filepond" name="filepond-inspections-file" data-max-file-size="3MB" data-max-files="1"/>
    </div>
    <div class="col-md-6">
        <div id="filePreview"></div>
    </div>
</div>

This JS

$(document).ready(function () {
    const inputInspectionFile = document.querySelector('input[name="filepond-inspections-file"]');
    const pondSquare = FilePond.create(inputInspectionFile, {
        stylePanelLayout: 'compact square',
        acceptedFileTypes: ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
        allowFileTypeValidation: true,
        allowMultiple: false,
        server: {
            process: {
                url: '' + getURLConnection() + 'api/analytics/dailyInspectionsFile.php',
                method: 'POST',
                dataType: "json",
                withCredentials: false,
                headers: {},
                ondata: (formData) => {
                    formData.append('customField', 'value');
                    return formData;
                },
                onload: (response) => {
                    console.log(response);
                },
                onerror: (response) => {
                    console.error('Error durante la carga del archivo:', response);
                    console.error('Detalles del error:', response.error);
                }
            },
            revert: {
                url: '' + getURLConnection() + 'api/analytics/revertDailyInspectionsFile.php',
                method: 'DELETE',
                withCredentials: false,
                headers: {}
            },
            load: null
        }
    });

    pondSquare.on('processfile', (error, file) => {
        const filePreview = document.getElementById('filePreview');
        filePreview.innerHTML = `<p>Vista previa del archivo:</p>`;

        if (error) {
            console.error('Error durante el procesamiento del archivo:', error);
            filePreview.innerHTML += `<p><span class="text-danger">Error:</span> ${error}</p>`;
        } else {
            if (file.fileType.includes('image')) {
                filePreview.innerHTML += `<img src="${file.getFileEncodeDataURL()}" alt="Vista previa" style="max-width: 100%;">`;
            } else if (file.fileType.includes('spreadsheet')) {
                filePreview.innerHTML += `<p>Archivo de hojas de cálculo: ${file.filename}</p>`;

                pondSquare.processFile(file.file)
                    .then((response) => {
                        console.log(response);
                        if (response && response.success) {
                            filePreview.innerHTML += `<pre>Preview: ${JSON.stringify(response.preview, null, 2)}</pre>`;
                        } else {
                            filePreview.innerHTML += `<p><span class="text-danger">Error:</span> ${response && response.error ? response.error : 'undefined'}</p>`;
                        }
                    })
                    .catch((error) => {
                        console.error('Error durante la carga o procesamiento del archivo:', error);
                        filePreview.innerHTML += `<p><span class="text-danger">Error:</span> ${error.message || 'undefined'}</p>`;
                    });
            } else {
                filePreview.innerHTML += `<p><span class="text-danger">Archivo no compatible:</span> <strong>${file.filename}</strong> solo se permiten archivos .xlsx</p>`;
            }
        }
    });
});

And this PHP file which process the xlsx file:

<?php
require '../vendor/autoload.php';

use PhpOffice\PhpSpreadsheet\IOFactory;

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Verifica si se ha subido un archivo
    if (isset($_FILES['filepond-inspections-file']) && $_FILES['filepond-inspections-file']['error'] === UPLOAD_ERR_OK) {
        // Lee el archivo Excel con PhpSpreadsheet
        $spreadsheet = IOFactory::load($_FILES['filepond-inspections-file']['tmp_name']);
        $worksheet = $spreadsheet->getActiveSheet();

        // Define las cabeceras esperadas en tu Excel
        $expectedHeaders = ['id_equipo', 'id_categoria', 'descripcion', 'solucion', 'indicador', 'creado'];

        // Obtén las cabeceras del archivo Excel
        $excelHeaders = [];
        foreach ($worksheet->getRowIterator(1, 1) as $row) {
            foreach ($row->getCellIterator() as $cell) {
                $value = $cell->getValue();
                if ($value !== null) {
                    $excelHeaders[] = $value;
                }
            }
        }

        // Verifica si las cabeceras son correctas
        if ($excelHeaders !== $expectedHeaders) {
            echo json_encode(['error' => 'Las cabeceras del archivo no son válidas.'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
            exit;
        }

        // Obtén los datos
        $data = [];
        foreach ($worksheet->getRowIterator(2) as $row) {
            $rowData = [];
            foreach ($row->getCellIterator() as $cell) {
                $value = $cell->getValue();
                if ($value !== null) {
                    $rowData[] = $value;
                }
            }

            // Verifica que el número de elementos en $rowData sea igual al de $excelHeaders
            if (count($rowData) === count($excelHeaders)) {
                $data[] = array_combine($excelHeaders, $rowData);
            } else {
                // Muestra un mensaje de error detallado
                echo json_encode(['error' => 'Error en la estructura del archivo Excel. Detalles: ' . print_r($rowData, true)], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
                exit;
            }
        }

        // Obtén la vista previa de los primeros 5 registros en formato JSON
        $previewData = array_slice($data, 0, 5);

        /*
        Devuelve la vista previa y los datos del Excel en formato JSON

        preview => Devuelve los primeros 5 registros como vista previa.
        data => Devuelve todos los registros extraidos del Excel
        echo json_encode(['success' => true, 'preview' => $previewData, 'data' => $data], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
        */

        header('Content-Type: application/json; charset=utf-8');
        echo json_encode(['success' => true, 'preview' => $previewData], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    } else {
        echo json_encode(['error' => 'Error al subir el archivo.'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
    }
} else {
    echo json_encode(['error' => 'Método no permitido.'], JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES);
}
?>

And almost everything works well because I get this response in console:

{
  "success":true,
  "preview":[
     {"id_equipo":"7929686520 ","id_categoria":"Plantas","descripcion":"Descripción 1","solucion":"Solución 1","indicador":"Solucionado","creado":44931},
     {"id_equipo":"1785819840 ","id_categoria":"Plantas","descripcion":"Descripción 2","solucion":"Solución 2","indicador":"Pendiente","creado":44931},
     {"id_equipo":"3186288135 ","id_categoria":"Plantas","descripcion":"Descripción 3","solucion":"Solución 3","indicador":"Urgente","creado":44931},
     {"id_equipo":"3241755463 ","id_categoria":"Plantas","descripcion":"Descripción 4","solucion":"Solución 4","indicador":"Solucionado","creado":44931},
     {"id_equipo":"2608773869 ","id_categoria":"Plantas","descripcion":"Descripción 5","solucion":"Solución 5","indicador":"Pendiente","creado":44931}
  ]
}

However after a few seconds I get this error:

Error durante la carga o procesamiento del archivo: 
{error: {…}, file: null}
error: body: "Item not found"
code: 0
headers: undefined
type: "error"
[[Prototype]]: 
    Objectfile: null
    [[Prototype]]: Objectconstructor: ƒ Object()hasOwnProperty: ƒ hasOwnProperty()isPrototypeOf: ƒ isPrototypeOf()propertyIsEnumerable: ƒ propertyIsEnumerable()toLocaleString: ƒ toLocaleString()toString: ƒ toString()valueOf: ƒ valueOf()__defineGetter__: ƒ __defineGetter__()__defineSetter__: ƒ __defineSetter__()__lookupGetter__: ƒ __lookupGetter__()__lookupSetter__: ƒ __lookupSetter__()__proto__: (...)get __proto__: ƒ __proto__()set __proto__: ƒ __proto__()
(anonymous) @ inspectionsFile.js:60
Promise.catch (async)
(anonymous) @ inspectionsFile.js:59
(anonymous) @ filepond.min.js:9
setTimeout (async)
(anonymous) @ filepond.min.js:9
(anonymous) @ filepond.min.js:9
n @ filepond.min.js:9
fire @ filepond.min.js:9
h @ filepond.min.js:9
(anonymous) @ filepond.min.js:9
setTimeout (async)
(anonymous) @ filepond.min.js:9
(anonymous) @ filepond.min.js:9
g @ filepond.min.js:9
_write @ filepond.min.js:9
(anonymous) @ filepond.min.js:9
(anonymous) @ filepond.min.js:9
(anonymous) @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9
requestAnimationFrame (async)
u @ filepond.min.js:9
e @ filepond.min.js:9

Why I'm getting file null if I already got the result in JSON response? It does not write in my section filePreview as expected.

I really appreciate your help!!

javascript php jquery excel filepond
Original Q&A
0

There are 0 best solutions below

Related Questions in JAVASCRIPT

Related Questions in PHP

Related Questions in JQUERY

Related Questions in EXCEL

Related Questions in FILEPOND

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Popular Questions

.

Copyright © 2021 Jogjafile Inc.