CODEWITHSUNDEEP
javascripthtmlfile
Weilory
Weilory

Reputation: 3111

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.

Upvotes: 1

Views: 312

Answers (2)

Weilory
Weilory

Reputation: 3111

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.

Upvotes: 0

Abdul Basit
Abdul Basit

Reputation: 450

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

Upvotes: 3

Related Questions