Tengo dos campos de entrada de imagen.
<input type="file" accept="image/*" id="one" /> <input type="file" accept="image/*" id="two" /> Estoy tratando de sincronizar el valor de two a one , cada vez que two reciben una entrada, asigne el valor a one . two es solo un campo visible en la interfaz, one es el formulario original utilizado para la recopilación y carga de datos.
two.onchange = () => {one.value = two.value}dado que es un campo de archivo, me pregunto si esto puede no funcionar (aún no he escrito la prueba unitaria, porque incluso el valor está registrado en el frente, dudo que el archivo quede atrapado en el backend). Estaré más que agradecido si alguien sugiere una forma tangible de hacerlo.
Lo está haciendo mal, debe establecer la propiedad .files en lugar de .value porque el navegador almacenó archivos en la propiedad de files , no en la propiedad de value . Puedes hacerlo como a continuación Ejemplo:
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" />lo siento, la respuesta de @Abdul Basit no funcionará. Traté de asignar files , pero resultó que funciona en la interfaz, pero en realidad no se transfieren datos al backend. por lo tanto, es imposible asignar valores (archivos) entre entradas de archivos .
one.files = two.files <MultiValueDict: {}>Lo hice por reemplazo de DOM.
// 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)>]}>aquí tenemos archivos en backend eventualmente.