0

Vengo con un problema de manejo de archivos, en mi codigo tengo un input file donde subo el archivo excel y tengo las validaciones necesarias para que no me deje subir otro archivo.

El problema es que Chrome, por lo que estuve leyendo en algunos lugares, no te da la ruta exacta donde se encuentra el archivo. En mi caso da algo como esto C:\fakepath\nombre_del_archivo.xlsx

Mi codigo es el siguiente:

$("#FileInput").change(function () {
        var reader = new FileReader();
        if (this.files.length == 0) {
            //Si no existe archivo boton Procesar.. desactivado
            $("#btnProcesar").prop("disabled", true);
        } else {
            //Si existe verificamos la extension
            var fileExtension = extencionDeArchivo(this.files[0].name);
            if (fileExtension == 'xlsx') {
                //Si cumple habilitamos el boton procesar
                $("#btnProcesar").prop("disabled", false);
            } else {
                //Si no cumple deshabilitamos el boton procesar y limpiamos el input con el archivo que se queria cargar.
                $("#btnProcesar").prop("disabled", true);
                //Borrar los datos del input file
                var $input = $("#FileInput");

                $input.replaceWith($input.val('').clone(true));
            }
        }
    });

function extencionDeArchivo(filename) {
        return filename.split('.').pop();
    }

Si quiero obtener la url del archivo para pasarlo a mi controller cuando le doy al boton Procesar me devuelve la ruta que les comente arriba.

console.log($("#FileInput").val());

Este console.log use para ver ese problema.

Como puedo hacer para pasar el archivo excel al controller y leer el contenido del archivo para poder usarlo?

Si existe una forma de hacerlo por jquery o javascript la lectura del archivo tambien estaria bueno saberlo.

Por ahora mi boton Procesar solo tiene esto

$('#btnProcesar').on('click', function () {
        var $input = $("#FileInput");
        console.log($input[0].files[0]);
    })

1 respuesta 1

1

Si lo que quieres es obtener la ruta del archivo en disco, olvídalo, no va a ocurrir. Por motivos de seguridad, los navegadores no lo permiten.

Ahora, si lo que quieres hacer es subir un archivo (al parecer de excel) y pasarlo al controlador para procesarlo, entonces, esta es una de las rutas que puedes seguir:

La Vista:

No sé cómo tienes tu HTML, pero necesitarás al menos un form cuyos datos serán enviados al controlador. En el método BeginForm(), deberá ir el nombre de la acción (el método del controlador que recibirá el archivo), el nombre del controlador, el verbo/método (POST), y el atributo enctype con el valor "multipart/form-data".

Dentro del form va el input de tipo file donde elegirás el archivo que vas a subir. Sugiero ENCARECIDAMENTE que leas la documentación del input en MDN para saber más acerca de este elemento.

 @using (Html.BeginForm("ImportarArchivo", "Home", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <div class="col-12">
            <input type="file" class="form-control" name="file" required />
        </div>
        <button type="submit">Subir Archivo</button>

    }

El Controller:

El nombre del método en el controlador deberá ser el mismo especificado en el BeginForm() de la vista y DEBE recibir un objeto de tipo HttpPostedFileBase que es donde estará el archivo.

[HttpPost]
public JsonResult ImportarArchivo (HttpPostedFileBase file)
    {

        List<string> data = new List<string>();

        if (file!=null) { 
        
            // hacer lo que quieras con el archivo

        }

        return Json( new { file.FileName });
    }

Y eso es todo. No necesitas javascript para leer el archivo, aunque puedes utilizarlo para realizar validaciones previas.

Para leer el archivo excel existen diferentes librerías y/o paquetes NuGet; pero eso ya es para otra pregunta.

Espero te sirva. Suerte.

2
  • Bien entiendo lo que me dijiste, pero si yo lo mando al controlador de esa forma, después necesitaría leer los datos que tiene adentro y mandarlos al JavaScript, como podría hacer eso? Commented el 20 ago. 2021 a las 13:30
  • Esa ya es otra pregunta. Lo que debes hacer es agregar un evento al botón Subir Archivo, que se encarge de hacer el POST a través de $.ajax(), o un XMLHttpRequest(), y mandar el archivo dentro del FormData. Luego, esperas el resultado del ajax y con el objeto response que viene del controlador, realizas el trabajo que desees.
    – Arriel
    Commented el 20 ago. 2021 a las 14:10

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.