• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

149
Views
js assign one image input value to another

I have two image input fields

<input type="file" accept="image/*" id="one" />
<input type="file" accept="image/*" id="two" />

I am trying to sync value from two to one, whenever two receives input, assign the value to one. two is just a field visible in frontend, one is the original form used for data collection and upload.

two.onchange = () => {one.value = two.value}

since it is file field, I wonder if this may not work (have not write unit test yet, because even the value is logged in fronted, I doubt the file will be catched in backend). I will be more than grateful if someone suggest a tangible way to do it.

about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

You are doing wrong you have to set .files property instead of .value because the Browser stored files in files property not in value property. You can do it like below Example:

const one = document.getElementById('one');
const two = document.getElementById('two');
two.onchange = () => {one.files = two.files}
<input type="file" accept="image/*" id="one" />
<input type="file" accept="image/*" id="two" />

about 3 years ago · Juan Pablo Isaza Report

0

sorry, @Abdul Basit's answer won't work. I tried to assign files but it turns out working in frontend, but there is actually no data transferred to backend. therefore, it is impossible to assign value(files) between file inputs.

one.files = two.files
<MultiValueDict: {}>

I did it by DOM replacement.

// replace image input
two.remove();
Array.from(one.attributes).forEach(attr => {
    two.setAttribute(attr.nodeName, attr.nodeValue);
});
one.parentNode.replaceChild(two, one);
<MultiValueDict: {'image': [<InMemoryUploadedFile: main.jpg (image/jpeg)>]}>

here we got files in backend eventually.

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error