Question

0

86

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.

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

5 months ago · Juan Pablo Isaza Report

0

Answer question

Find remote jobs

Accepted Answer · 2022-06-28T09:15:29.962Z

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.