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
name
diferentes en losinputs
veo que ambos tienen el mismo valorfile
?ng-file-upload
, pero en la página github.com/danialfarid/ng-file-upload veo que los ejemplos en lugar de usarinput
se usabutton
para seleccionar el archivo o undiv
donde se puede arrastrar y soltar. Luego supongo queng-file-upload
se encarga de crear elinput
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.