7

Using browser firefox and chrome

I have an input file element.

<input type='file' id='tempFileInput' multiple></input>

Let say I have selected three files for the above file input box ('tempFileInput');

OnChange I want to separate three files into three new file input boxes for each file. i.e

<input type='file' id='inputFile_0'></input> 
<input type='file' id='inputFile_1'></input> 
<input type='file' id='inputFile_2'></input>

I'm struggling to achieve this. Any help?

//I have written a small JavaScript snippet towards what I wana achieve.

var index = 0;
function multipleInputBoxes(tempFileInput){
   var divForm = document.getElementById('divForm');
   var numOfFiles = tempFileInput.files.length;

   for(var i=0; i<numOfFiles; i++){
      var newUploader = document.createElement('input');
      newUploader.type='file';
      newUploader.id = 'inputFile_' + index;

      var file = tempFileInput.files[i];
      ***newUploader.files[0] = file;***
      //above line does not work, as by default due to security reasons input type='file' is read only, and non editable.

      divForm.appendChild(newUploader);
      index++;
   }
}
Improve this question
4
  • Do you want to implement multi select form submit? else I didnot get your question. Commented Jun 12, 2012 at 5:38
  • There is no way to set the value of a file input. I thought maybe there would be a way to clone the input an remove all but one item, however, you cannot modify the FileList of a file input, either — only clear it completely. Therefore, there is no solution to your question. Commented Jun 12, 2012 at 5:54
  • @subirkumarsao Nope. When a user selects three files form the fileInputBox. I want to separate each file from that fileInputBox and create three new file input boxes each on a different form. As the user treats each file differently on every form. Commented Jun 12, 2012 at 5:58
  • @OverZealous - I definitely agree, that's why i posted this question at this forum. Just wanted to point out I can access each file from the filInputBox 'var file = tempFileInput.files[i];', so is there a way i can assign this 'file' variable to any html element and post it when the form gets submitted. Thanks Commented Jun 12, 2012 at 6:05

3 Answers 3

Reset to default
3

Found scattered code in other posts and assembled a working example, that breaks down input file 'multiple' files into individual files and allows you to remove them or add new ones without losing the previously selected ones:

JS code

// Requires jQuery

function addFileToNewInput(file, newInput) {
  if (!newInput) { return }

  var dataTransfer = new DataTransfer()
  dataTransfer.items.add(file)
  newInput.files = dataTransfer.files
}

function addFileNameToPreview(file, preview) {
  if (!preview) { return }

  preview.innerText = file.name
}

function breakIntoSeparateFiles(input, targetSelector, templateSelector) {
  var $input = $(input)
  var templateHtml = $(templateSelector).html()

  if (!input.files) { return }

  for(var file of input.files) {
    var $newFile = $(templateHtml).appendTo(targetSelector)
    addFileToNewInput(file, $newFile.find("input")[0])
    addFileNameToPreview(file, $newFile.find(".file-name")[0])
  }

  $input.val([])
}

HTML

<!-- Requires bootstrap css for style -->

<form class="m-5">
  <div id="file-list"></div>

  <label for="upload_input" class="btn btn-warning">Upload</label>
  <input
    id="upload_input"
    type="file"
    name="post[attachments][]"
    class="d-none"
    multiple="multiple"
    onchange="window.breakIntoSeparateFiles(this, '#file-list', '#file-preview')"
  />

  <template id="file-preview">
    <div class="file-preview mb-2">
      <span class="file-name"></span>
      <button
        class="btn btn-sm btn-danger ml-2"
        onclick="$(this).closest('.file-preview').remove()"
       >&times;</button>

      <input class="d-none" multiple="multiple" type="file" name="post[attachments][]">
    </div>
  </template>
</form>

I wrote an article on this which has more examples: https://medium.com/@goncalvesjoao/break-input-file-into-individual-files-and-preview-them-29fdbab925b2

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Your code part: var dataTransfer = new DataTransfer(); dataTransfer.items.add(file); newInput.files = dataTransfer.file; helps my work... Thanks
0

If you are on HTML5, you can select multiple files with one input tag. There no need for additional ones.

Use the HTML5 below:

<input type='file' id='tempFileInput' multiple='multiple'></input>

Update:

There is no way to do what you want. The files attribute is ready only for a reason. It's to prevent uploading files without user's agreement. If it's not read only, then you can script that and upload any files from user's computer, which is a huge security issue.

Improve this answer

1 Comment

Thanks for reply. I can select multiple files my goal is after i have selected multiple files to separate them into individual file with their own file input box
0

So I was having difficulty accessing file(s) form single fileinput and separately saving them in each form. As I could access each file var file = tempFileInput.files[i], I created a loop and saved each file in a html 'object' tag and saved the file object in object.value. For e.g

var numOfFile = tempFileInput.files.length;
for (var int i=0; i<numOfFile; i++){
    //get file object from the filinput element
    var file = tempFileInput.files[i];

    //create new element
    var newObj = document.createElement('object');
        newObj.id = 'obj_' + i;
        newObj.value = file;

    //append object to new form
    createNewForm(newObj);
}

function createNewForm(newObj){
   ...do something here
   ...
   ...
   newForm.appendChild(newObj);
}
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.