If i open a file select, select a file, then click file select again and then click cancel, it forgets the originally selected file
//Main input
<input type="file" class="input" id="input" name="avatar">
//Backup input
<input type="file" class="input_two" id="input_two" name="avatar_two">
Is there a workaround for this, possibly creating a temporary input class and copying the .files over to this one so that i can still have access to the last file
$('.input').change(function () {
var value = this.files;
console.log(value);
if(value.length > 0)
{
$(.avatar_two).assign(value)... //This is what i want to do
}
else
{
console.log("nada");
}
is this possible?
If i open a file select, select a file, then click file select again and then click cancel, it forgets the originally selected file
//Main input
<input type="file" class="input" id="input" name="avatar">
//Backup input
<input type="file" class="input_two" id="input_two" name="avatar_two">
Is there a workaround for this, possibly creating a temporary input class and copying the .files over to this one so that i can still have access to the last file
$('.input').change(function () {
var value = this.files;
console.log(value);
if(value.length > 0)
{
$(.avatar_two).assign(value)... //This is what i want to do
}
else
{
console.log("nada");
}
is this possible?
Share Improve this question asked Feb 28, 2017 at 16:28 JeremyJeremy 1511 gold badge1 silver badge10 bronze badges 4- You can not set the value of an file input – epascarello Commented Feb 28, 2017 at 16:32
- function copy() { var myObject, f; myObject = new ActiveXObject("Scripting.FileSystemObject"); f = myObject.file.copy("c:\\test.txt", "c:\\mytest.txt"); } – cvsr.sarma Commented Feb 28, 2017 at 16:34
- 1 ActiveX? is it the 90s? – epascarello Commented Feb 28, 2017 at 16:44
- "Uncaught ReferenceError: ActiveXObject is not defined" nice job at multi-browser patibility. – fdomn-m Commented Feb 28, 2017 at 16:50
3 Answers
Reset to default 7it is possible at 2021 via DataTransfer (at least latest chrome/firefox)
let file = document.getElementById("file");
let back = document.getElementById("back");
file.addEventListener('change', function() {
let files = this.files;
let dt = new DataTransfer();
for(let i=0; i<files.length; i++) {
let f = files[i];
dt.items.add(
new File(
[f.slice(0, f.size, f.type)],
f.name
));
}
back.files = dt.files;
});<input type="file" id="file" multiple>
<input type="file" id="back" multiple>It is not possible to set See React/Javascript--FileReader/<input/>/adding image..files property of <input type="file"> element, which references read-only FileList object.
You can call File.prototype.slice() to create a copy of the File object. Or use FormData, FormData.prototype.append() to store selected files.
var clone, i = 0;
var fd = new FormData();
$('.input').change(function() {
var value = this.files;
console.log(value);
if (value.length > 0) {
clone = value[0].slice(0, value[0].size, value[0].type);
fd.append("file-" + (i++) /* this.name */, value[0]);
} else {
console.log("nada");
}
});
As I know, you cannot do that for security reasons, at least setting the value, I don’t know if coping or cloning it’s possible but take a look to this answer