0

Estoy trabajando con ng-file-upload para trabajar con imagenes. En si tengo dos opciones para subir una imagen para cada una. Al mostrar la primera imagen se muestra en mi primer ng-model pero al mostrar mi segunda imagen en mi segundo ng-model éste no se muestro sino que se sobre escribe mi primer ng-model. A continuacion comparto mi vista html

<div class="row">
    <div class="col s12 m12 hide-on-med-and-down">
      <div class="image-upload">
        <label for="file-input">
          <i class="material-icons left teal-text">photo_camera</i>
          Agrega imagen 1...
        </label>
        <input
          id="file-input"
          type="file"
          ngf-select
          ng-model="data.imagen_promocion"
          name="file"
          ngf-pattern="'image/*'"
          accept="image/*"
          ngf-max-size="3MB"
        />
      </div>
      <img ngf-thumbnail="data.imagen_promocion || '/thumb.jpg'"/>
    </div> 
    <div class="col s12 m12 hide-on-med-and-down">
      <div class="image-upload">
        <label for="file-input">
          <i class="material-icons left teal-text">photo_camera</i>
          Agrega imagen 2...
        </label>
        <input
          id="file-input"
          type="file"
          ngf-select
          ng-model="data.imagen_promocion2"
          name="file"
          ngf-pattern="'image/*'"
          accept="image/*"
          ngf-max-size="3MB"
        />
      </div>
      <img ngf-thumbnail="data.imagen_promocion2 || '/thumb.jpg'"/>
    </div> 
  </div>

El error esta en mi css

.image-upload > input{
  display: none;
}
.image-upload i{
  font-size: 30px;
  cursor: pointer;
}

Si borro este css mi codigo trabaja de forma correcta. este es mi jsfiddle Como puedo solucionar este error? de antemano les agradezco

7
  • ¿Haz probado utilizar valores name diferentes en los inputs veo que ambos tienen el mismo valor file? Commented el 26 jul. 2017 a las 6:18
  • si pero igual falla
    – Dimoreno
    Commented el 26 jul. 2017 a las 14:35
  • En los ejemplos de ng-file-upload veo que se utiliza el atributo ngf-multiple en un botón o bien en un área donde se sueltan los archivos. Sin embargo no que utilices este atributo en tu código. Commented el 26 jul. 2017 a las 21:09
  • @JuanManuel dices que agregue ngf-multiple?
    – Dimoreno
    Commented el 26 jul. 2017 a las 21:34
  • Sinceramente nunca usé ng-file-upload, pero en la página github.com/danialfarid/ng-file-upload veo que los ejemplos en lugar de usar input se usa button para seleccionar el archivo o un div donde se puede arrastrar y soltar. Luego supongo que ng-file-upload se encarga de crear el input correspondiente por tí. Yo te recomiendo que tomes un ejemplo de subida múltiple tal como lo escribe el desarrollador y luego lo adaptes a tus necesidades. Commented el 27 jul. 2017 a las 8:06

1 respuesta 1

0

El problema es que los ids y los names de los inputs son iguales y el atributo for de cada label apunta al mismo input. Aquí tienes el ejemplo que funciona: https://jsfiddle.net/d6jb2817/

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.