Tengo una entrada que me permite seleccionar varias imágenes, cuando está vacío aparece el botón, cuando selecciono una imagen, ¿hay alguna forma de superponer el botón? Es decir, cuando el cuadro está vacío, vemos el botón, pero cuando se inserta una imagen en el cuadro, ¿es posible hacer que este botón no sea visible? He intentado con z-index y javascript, pero no funcionó correctamente.

StackBlitz

HTML

 <div class="drop">
      <div class="cont">
        <div class="browse">
            Upload files
          </div>
        <div class="desc">
          Click to upload or drop your files
        </div>       
      </div>
      <ng-container *ngIf="urls.length > 0">
          <img [src]="urls[0]"><span class="delete" style="cursor: pointer;" (click)="deleteImage(urls[0])">X</span>
        </ng-container>
        <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
    </div>

CSS

.drop {
  margin-left: 32px;
    width: 928px;
  height: 696px;
    border: 3px dashed #DADFE3;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    background: white;
    /* margin: auto; */
    position: relative;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
  /*&:hover
    cursor: pointer
    background: #f5f5f5*/;
}

.drop .cont {
    width: 500px;
    height: 170px;
    color: #8E99A5;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.drop .cont i {
    font-size: 400%;
    color: #8E99A5;
    position: relative;
}

.drop .cont .desc {
    text-align: center;
   font: Regular 16px/19px Montserrat;
   letter-spacing: 0;
   color: #4981C2;
}

.drop .cont .browse {
    margin: 10px 25%;
    padding: 8px 16px;
    border-radius: 16px;
    background: #ECF2F9;
    text-align: center;
font: Bold 13px/20px Noto Sans;
letter-spacing: 0;
color: #4D4F5C;
}

.drop input {
  width: 928px;
  height: 650px;
    cursor: pointer;
    background: red;
    opacity: 0;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#list {
    width: 100%;
    text-align: left;
    position: absolute;
    left: 0;
    top: 0;
}

#list .thumb {
    height: 100%;
    border: 1px solid #323a44;
    margin: 10px 5px 0 0;
}

img {
    width: 100% !important;
    height: 100% !important;
}
0
user11052170 30 oct. 2019 a las 17:15

3 respuestas

La mejor respuesta

¿Por qué no usas ngIf en tu botón si las imágenes son visibles?

      <div class="cont" *ngIf="urls.length === 0">
        <div class="browse" >
            Upload files
        </div>
        <div class="desc">
          Click to upload or drop your files
        </div>       
      </div>
0
Piotr Gudalewicz 30 oct. 2019 a las 14:24

Puede agregar este fragmento de código para la verificación del archivo seleccionado,

*ngIf="urls && urls.length != 1"

En realidad para tu ejemplo,

  <div class="cont">
    <div class="browse"  *ngIf="urls && urls.length != 1">
        Upload files
      </div>
    <div class="desc">
      Click to upload or drop your files
    </div>       
  </div>

Medios que ocultan mi botón de carga cuando la longitud de mi matriz de URL no es diferente de 1.

0
shadowman_93 30 oct. 2019 a las 14:29

Si no desea mostrar el botón de carga cuando se seleccionan las imágenes, puede hacer algo como esto:

<div class="drop">
     <div class="cont">
        <div class="browse">
            Upload files
          </div>
        <div class="desc">
          Click to upload or drop your files
        </div>       
      </div>
      <ng-container *ngIf="urls.length > 0; else drag">
          <img [src]="urls[0]"><span class="delete" style="cursor: pointer;" (click)="deleteImage(urls[0])">X</span>
        </ng-container>
       <ng-template #drag>
        <input type="file" id="files" multiple (change)="detectFiles($event)" accept="image/*">
      </ng-template>
    </div>
0
juancarlos 30 oct. 2019 a las 14:26