DEV Community: Fernando Garcia

Darle estilo a un input file upload button

Fernando Garcia — Tue, 08 Nov 2022 19:28:50 +0000

HTML

Vamos a necesitar un div contenedor, un label, otro div que va a llevar el estilo que quieras, inclusive puede ser una imagen o ponerle un icono.



<div class="upload-container">

        <label for="file-input">

          <div class="upload-button"> Choose your file </div>

        </label>

        <input id="file-input" (change)="getFile($event)" type="file" />

    </div>

En el siguiente CSS lo único que vamos a hacer es ocultar el input y darle estilo a la clase "upload-button" aqui es donde le puedes dar el estilo que quieras.

CSS




.upload-container>input {
    display: none;
}

.upload-button{
    cursor: pointer;
    width: 200px;
    border-radius: 8px;
    height: 60px;
    background-color: green;
    display: grid;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    font-weight: 600
}

RESULTADO

Sígueme o escríbeme 😉 cualquier aporte sera bienvenido
https://linktr.ee/fergolive

Element implicitly has an 'any' type because expression of type 'any' can't be used to index type

Fernando Garcia — Tue, 08 Nov 2022 13:04:38 +0000

Tengo este objeto declarado con dos propiedades

photosPlanes:photoPLanes = {

  Entrenamiento: '', 
  Dieta: ''

}

y quiero dinámicamente setear el valor de una de las propiedades del mismo de esta forma:

 if(element.urlThumb!==''){

        this.photosPlanes[element.name]=element.urlThumb

      }

Pero obtengo el siguiente error:

LA SOLUCIÓN

Para resolver el problema usamos algo llamado Type Assertions

"photoPLanes" es la interface que uso

this.photosPlanes[ element.name as keyof photoPLanes ] = element.urlThumb

En el articulo de Borislav Hadzhiev podemos encontrar otro ejemplo mas claro aun:

const str = 'name' as string;

const obj = {
  name: 'James Doe',
  country: 'Chile',
};

// 👇️ "James Doe"
console.log(obj[str as keyof typeof obj]);

// 👇️ type T = "name" | "country"
type T = keyof typeof obj;

Sígueme y cualquier problema escríbeme que te ayudo 😉🤘
https://linktr.ee/fergolive

Hello everyone

Fernando Garcia — Sun, 20 Dec 2020 13:03:30 +0000

I am excited to be part of this community, I am full stack developer,
I am currently working with angular and firebase as they are fast and secure solutions.

I hope I can contribute with you
I really like javascript and its technologies
sorry for my english, I am from Uruguay

Bye bye