Upload 2 files via ashx

Question

I have the screen below:

I need the user to select a song and a cover, but I’m not finding a way to send both files at once and still validate if the Music and Cover was selected.

Until then I followed the example below, but JS only takes the content of the Photo input (upFoto), however I created the same section with different names to get the input from Music (upMusica), however JS does not send MP3 file, error occurs at the click of send button (lbtEnviar).

Someone would have a suggestion for this case?

$(function () {
        $('#lbtEnviar').click(function () {
            var fileUpload = $("#upFoto").get(0);
            var files = fileUpload.files;
            var test = new FormData();
            for (var i = 0; i < files.length; i++) {
                test.append(files[i].name, files[i]);
            }
            $.ajax({
                url: "UploadArquivo.ashx",
                type: "POST",
                contentType: false,
                processData: false,
                data: test,
                // dataType: "json",
                success: function (result) {
                    alert(result);
                },
                error: function (err) {
                    alert(err.statusText);
                }
            });
        });
    })

Snippet in C# that receives the file:

public void ProcessRequest(HttpContext context)
        {
            try
            {
                if (context.Request.Files.Count > 0)
                {
                    HttpFileCollection files = context.Request.Files;
                    for (int i = 0; i < files.Count; i++)
                    {
                        HttpPostedFile file = files[i];
                        string fname;
                        if (HttpContext.Current.Request.Browser.Browser.ToUpper() == "IE" || HttpContext.Current.Request.Browser.Browser.ToUpper() == "INTERNETEXPLORER")
                        {
                            string[] testfiles = file.FileName.Split(new char[] { '\\' });
                            fname = testfiles[testfiles.Length - 1];
                        }
                        else
                        {
                            fname = file.FileName;
                        }

                        string pathToSave = "D:\\Msik_Arquivos" + "\\" + fname;
                        file.SaveAs(pathToSave);
                    }
                }
                context.Response.ContentType = "text/plain";
                context.Response.Write("File Uploaded Successfully!");
            }

Answer 1

I opted for another solution without using Javascript, I’m using a Fileupload component and I set the button click to send the file the folder I needed:

<asp:FileUpload ID="fupFoto" runat="server"/>

<asp:LinkButton ID="lbtEnviar" type="submit" runat="server" OnClick="lbtEnviar_Click">Enviar</asp:LinkButton>

In the event of clicking the send button I set the section below:

if (fupMusica.HasFile)
{
  string extensaoMusica = Path.GetExtension(fupMusica.FileName);
  if (extensaoMusica == ".mp3")
  {
    try
    {
      string nomeMusica = fupMusica.FileName;
      string pathToSave = "D:\\Musicas_Arquivos" + "\\" + nomeMusica;
      fupMusica.SaveAs(pathToSave);
    }
    catch (Exception)
    { // ERRO AO SALVAR }
  }
  else
  { // ESCOLHA UM ARQUIVO MP3 }
}
else
{ // NÃO FOI SELECIONADO NENHUM ARQUIVO }

By default it is only possible to upload 4MB, so I had to change the properties maxAllowedContentLength, executionTimeout, maxRequestLength.