Intégration du module Dropbox chooser
Comment ajouter le service dropbox sur une page web
Il s'agit d'un petit composant javascript permettant d'intégrer dropbox sur un site web. il fonctionne à la façon d'un sélecteur de fichier permettant aux utilisateurs de partager des fichiers directement depuis leurs comptes Dropbox. Ce qui évite d'avoir à gérer autorisations de partage OAuth, uploads et stockages.
drop-ins app« Permettez à vos utilisateurs de partager des fichiers directement depuis leurs comptes Dropbox. »
La première chose à faire avant d'ajouter Dropbox Chooser est de créer une application Drop-in (il faut bien sûr avoir un compte Dropbox). Cette partie ne requiert pas d'étape d'approbation, à l'inverse des autres applications Dropbox. La nouvelle fonction sera disponible aux utilisateurs dès son intégration. Lors de la création de l'appli web, vous aurez besoin de spécifier le nom de domaine où l'application sera hébergée (dans le cas d'un test en local, "localhost" fonctionne). l'onglet "setting" fourni ensuite automatiquement une clé personnalisé. Une fois l'application créée, il suffit de récupérer le code javascript (disponible dans la partie "Setup: Embed code") et de l'ajouter à la page html dans la section <head>.
<script
src="https://www.dropbox.com/static/api/2/dropins.js"
id="dropboxjs"
data-app-key="YOUR-DATA-APP-KEY">
</script>
Pour intégrer le module de Dropbox chooser, il suffit ensuite d'intégrer le bouton dropbox dans un formulaire en utilisant par exemple le code ci-dessous. Pour rappel, un formulaire HTML est composé d'un ou plusieurs widgets. Ceux-ci peuvent être des zones de texte (sur une seule ligne ou plusieurs lignes), des boîtes à sélection, des boutons, des cases à cocher ou des boutons radio. La plupart du temps, ces items sont associés à un libellé qui décrit leur rôle. Lexemple suivant ne contiendra qu'un seul bouton, ainsi qu'une zone de saisie.
<form>
<a class=" dropbox-dropin-btn dropbox-dropin-default" href="#"
onclick="Dropbox.choose
({
multiselect: false,
success: function(files)
{
$('#dbselect').val(files[0].link);
}
});
">
<span class="dropin-btn-status"></span>Joindre un fichier Dropbox
</a>
<input id="dbselect" size="60" />
</form>
On obtiendra alors quelquechose de ce style:
Dropbox chooser s'ouvre dans une fenêtre contextuelle, et devra donc être appelé via un évènement déclenché par l'utilisateur. Sinon l'évènement popup sera probablement bloqué par le navigateur. Pour utiliser les options de personnalisation (abandon de procédure, affichage ou non des options disponibles, choix des extensions autorisées ...), voir la partie "triggering the chooser" et suivantes.
drop-ins appLes navigateurs supportés sont IE8+, Chrome, Firefox et Safari, ainsi que le navigateur Android. Les autres afficheront un bouton grisé. Pour de plus ample détails ou en cas de difficultés, vous pouvez effectuer une recherche via le centre d'assistance Dropbox ou dans les forums de la communauté.