How to send multiple files via AJAX and store them in the database?

Question

I have a form in which I can send a single file, by a file field, and store it in the database.

However, I need to be able to send more than one file through the form and store them in the database.

Below is my code for you to better understand my problem.

//CÓDIGO PARA PREENCHIMENTO DA LISTA COM OS DADOS DA PESQUISA 
$(document).ready(function() {

      $('#formulario-atividade-extra-cliente').submit(function(e) {
        e.preventDefault();
        var formulario_extra = $(this);
        var retorno = inserirFormulario(formulario_extra);

      });



      function inserirFormulario(dados) {


        arquivo = $("#arquivo-cliente");
        arquivo = arquivo[0];
        file = arquivo.files;
        file = file[0];
        // Apenas 2MB é permitido
        if (file != undefined) {
          if (file.size > 2 * 1024 * 1024) {
            alert("Arquivo excede os 2 Megas");
            return false;
          }
        }

        var formul = $('#formulario-atividade-extra-cliente')[0];
        var data = new FormData(formul);
        $.ajax({
          type: "POST",
          enctype: 'multipart/form-data',
          url: "../banco/banco-crm/pagina-atividade-extra-cliente/update-cliente.php",
          data: data,
          processData: false,
          contentType: false,
          cache: false,
          timeout: 600000,


        }).done(function(data) {

          if (data == "atividadecriadacomsucesso") {
            $('#modal-confirmacao').modal('show');

            //Limpar o formulário
            $('#formulario-atividade-extra-cliente').each(function() {
              this.reset();
            });

          } else {
            $('#modal-negacao').modal('show');
            console.log(data);

            //Limpar o formulário
            $('#formulario-atividade-extra-cliente').each(function() {
              this.reset();
            });

          }


        }).fail(function() {
          alert("Ativou o fail do AJAX");

        }).always(function(data) {
          console.log(data);

        });

      }

<form id="formulario-atividade-extra-cliente" enctype="multipart/form-data">
   
  <!-- CAMPO DETALHES -->
 
    <label for="destalhes-atividade-cliente">Detalhes</label>   
      <textarea name="detalhes-atividade-cliente" id="detalhes-atividade-cliente" style="resize:none" maxlength="500" rows="7" placeholder="Descreva detalhes sobre a atividade que será realizada"></textarea>

  <!-- Campo anexar Arquivos -->

    <label for="arquivo-cliente">Enviar Arquivos:</label>
      <input class="form-control form-control-sm" type="file" name="arquivo-cliente" id="arquivo-cliente" multiple>

    <input id="criar-atividade-extra" type="submit">
    
</form>


<!-- Código PHP COM O CÓDIGO DE RECEBIMENTO DOS DADOS DO FORM (update-cliente.php -->

<?php
				
	date_default_timezone_set('Etc/GMT+3');
	setlocale(LC_ALL, "", "pt_BR.utf-8");
	
	//UPLOAD DE ARQUIVO  VINDO DO FORMULÁRIO
	if(!empty($_FILES["arquivo-cliente"]["tmp_name"]))
	{
		$file_tmp = $_FILES["arquivo-cliente"]["tmp_name"]; //NOME DO ARQUIVO NO COMPUTADOR
		$file_name = $_FILES["arquivo-cliente"]["name"];
		$file_size = $_FILES["arquivo-cliente"]["size"]; 
		$file_type = $_FILES["arquivo-cliente"]["type"];
		$partes = explode(".", $file_name);
		$extensao = end($partes);

		$binario = file_get_contents($file_tmp); // evitamos erro de sintaxe do MySQL
		$binario = mysqli_real_escape_string($conecta, $binario);
		//FIM DO UPLOAD DE ARQUIVO
	}	
	
	
	
	//PREENCHE AS VARIÁVEIS COM OS DADOS VINDOS DOS CAMPOS DO FORMULÁRIO
	
	$detalhes_atividade_cliente   = filter_input(INPUT_POST, 'detalhes-atividade-cliente', FILTER_SANITIZE_STRING); 
 
	
	$designou_atividade   = "CLIENTE";
	$cod_cliente = $_SESSION["COD"];
	$tributacao_cliente = $_SESSION["TRIBUTACAO"];
	$empresa_cliente = $_SESSION["EMPRESA"];
	
	
	//As duas linhas abaixo, pegando a data de hoje + 2 dias
	$data = date("Y-m-d");
	$data_de_vencimento =  date('Y-m-d', strtotime("+2 days",strtotime($data))); 
	

	
	//CONFIGURANDO A VARIÁVEL CONFERENCIA
	
	if(!empty($_FILES["arquivo-cliente"]["tmp_name"]))
	{
		$conferencia_cliente = "A CONFERIR";
		$possui_arquivos_cliente = "S";
	}
	else
	{
		$conferencia_cliente = "NÃO POSSUI ARQUIVO";
		$possui_arquivos_cliente = "N";
	}
	
	$insert_atividade_cliente = "INSERT INTO tbl_atividades(COD, EMPRESAS, TRIBUTACAO, RESPONSAVEL, DESIGNADOR, DT_VENCIMENTO, STATUS, FEEDBACK, EXTRA_URGENTE_COMUM, VISUALIZADO, ATUALIZADO, ARQUIVO, EMPRESA_ORIGEM, CONFERENCIA) 
	VALUES('$cod_cliente','$empresa_cliente','$tributacao_cliente','NAO ATRIBUIDO','$designou_atividade','$data_de_vencimento','PENDENTE','$detalhes_atividade_cliente','E','N','S','$possui_arquivos_cliente','NAO ATRIBUIDO','$conferencia_cliente')";
  
	$result_insert_atividades_cliente = mysqli_query($conecta, $insert_atividade_cliente);  	

	
?>

I tried to reduce the code to only sample the part that really matters. Thank you!

Answer 1

I was able to send multiple files and insert them in the database, using the code below. (I believe it is very useful, because I have seen many people with this difficulty)

• Below is how was the code JS (with jQuery). I also created a function (called validateFile()) that validates the files as to the size of each file and also the extensions allowed

$('#formulario-atividade-extra').submit(function(e) {
  e.preventDefault();
  var formulario_extra = $(this);
  var retorno = inserirFormulario(formulario_extra);

});


function inserirFormulario(dados) {

  //VERIFICANDO O TAMANHO DO ARQUIVO
  arquivo = $("#arquivo-cliente");
  arquivo = arquivo[0];
  file = arquivo.files;
  var impedir_upload;
  //file = file[0];

  if (file.length > 9) {
    alert("quantidade de arquivos excede o limite");
    return false;
  }

  ///Vericando o tamanho dos arquivos para validar seu upload
  for (var i = 0; i < file.length; i++) {
    if (validarArquivo(file[i]) != "ok")
      impedir_upload = true;
  };

  if (impedir_upload == true) {
    alert('Tipo de arquivo ou tamanho inválido');
    return false;
  }


  var formul = $('#formulario-atividade-extra-cliente')[0];
  var data = new FormData(formul);


  $.ajax({
    //dataType: "json",
    type: "POST",
    enctype: 'multipart/form-data',
    data: data,
    url: "../banco/banco-crm/pagina-atividade-extra-cliente/update-cliente.php",
    processData: false,
    contentType: false,
    cache: false,
    timeout: 600000

  }).done(function(data) {

    alert("Sucesso");

  }).fail(function() {
    alert("Falha");

  }).always(function(data) {


  });

}


//Função que  faz a validação dos arquivos
function validarArquivo(file) {

  var pega_extensao = file.name.split(".");
  var extensao = pega_extensao[pega_extensao.length - 1];

  // Tipos permitidos
  var mime_types = [
    'xls',
    'csv',
    'txt',
    'pdf',
    'rar',
    'zip',
    'jpg',
    'jpeg',
    'jpg',
    'png'
  ];


  // Validar os tipos
  if (mime_types.indexOf(extensao) == -1) {
    console.log("Tipo inválido");
    return "Tipo inválido";
  }

  // Apenas 2MB é permitido
  if (file.size > 2 * 1024 * 1024) {
    console.log("Tamanho inválido");
    return "Tamanho inválido";
  }

  // Se der tudo certo
  return "ok";
}

<form class="col-lg-10 offset-lg-1" id="formulario-atividade-extra">
  <!--Departamento -->

  <!-- CAMPO DETALHES -->

  <label>Detalhes</label>
  <textarea name="detalhes-da-atividade-modal" id="detalhes-da-atividade-modal" placeholder="Descreva detalhes sobre a atividade que será realizada"></textarea>


  <label for="arquivo-modal">Insira o arquivo:</label>
  <input type="file" name="arquivo-cliente[]" id="arquivo-cliente" multiple />

  <input name="salvar-atividade-extra" id="salvar-atividade-extra" class="btn btn-md btn-primary" type="submit" value="Criar Atividade">

</form>

• Below is how was the code PHP. I also check the size and extension of the file. I also do a Foreach who is performing a INSERT, in each cycle of your Loop, for each file (that is, if 5 files are sent, 5 Loops and 5 Loops will be made INSERTS). NOTE: I insert the files into the database in binary form (not as commonly done by storing the file path)

<?php
 //UPLOAD DE ARQUIVO  VINDO DO FORMULÁRIO
			$files = $_FILES["arquivo-modal"];	
			$contador = sizeof($_FILES["arquivo-cliente"]["tmp_name"]);
			if($_FILES["arquivo-cliente"]["error"][0] != 4)
			{
				//configurando array de verificação back-end de tamanho e tipo do arquivo a ser enviado.
				// Tamanho máximo do arquivo (em Bytes)
					$_verifica['tamanho'] = 1024 * 1024 * 2; // 2Mb	
				// Array com as extensões permitidas
					$_verifica['extensoes'] = array('xlsx','xls','csv','txt','pdf','rar','zip',	'jpg','jpeg','png');
													
				if($contador >= 10)
				die("falha na inserção do arquivo no banco");	
				
				$i = 0;
				foreach($files as $file)
				{
					if($i < $contador)
					{
						$file_tmp = $_FILES["arquivo-modal"]["tmp_name"][$i]; //NOME DO ARQUIVO NO COMPUTADOR
						$file_name = $_FILES["arquivo-cliente"]["name"][$i];
						$file_size = $_FILES["arquivo-cliente"]["size"][$i]; 
						$file_type = $_FILES["arquivo-cliente"]["type"][$i];
						$partes = explode(".", $file_name);
						$extensao = end($partes);


						////verificando a extensão.
						//$extensao = strtolower(end(explode('.', $_FILES['upload-file']['name'])));
						if (array_search($extensao, $_verifica['extensoes']) === false) {
							die('falha na inserção do arquivo no banco');
						}
						// Faz a verificação do tamanho do arquivo
						else if ($_verifica['tamanho'] < $file_size) {
							die('falha na inserção do arquivo no banco');
						}

						
						
						//Nomeando o arquivo que será armazenado
						$nome_do_arquivo_final = $codigo_empresa . "-" . str_replace(' ','-', $atividade) . "-" . date('m-Y', strtotime($data_vencimento)) . '.' . $extensao;
						
						$binario = file_get_contents($file_tmp); // evitamos erro de sintaxe do MySQL
						$binario = mysqli_real_escape_string($conecta, $binario);
						//FIM DO UPLOAD DE ARQUIVO
									
						$insert_arquivo = "INSERT INTO tbl_arquivos(nome,tipo,data_upload,arquivo,codigo_atividade, enviado_por, liberado, liberado_por) VALUES ('$nome_do_arquivo_final','$file_type',now(),'$binario',$codigo_atv, '$usuario_logado','$liberar_crm','$liberado_por')";
						$result_insert_arquivo = mysqli_query($conecta, $insert_arquivo);
						if(!$result_insert_arquivo)
						{
							die('falha na inserção do arquivo no banco');
							
						}
					}	
						
					$i++;
				}
			}	
			//FIM DO UPLOAD DE ARQUIVOS
?>

• I hope I can help users who have this same need I had.