Upload multiple photos with subtitles

Question

I’m having a relationship problem between the caption and the photo while uploading.

I’m uploading multiple photos and each photo has a caption. The code goes something like this

html

<!-- form via post-->
<input type="file" id="fotos" name="fotos[]" multiple/><br>
<!-- galeria gerado dinamicamente conforme é selecionado as fotos -->
<div id="galeria"></div>

javascript

//contador de fotos, aqui está o problema.
var qtdFotos=0;
function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object


  for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }        

    f.id=qtdFotos;
    qtdFotos++;

    var reader = new FileReader();


    reader.onload = (function(theFile) {
      return function(e) {
        var image;


        image = '<div class="content-foto">';
           image += '<img id="foto'+theFile.id+'" class="thumb" src="'+e.target.result+'" ></img>';
           image += '<p>Descrição:</p>';
           //estou usando o contador de fotos aqui para diferenciar os nomes dos input, mas não está funcionando da forma que quero.
           image += '<input name="descricao_foto'+theFile.id+'" type="text"></input>';
           image += '<p>Fotógrafo:</p>';          
           image += '<input name="fotografo_foto'+theFile.id+'" type="text"></input>';
        image += '</div>';
        $('#galeria').append(image);            
      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
}
document.getElementById('fotos').addEventListener('change', handleFileSelect, false);

php

$fotos = array();
for($i=0;$i<count($_FILES['fotos']['name']);$i++){
    if($files["fotos"]["error"][$i] != 0)
        continue;
    $foto = new Foto();
    //aqui a descrição não está correspondendo com a foto.
    $foto->nome = $_FILES['fotos']['name'][$i];
    $foto->descricao = $_POST['descricao_foto'.$i] ;
    $foto->fotografo = $_POST['fotografo_foto'.$i] ;
    $foto->tmp_name = $_FILES['fotos']['tmp_name'][$i];
    $fotos[] = $foto;
}
salvarFotos($fotos);

The problem I’ve identified is in the photo counter, the for that I do in the javascript does not correspond with the for that I do in the php.Because the order of the photos that is passed via post is not the same that is created in javascript. Causing the Wrong Relationship Between Writing and Photographer With Wrong Photo

Answer 1

To be clear, what happened is that if the user selects some files and closes the window select files. And then he then realizes that he forgot some files and clicks to select them next.

What happens in this situation is quite simple. As the multiple selection field, if you choose something else then the previous selection is removed.

So my solution to this was, 1º hide input from multiple files with Hide() method 2º remove input id 3º create a new input with the old id and name and add to html

  //esconde input e remove o id dele, pois nao vai mais ser usado
  $('#fotos').hide();
  $('#fotos').removeAttr('id');
  //cria outro input de multiplos arquivos com as msm informações do antigo
  var novoInput = '<input type="file" id="fotos" name="fotos[]" multiple/>';
  $('#selector').append(novoInput);
  //cria o evendo novamente para o input
  document.getElementById('fotos').addEventListener('change', handleFileSelect, false);

final code

<script>
var qtdFotos=0;
function handleFileSelect(evt) {
  var files = evt.target.files; // FileList object

  // Loop through the FileList and render image files as thumbnails.
  for (var i = 0, f; f = files[i]; i++) {

    // Only process image files.
    if (!f.type.match('image.*')) {
      continue;
    }

    f.id=qtdFotos;
    qtdFotos++;


    var reader = new FileReader();

    // Closure to capture the file information.
    reader.onload = (function(theFile) {
      return function(e) {
        var image;


        image = '<div class="content-foto">';
           image += '<img id="foto'+theFile.id+'" class="thumb" src="'+e.target.result+'" ></img>';
           image += '<p>Descrição:</p>';
           image += '<input name="descricao_foto'+theFile.id+'" type="text"></input>';
        image += '</div>';
        $('#galeria').append(image);   

      };
    })(f);

    // Read in the image file as a data URL.
    reader.readAsDataURL(f);
  }
  //esconde input e remove o id dele, pois nao vai mais ser usado
  $('#fotos').hide();
  $('#fotos').removeAttr('id');
  //cria outro input de multiplos arquivos com as msm informações do antigo
  var novoInput = '<input type="file" id="fotos" name="fotos[]" multiple/>';
  $('#selector').append(novoInput);
  //cria o evendo novamente para o input
  document.getElementById('fotos').addEventListener('change', handleFileSelect, false);
}
document.getElementById('fotos').addEventListener('change', handleFileSelect, false);
</script>

SOURCE: that link clarified my doubt, but the solution used was not compatible with what I needed, so I created this other solution.