8 months ago

How to preview a Excel file before importing into database

Posted 8 months ago by msslgomez

I'm doing some imports for my project and they all work good, but I would like to show a preview of the data to be imported before the data is imported. Like if the Excel has 25 users to be imported I would like to show a table with the data that's inside the Excel and then have the option to import it after having previewed it.

I'm just not sure how to do it with the code I currently have, this is the form that submits the data in my vue

<form :action="'/users/import'" method="post" enctype="multipart/form-data">
    <input type="hidden" name="_token" :value="csrf"/>
            <input class="inputfile" type="file" name="ufile" id="userfile"/>
            <label for="userfile">Seleccione un Archivo Excel</label>
            <button class="el-button el-button--warning">Importar</button>

Route in web.php

Route::post('users/import', '[email protected]');

Import function in UserController

public function import(Request $request)
        'ufile' => 'required|mimes:xls,xlsx'

    $path = $request->file('ufile')->getRealPath();
    $data = Excel::load($path)->get();
    try {
       if ($data->count()) {
            foreach ($data as $key => $value) {
                    $dbUser = $this->getUser($value['carnet']);
                    $dbUser->name = $value['nombre'];
                    $dbUser->card = $value['cedula'];
                    $dbUser->scard = $value['carnet'];
                    $dbUser->email = $value['correo'];
                    $dbUser->password = $value['password'];

                    $this->isSet('tipo_usuario', $value);
                    $user_type_id = $this->getUserId($value['tipo_usuario']);
                    $dbUser->user_type_id = $user_type_id->id;


                    foreach (explode(',', str_replace(' ', '', $value['categoria_usuario'])) as $c) {
                        $category = $this->getCategory($c);
        return redirect('/imports')->with('success', 'Usuarios importados correctamente!');
    } catch (Exception $e) {
        throw new HttpException(500, 'Sucedio un error importando la informaciĆ³n favor intentar de nuevo');

private function getCategory($id)
    $cat_id = Category::where('id', $id)->first();
    return $cat_id;

private function isSet($field, $reqData)
    if (!isset($reqData[$field])) {
        throw new HttpException(500, "Sucedio un error importando la informaciĆ³n. No se encuenta la columna $field");

private function getUserId($id)
    $userId = UserType::where('id', $id)->first();
    return $userId;

private function getUser($scard)
    $user = User::where('scard', $scard)->first();
    if (empty($user)) {
        $user = new User();
    return $user;

This is working but I would like to improve the user experience when it comes to the importing, because right now the user selects the file and clicks on import and then gets a little message that says successful, but that's it. In order to see what has been imported they have to go to the users page and I feel if they are importing more than one file then going to the users page every time to see, is not very efficient and not very user friendly.

Also if it's possible to check if the data is incorrect, as in they are trying to import classes in the users import, and also check if the excel is empty.

Please sign in or create an account to participate in this conversation.