1

Quiero que al hacer click en el botón selección 2 no aparezca el mismo nombre del documento en los dos label, deseo que cada uno de los input file coloque en el label el archivo seleccionado según corresponda.

const selectFile = function() {
  let regex = /[^\\]+$/
  this.choose,
    this.selected
  this.msg = str => {
    let prefix = '[selectFile.js]\n\nError: '
    return alert(prefix + str)
  }
  this.check = () => {
    if (this.choose && this.selected != null) {
      let choose = document.getElementById(this.choose),
        selected = document.getElementById(this.selected)
      choose.addEventListener('change', (e) => {
        if (choose.value != '') {
          selected.innerHTML = choose.value.match(regex)
        }
      })
    } else {
      this.msg('Targets not set.')
    }
  }
  selectFile.prototype.targets = (trigger, filetext) => {
    this.choose = trigger
    this.selected = filetext
  }
  selectFile.prototype.simulate = (e) => {
    if (this.choose != null) {
      let choose = document.getElementById(this.choose)
      if (typeof choose != 'undefined') {
        choose.click()
        this.check()
      } else {
        this.msg('Could not find element ' + this.choose)
      }
    } else {
      this.msg('Targets not set.')
    }
  }
};

let seleccion = new selectFile();
seleccion.targets('choose', 'selected');
document.querySelector('#seleccion').addEventListener('click', seleccion.simulate);

let seleccion2 = new selectFile();
seleccion2.targets('choose', 'selected2');
document.querySelector('#seleccion2').addEventListener('click', seleccion2.simulate);
<div id="fondo">
  <input type="file" hidden id="choose">
  <button id="seleccion" type="button">seleccion</button>
  <label id="selected" for="seleccion">Ningún archivo seleccionado</label>
</div>

<div id="fondo">
  <input type="file" hidden id="choose">
  <button id="seleccion2" type="button">seleccion2</button>
  <label id="selected2" for="seleccion2">Ningún archivo seleccionado</label>
</div>

1 respuesta 1

1

El problema es que estás asignando mismo ID para los dos campos tipo file; los ID deben ser únicos.

Para el segundo campo, usa otro ID:

<input type="file" hidden id="choose2">

Y en Javascript lo activas:

seleccion2.targets('choose2', 'selected2');

const selectFile = function() {
  let regex = /[^\\]+$/
  this.choose,
    this.selected
  this.msg = str => {
    let prefix = '[selectFile.js]\n\nError: '
    return alert(prefix + str)
  }
  this.check = () => {
    if (this.choose && this.selected != null) {
      let choose = document.getElementById(this.choose),
        selected = document.getElementById(this.selected)
      choose.addEventListener('change', (e) => {
        if (choose.value != '') {
          selected.innerHTML = choose.value.match(regex)
        }
      })
    } else {
      this.msg('Targets not set.')
    }
  }
  selectFile.prototype.targets = (trigger, filetext) => {
    this.choose = trigger
    this.selected = filetext
  }
  selectFile.prototype.simulate = (e) => {
    if (this.choose != null) {
      let choose = document.getElementById(this.choose)
      if (typeof choose != 'undefined') {
        choose.click()
        this.check()
      } else {
        this.msg('Could not find element ' + this.choose)
      }
    } else {
      this.msg('Targets not set.')
    }
  }
};

let seleccion = new selectFile();
seleccion.targets('choose', 'selected');
document.querySelector('#seleccion').addEventListener('click', seleccion.simulate);

let seleccion2 = new selectFile();
seleccion2.targets('choose2', 'selected2');
document.querySelector('#seleccion2').addEventListener('click', seleccion2.simulate);
<div id="fondo">
  <input type="file" hidden id="choose">
  <button id="seleccion" type="button">seleccion</button>
  <label id="selected" for="seleccion">Ningún archivo seleccionado</label>
</div>

<div id="fondo">
  <input type="file" hidden id="choose2">
  <button id="seleccion2" type="button">seleccion2</button>
  <label id="selected2" for="seleccion2">Ningún archivo seleccionado</label>
</div>

1
  • Gracias, lo realicé así me di cuenta del error.
    – Belen
    el 6 jul. 2021 a las 20:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.