webflatdesignComment intégrer le service Dropbox sur une page internetwebdesign

Description du module javascript Dropbox chooser.

Permettez à vos utilisateurs de partager des fichiers directement depuis leurs comptes Dropbox.

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 appdrop-ins app

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 type="text/javascript"
src="https://www.dropbox.com/static/api/2/dropins.js"
id="dropboxjs"
data-app-key="YOUR-DATA-APP-KEY">
</script>

Intégration de Dropbox chooser

Il suffit ensuite d'intégrer le bouton dropbox dans un formulaire en utilisant par exemple le code ci-dessous:

<form method="post" action="envoi.php">
    <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:

Joindre un fichier Dropbox


 

 

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.

Les navigateurs supportés sont IE8+, Chrome, Firefox et Safari, ainsi que le navigateur Android. Les autres afficheront un bouton grisé.

publié le 21/03/2014, à 14h26 par