Hola chicos,

En esta guía estamos analizando cómo implementar y dar estilo a un cargador de archivos gratuito en sus formularios de flujo web.
Un ejemplo de esto es el formulario de envío en flowbase.co

Estaguía se basa en la plataforma Uploadcare y la utiliza.
Uploadcare proporciona un nivel gratuito que está limitado a 500 subidas, o 500mb.
Las imágenes están permitidas de forma predeterminada, sin embargo tendrá que añadir la facturación para utilizar todos los tipos de archivos.

https://uploadcare.com/docs/guides/webflow/

Ahora tendrá que crear una cuenta, y acceder a su llave API - ubicada en su tablero de mandos.
Con una cuenta, necesitamos agregar este script y reemplazarlo con nuestra llave.

<script>UPLOADCARE_PUBLIC_KEY = 'YOUR_PUBLIC_KEY';</script><br=""><script src="https://ucarecdn.com/libs/widget/3.x/uploadcare.full.min.js" data-integration="Webflow"></script>

Ahora añade un atributo personalizado a una entrada de texto nueva o existente y aplica el atributo role="uploadcare-uploader" para permitir que el widget funcione en tu formulario.

Ocultar esa entrada dándole una clase específica, "ocultar", por ejemplo. Luego, configúrelo para que no muestre ninguno en el editor de flujo de trabajo.

‍

Estilo del botón de carga

Para dar estilo al botón se requiere un conocimiento básico de CSS. O tal vez incluso buscar en Google los elementos que necesitas cambiar.
Esto es lo que he usado para que empieces.

.uploadcare--widget {
width: 100%;
}
.uploadcare--widget__button_type_open {
width: 100%;
min-width: 150px;
background: #01ccbe;
padding: 8px;
color: white;
border-style: solid;
border-width: 1px;
border-color: rgba(1, 204, 190, .15);
border-radius: 40px;
font-family: Karla;
cursor: pointer;
}
.uploadcare--widget__button_type_open:hover {
background: #19b3a8;
font-family: Karla;
}
}

Eso es, espero que ayude