Odtnhj

I have a file_field_tag inside a rails form with a select file field:

<%= file_field_tag "attachments[media_files]", multiple: true, id: "files" %>

And I have an area to preview the images/videos and remove if need be:

<span id="result"></span>

Everything is working correct but there is only one glitch.... If the images/videos are in separate folders, I have to add the files from one folder first and then from the other folder. The files show at the preview, but after this process only the second batch of files gets saved when I submit the form.
Here is the javascript for all of the above:

window.onload = function()
 if(window.File && window.FileList && window.FileReader)
 

 var filesInput = document.getElementById("files");


 filesInput.addEventListener("change", function(event)


 var files = event.target.files; 
 var output = document.getElementById("result");

 for(var i = 0; i< files.length; i++)
 exif)$/i))
 continue;

 var picReader = new FileReader();

 picReader.addEventListener("load",function(event)

 var picFile = event.target;

 var span = document.createElement("span");

 span.innerHTML = ['<img class="thumb" src="', picFile.result, '" title="', picFile.name, '"/><span class="remove_img_preview"></span>'].join('');



 output.insertBefore(span,null);
 span.children[1].addEventListener("click", function(event)
 span.parentNode.removeChild(span);
 );

 );

 picReader.readAsDataURL(file);
 

 );
 
 else
 
 console.log("Your browser does not support File API");
 

Depending on what you're trying to achieve you could just save the files into an array variable:

////////////////////////////////
// Create an array for the files somewhere
var fileCache = ;
////////////////////////////////

window.onload = function()
 if(window.File && window.FileList && window.FileReader)
 

 var filesInput = document.getElementById("files");


 filesInput.addEventListener("change", function(event)


 var files = event.target.files; 
 var output = document.getElementById("result");

 for(var i = 0; i< files.length; i++)
 avi
 );
 
 else
 
 console.log("Your browser does not support File API");
 

<input type="file" id="files" />

Generally, I would avoid using a random global variable, but without knowing exactly what you want to do with the list of files this is the most generic answer.