js assign one image input value to another-CodePudding

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.

CodePudding user response：

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" />