Take the data attribute value of an input file field

Question

I am in need of help with the following situation

I have several input files fields with the same name and which are used to do various file uploads.

<form>
<label> Foto 3*4</label>
<input type="file" name="file[]" data-name="foto34">
<input type="submit">

<br/>

<label> Foto 16*9</label>
<input type="file" name="file[]" data-name="foto169">
<input type="submit">
</form>

And I would like to take the date attribute so that I can identify which file name is being uploaded via ajax I’ve tried to take it with

this.getAtributte("name")
ou
this.dataset.name

in this last case returns me Undefined. The ajax call is being made like this:

  $(document).ready(function(e){
        $("#form").on('submit', function(e){
           e.preventDefault();
            $.ajax({
                type: 'POST',
                url: 'upload.php',
                data: new FormData(this), //PRECISO PASSAR o DATA_ATRIBUTTE AQUI
                contentType: false,
                cache: false,
                processData:false,
                success: function(msg){
                    $(".btn").removeAttr("disabled");
                }
            });
    });

});

Someone would know to help me?

$(document).ready(function(e){
   $("#form").on('submit', function(e){
      e.preventDefault();
      var formulario = new FormData(this);

      var files = $(":file");
  		console.log(files[0].value);	
	  	console.log(files[1].value);			
      // percorre os campos
      files.each(function(i, e){
         if($(e).val()){
	formulario.append('data-name'+i, $(e).data("name"));
}else{
	formulario.append(i, null);
}
      });

      $.ajax({
         type: 'POST',
         url: 'upload.php',
         data: formulario, 
         contentType: false,
         cache: false,
         processData:false,
         success: function(msg){
            $(".btn").removeAttr("disabled");
         }
      });
   });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <style>
    
input[type='file'] {
 display: none
}

    </style>
<form enctype="multipart/form-data" id="form">
 
        <div class="col-md-4">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">Foto 3x4</h3>
                </div>
                <div class="panel-body">
                    Panel content
                    <br />
                    
                    <label for="file" class="bootstrap btn btn-info btn-xs" ><i class="fa fa-upload"></i> Selecionar Arquivo</label>
                            <input type="file" name="file[]" id="file" class="inputfile" data-name="foto34" >    
                            <button type="submit" class="bootstrap btn btn-primary btn-xs"> Enviar</button>
                            
                </div>
            </div>
        </div>
           
		<div class="col-md-4">
			<div class="panel panel-info">
				<div class="panel-heading">
					<h3 class="panel-title">Foto 16x9</h3>
				</div>
				<div class="panel-body">
					Panel content
					<br />
					<label for="file" class="bootstrap btn btn-info btn-xs"><i class="fa fa-upload"></i> Selecionar Arquivo</label>
						<input type="file" name="file[]" id="file" class="inputfile" data-name="foto169">    
						<button type="submit" class="bootstrap btn btn-primary btn-xs"> Enviar</button>
				</div>
			</div>
		</div>
    </form>

Answer 1

You can go through the type fields file and add to FormData() an array of values of data-name using .append(). Just assign the FormData() to a variable and use .each to add the values. An array will be created in this form, in the order of the fields' indexes file, beginning in 0:

Array
(
    [data-name0] => foto34
    [data-name1] => foto169
)

In PHP you will get the files normally with $_FILES['file'], already the array above you will catch with $_POST.

The Ajax code will look like this:

$(document).ready(function(e){
   $("#form").on('submit', function(e){
      e.preventDefault();

      // atribui o FormData a uma variável
      var formulario = new FormData(this);

      // seleciona os campos tipo file
      var files = $(":file");

      // percorre os campos
      files.each(function(i, e){
         // adiciona os valores no FormData
         formulario.append('data-name'+i, $(e).data("name"));
      });

      $.ajax({
         type: 'POST',
         url: 'upload.php',
         data: formulario, //PRECISO PASSAR o DATA_ATRIBUTTE AQUI
         contentType: false,
         cache: false,
         processData:false,
         success: function(msg){
            $(".btn").removeAttr("disabled");
         }
      });
   });
});

Or you don’t even need to send a name for the array items, just send only the index, like this:

formulario.append(i, $(e).data("name"));

Thus resulting in PHP:

Array
(
    [0] => foto34
    [1] => foto169
)

By the array index you will know in PHP to which file you are associated, because the $_FILES['file'] also results in an array:

array(5) {
  ["name"]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    string(0) ""
  }
  ["type"]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    string(0) ""
  }
  ["tmp_name"]=>
  array(2) {
    [0]=>
    string(0) ""
    [1]=>
    string(0) ""
  }
  ["error"]=>
  array(2) {
    [0]=>
    int(4)
    [1]=>
    int(4)
  }
  ["size"]=>
  array(2) {
    [0]=>
    int(0)
    [1]=>
    int(0)
  }
}