Aprenda la API de Dropbox en 5 minutos

Este artículo le enseñará lo mínimo que necesita saber para comenzar a crear aplicaciones sobre la API de Dropbox.

Una vez que lo haya leído, también puede consultar nuestro curso gratuito sobre la API de Dropbox si está interesado en obtener más información. En ese curso, aprenderá a crear una aplicación de organización de gastos utilizando JavaScript moderno.

Haga clic en la imagen para acceder a nuestro curso de Dropbox

Este artículo usa JavaScript para sus ejemplos, sin embargo, los SDK son muy similares en todos los idiomas, por lo que incluso si, por ejemplo, es un desarrollador de Python, debería ser relevante.

La puesta en marcha

Para construir sobre Dropbox, primero necesita una cuenta de Dropbox. Una vez que se haya registrado, diríjase a la sección de desarrolladores. Elija Mis aplicaciones en el lado izquierdo del panel y haga clic en Crear aplicación .

Elija la siguiente configuración y asigne un nombre único a su aplicación.

Configuración preferida para este tutorial

Configuración preferida para este tutorial

En el panel, vaya a la sección OAuth 2 en Token de acceso generado y haga clic en el Generatebotón para obtener una API accessToken, que guardaremos para más adelante.

Ahora, instalemos la aplicación de Dropbox para escritorio. Inicie sesión en la aplicación con sus nuevas credenciales de desarrollador y debería poder ver una carpeta con el mismo nombre que su aplicación recién creada. En mi caso, lo es LearnDbxIn5Minutes.

Suelta algunos archivos e imágenes en la carpeta, para que podamos acceder a ellos a través de nuestra API.

Instalación y clase inicial de Dropbox

Ahora instalemos la biblioteca de Dropbox en nuestro proyecto.

npm install dropbox

o

yarn add dropbox

Importe Dropbox y cree dbxcon nuestro token y la biblioteca de recuperación que se pasó a nuestra instancia de clase. Si lo prefiere axioso cualquier otra biblioteca de búsqueda, no dude en pasarla.

import { Dropbox } from 'dropbox'; const accessToken = ''; const dbx = new Dropbox({ accessToken, fetch }); 

Tenga en cuenta que Dropbox es una importación con nombre. La razón es que hay otras sub-bibliotecas dentro 'dropbox', por ejemplo DropboxTeam, pero nos enfocaremos solo Dropboxen este tutorial.

Obtener archivos

El primer método que veremos es para obtener archivos.

dbx.filesListFolder({ path: '' }).then(response => console.log(response)) 

filesListFolder()toma una ruta a la carpeta de destino y enumera todos los archivos que contiene. Este método devuelve una promesa.

Además, vale la pena tener en cuenta que proporcionará una cadena vacía ''y no una barra '/'para llegar a la raíz de nuestra aplicación. Ahora la raíz es la raíz de la carpeta de nuestra aplicación  y no la de la cuenta de Dropbox. Siempre podemos cambiar esa opción en la configuración de nuestra aplicación.

Cuando ejecutamos nuestro código, la consola debería registrar las entradas de nuestra carpeta de Dropbox:

Obtener más archivos

En esta parte, veremos cómo cargar más archivos, con potencial para implementar la paginación o una función de desplazamiento infinito.

Para ello, Dropbox tiene un concepto de a cursor, que indica nuestra posición actual entre los archivos que hemos recibido y los que deben enviarse.

Por ejemplo, tenemos una carpeta con 10 archivos y solicitamos 5. El cursor nos hará saber que hay más archivos para descargar a través de la has-more: truepropiedad en el response. Podemos continuar solicitando archivos usando filesListFolderContinue()pass in cursorhasta que no queden más archivos y obtenemos has_more: false.

const getFiles = async () => { const response = await dbx.filesListFolder({ path: '', limit: 5 }) console.log(response) } getFiles() 

