how to get multiple file input from a single input
-
13-06-2021 - |
Question
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++;
}
}
Solution 3
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);
}
OTHER TIPS
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()"
>×</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
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.