Search code examples
c#.netxlsx

Send XLSX file to controller with C# and JavaScript


I need to send an XLSX file and also an HTML file to the Controller but I don't know what type the file is for the Model (string, char, byte[]...), how can I pass these files?

My HTML looks like this:

                <div class="flex flex-column">
                    <!--Para inserir o titulo do email-->
                    <h6>Titulo:</h6>
                    <input id="titulo" type="text" placeholder="Titulo do Email" style="margin: 0 !important; width: 280px;" />
                </div>
                <div class="flex flex-column">
                    <!--Para inserir o corpo do email-->
                    <h6>Anexar corpo do email:</h6>
                    <input type="file" id="corpo" />
                </div>
                <div class="flex flex-column">
                    <!--Para parametro e os emails-->
                    <h6>Importar planilha de e-mails:</h6>
                    <input type="file" id="parametros" />
                </div>
            </div>
            <div class="button-space">
                <input class="btn btn-primary" type="button" value="Preparar e-mails" onclick="CarregarDados()" />
            </div>

The JavaScript:

    function EnviarEmail() {
        const data = {
            Titulo: document.getElementById("titulo").value,
            Corpo: document.getElementById("corpo").value,
            Parametros: document.getElementById("parametros").value
        };
    
        console.log(data);
        //POST request with body equal on data in JSON format
        fetch('/DisparoEmail/EnviaEmail', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify(data),
        })
        .then((response) => response.arrayBuffer())
        //Then with the data from the response in JSON...
        .then((buffer) => {
    
            const decoder = new TextDecoder('iso-8859-1');
            const text = decoder.decode(buffer);
    
    
            //document.querySelector("#divListaFila").innerHTML = text;
        })
        //Then with the error genereted...
        .catch((error) => {
            console.error('Error:', error);
        });

}

Modell:

public class DisparoEmailViewModel
{
    public string Titulo { get; set; }
    public string Corpo { get; set; }
    public string Parametros { get; set; }
    List<Parametro1> Parametro1s { get; set; }
    List<Parametro2> Parametro2s { get; set; }

}

And Controller:

public bool EnviaEmail(DisparoEmailViewModel email = null)
{
    if(email != null)
    {
        DisparoEmailExtension teste = new DisparoEmailExtension();
        teste.EnviaEmail(email);
        return true;
    }
    return false;
}

Solution

  • You should use HttpPostedFileBase for handling file uploads (see this link).

    Also, if you need to support multiple files, you could use <input type='file' multiple> (see this link).