Voici comment permettre à vos visiteurs de télécharger des fichiers sur votre site. Ajoutez un bloc de téléchargement gratuit à vos formulaires Webflow. Voilà une alternative gratuite au téléchargement natif de Webflow.
Uploadcare est un outil no-code qui vous permet de télécharger de traiter et de transférer tout type de fichier entre plusieurs applications web. C'est donc une infrastructure complète qui vous permettra de gréer les fichiers de votre site Webflow. Parmi ses principales fonctionnalités, uploadcare permettra à votre site Webflow de :
- Télécharger des fichiers : uploadcare se connecte à 12 sources externes tels que Instagram, Google Drive, Dropbox, les fichiers de votre ordinateur, etc. L'outil vous permet de télécharger des fichiers faisant jusqu'à 5 To.
- Gérer la donnée : l'outil dispose d'une API qui vous permettra de mettre en place des workflow simples comme complexes : API, espace de stockage, webhooks, etc.
- Traiter des fichiers : le traitement des fichiers est assez poussé, notamment au niveau des images et vidéos : conversion de documents, traitement de vidéos, reconnaissance d'objets, active le responsive sur des images, etc.
- Créer des flux de données : les flux de données sont protégés, cryptés, et livrés de manières optimale. Par exemple avec l'utilisation de système responsive pour livrer les images.
Personnalisable et sécurisé, uploadcare est donc un moyen efficace pour substituer à la fonctionnalité de téléchargement native de Webflow, qui est plus limitée et accessible à partir du plan Business : non adapté à des volumen
Voici quels sont les étapes pour créer un système de téléchargement gratuit pour votre site Webflow avec Uploadcare.
Conditions préalables
Pour suivre ce tuto vous aurez au préalable besoin de :
- Disposer d'un compte Webflow payant, car plusieurs fonctionnalités que nous utiliserons sont uniquement accessible depuis une version payante.
- Un compte Uploadcare gratuit
Étape 1 : Créez une clé API Uploadcare
La clé API Uploadcare est un moyen d'identification pour pouvoir connecter l'API de votre compte à d'autres applications. L'API nous permettra ici d'identifier votre projet Uploadcare depuis Webflow. Nous allons ici informer votre formulaire Webflow vers quel projet Uploadcare il faudra envoyer le fichier téléchargé.
Pour obtenir votre clé API Publique il vous suffit d'y accéder depuis l'onglet API keys de votre espace Uploadcare.
Étape 2 : Ajoutez le code Uploadcare à Webflow
Connectez vous à votre compte Webflow et rendez-vous dans les paramètres de votre projet. Allez dans l'onglet "Custom Code" copier le code code ci-dessous. Intégrez le custom code dans le "Head Code".
Dans le script, remplacer 'YOUR_PUBLIC_KEY' par votre clé API publique de l'étape 1 comme ceci : 'xxxxxxxxxxxxxx'
Étape 3 : Personnalisez l'apparence d'Uploadcare dans Webflow
Uploadcare vous met à disposition de nombreux embed code différents qui vont vous permettre de personnaliser l'apparence de votre outil de téléchargement :
- Personnaliser le bouton de téléchargement
- Personnaliser l'animation de chargement de fichiers
- Ajouter une barre de progression
- Ajouter des prévisualisations de fichier
- Ajouter une possibilité de drag & drop
- etc.
Pour personnaliser l'apparence d'Uploadcare dans Webflow vous devrez
- Récupérer le custom code personnalisé
- Utilisez un CSS Webflow personnalisé
Étape 4 : Créez un formulaire web dans Webflow
Depuis le mode designer vous devrez ajouter sur votre page un formulaire Webflow. Nous intégrerons ensuite le lien de téléchargement Uploadcare dans ce formulaire. Il n'est pas nécessaire d'ajouter un nouvel élément Form Block si votre page dispose déjà d'un formulaire.
- Cliquez en haut à gauche sur l'icon "+" "Add Elements"
- Allez jusqu'à l'onglet Forms
- Glissez déposez l'élément "Form Block" sur votre page.
Étape 5 : Intégrez Uploadcare à votre formulaire Webflow
Pour connecter Uploadcare à Webflow, vous devrez procéder en plusieurs étapes :
- Ajoutez un champ texte à votre formulaire : Add Elements > Forms > Input.
- Depuis les paramètres du champs, allez dans "Custom Attributes"
- Cliquez sur l'icone + pour ajoutez un nouvel attribut personnalisé :
Name : role
Value : uploadcare-uploader
4. Vous devrez ensuite masquer le champs texte en vous rendant dans les paramètres de style (icone pinceau) > section "Layout" > cliquez sur l'icone "oeil barré" pour masquer le champs.
Étape 6 : Publiez votre site
Votre système de téléchargement Uploadcare est connecté à votre site Webflow. Pensez à bien publier votre site pour l'activer.
.jpg)