Cuando examinamos la respuesta que obtuvimos en la consola, podemos ver has_more: true.

Actualicemos nuestro código para manejar casos en los que tengamos más archivos para recibir.

const getFiles = async () => { const response = await dbx.filesListFolder({ path: '', limit: 5 }) // We can perform a custom action with received files processFiles(response.entries) if (response.has_more) { // provide a callback for the newly received entries // to be processed getMoreFiles(response.cursor, more => processFiles(more.entries)) } } getFiles() 

Proporcionamos el cursor para que la API sepa las entradas que hemos recibido, por lo que no volveremos a recibir los mismos archivos.

const getMoreFiles = async (cursor, callback) => { // request further files from where the previous call finished const response = await dbx.filesListFolderContinue({ cursor }) // if a callback is provided we call it if (callback) callback(response) if (response.has_more) { // if there are more files, call getMoreFiles recursively, // providing the same callback. await getMoreFiles(response.cursor, callback) } } 

Tenga en cuenta la devolución de llamada que estamos proporcionando para getMoreFiles()funcionar. Es un truco realmente genial para asegurarnos de que nuestros archivos recién recibidos reciban el mismo tratamiento que sus predecesores.

Al final, cuando no hay más archivos para obtener, recibimos has_more: false

It’s also worth mentioning that the recursive call is implemented here for simplicity of the tutorial, rather than for the performance of the function. If you have large amounts of data to load, please refactor this out into a more performant function.

Getting thumbnails

The third method we’re going to study is for getting thumbnails for our files.

In order to request thumbnails for the uploaded files, we can call filesGetThumbnailBatch().

dbx.filesGetThumbnailBatch({ entries: [{ path: '', size: 'w32h32', format: 'png', }] }); 

This endpoint is optimized for getting multiple thumbnails and it accepts an array of objects, where each object can have multiple properties specified.

The essential property is path, which holds the same caveats as in filesListFolder().

In our response, we can access our images via the thumbnail properties.

You can see that the thumbnails are not returned as links, but as really really long strings — this is a base64 image. You could use the string in your HTML to set src of to "data:image/jpeg;base64, ${file.thumbnail}".

And if I render my response, I would get these amazing cats!

Créditos de imagen: Max Pixel (1, 2, 3)

Image credits: Max Pixel (1, 2, 3)

Moving files

Lastly, we’re going to cover moving our files from one folder to another.

We can use filesMoveBatchV2() for moving our files in batches from one folder to another. This method works best when implemented as a part of an async function.

The method accepts entries array of objects, that consist of from_path and to_path properties.

filesMoveBatchV2() returns either success if the call was immediately successful, in case there are only a few files to process. However, for bigger workloads, it’s going to return an object with a property async_job_id, and that means that your call is being executed and we will need to check up on it at a later stage.

We can use filesMoveBatchCheckV2() to keep checking for completion of our job until it’s complete and is not in_progress any more.

const entries = { from_path: 'origin_folder', to_path: 'destination_folder } const moveFiles = async () => { let response = await dbx.filesMoveBatchV2({ entries }) const { async_job_id } = response if (async_job_id) { do { response = await dbx.filesMoveBatchCheckV2({ async_job_id }) // This where we perform state update or any other action. console.log(res) } while (response['.tag'] === 'in_progress') } } 

Wrap up

Congratulations! You now have a very basic understanding of Dropbox API and its JavaScript SDK.

Si desea obtener más información sobre la API de Dropbox y crear una aplicación sobre ella con Vanilla JavaScript, asegúrese de consultar nuestro curso gratuito sobre Scrimba. Junto con esta publicación, ha sido patrocinado y pagado por Dropbox. Este patrocinio ayuda a Scrimba a mantener las luces encendidas y nos permite seguir creando contenido gratuito para nuestra comunidad a lo largo de 2019. ¡Muchas gracias a Dropbox por eso!

Feliz codificación :)