hello welcome to the dropbox api
tutorial
in this tutorial we're going to see a
few different methods that are available
to us in the dropbox api that allow us
to interact with files and folders and
manipulate them
my name is christian i'll be your
instructor for this course
and i'm sure you're wondering what we're
going to do and what you'll need to know
so let's jump right in here as far as
what you want to know it's good to know
html and javascript but it's not
necessary really a lot of these methods
we're looking at will be available for
other languages such as python for
example they just might be a little bit
different syntax but the overarching
principles will remain the same so as
long as you're wanting to learn about
the dropbox api even if you don't use
the javascript sdk which we're going to
use
i think you'll find this useful
as for what you'll learn we'll go over
getting some files getting the
thumbnails for those files and moving
those files around now i want to mention
again there are many more options
available in the dropbox api and many
different methods you can use to
manipulate files and folders but these
are the ones we're going to go over and
hopefully that'll give you a good basis
for how the api generally works
additionally we'll use some array
methods that maybe you've never seen
before or maybe need some clarification
how they work
we'll use some es6 features such as
arrow functions
and we'll learn how to use async await
which is a fairly new way of dealing
with asynchronous data and is perfect
for our use case
as for what we're building specifically
well take a look here and you'll see
that we have a file organizer 3000 as
i've affectionately named it we have a
path where we can search for files or
folders and we have them listed out here
with thumbnails
at the end of this lesson we'll be able
to organize
every file in any given folder using the
path here
and once we hit organize it'll move
those files into different folders based
on their date modified
so that's the app we're going to build
let's jump right in
before we start coding out the app i'd
like to go over the developer
documentation real quick so if you want
to click right here on the slide or just
go to dropbox.com
developers
you should see something like this
it'll show you a dashboard of sorts and
if you go over to my apps on the left
hand side
you should see a blank page because most
likely you don't have any apps yet and
then you can click on create app up at
the top right that'll get an app started
for you now before i go further i should
mention you don't need to do this to
take this course just going to give you
some brief information on how to set up
an app so that when you do set up an app
you can be familiar with it and it'll
help you know how i set up this app
so first it's going to ask you which api
you want to use for this app we're using
the regular dropbox api if you wanted to
support teams for dropbox so multiple
people collaborating within dropbox then
you might select dropbox business api
but most likely you're going to go with
the regular api
next we need to choose if we're going to
use just one folder for our app inside
the user's dropbox account or if we need
access to the user's entire dropbox
account for this app i went ahead and
chose app folder
although in reality if we were actually
building this app we would probably want
to choose full dropbox because this app
is essentially going to organize a
user's files and that would require
access to their files lastly we want to
pick a name for our app if it's taken
already then it'll tell you that and you
can pick a new one once you're done go
ahead and click create app
okay great so now that should take you
to a setting screen and we'll quickly go
through these
first we have our status which will
currently be in development when you're
ready you can go ahead and apply for
production so that it can be reviewed by
the dropbox team
currently you are also only the user
that can access this and if you want to
enable additional users you can click
here now that still has a limit on it
since it's a development app and if you
want to enable more users then you would
want to apply for production
here we have the permission type that we
just chose in step two when we first set
up our app
that's app folder we're only wanting
access to one folder in the user dropbox
account we don't want access to their
entire dropbox account and then we have
our app folder name now this is by
default going to be the same name as our
app itself but if you wanted to change
the name of just that folder your app
name would remain the same just the
folder in the dropbox user's account
would change then you can change it here
next we have the app key and secret now
in this tutorial we're not going to use
these but in a real life app you
probably would app keys and secrets are
good for when you need to do
authorization which is actually the next
section here we can choose where we want
to redirect the user once they have been
authorized
allow implicit grant i'm not going to
really go into if you hover over the eye
when you actually go to the page you can
see a little more detail you should
probably leave it as is if you're
building a client-side app which you
probably are and generate access token
is where you can get your own token to
work with this is something i've already
done and that will use in our app
although i should note that the token
i'm using will be expired by the time
you're viewing this so you may want to
go ahead and do this and plug that into
scrimba or your own code base wherever
in order to actually play with some
files but this is basically going to
skip the authorization setup and just
give you a quick way to authorize
dropbox to check out the folders and
files
next we have options for what are called
choosers and savers and they look like
this basically just little buttons that
dropbox has already created for you so
that if you need to do something simple
like get some files or maybe you just
need to save a file to their account
then instead of building an entire app
you may just want to use a chooser or a
saver and if you do decide to use one of
those this is where you would put your
web address so the dropbox knows that
host is okay to use a chooser or saver
next we have web hooks basically it's
the idea that once i do something here i
want to trigger an action there once i
do something with dropbox i want to
trigger an action with gmail or
something similar lastly if you are done
with this app maybe you don't need it
anymore you can go ahead and delete it
here just be warned this is an
irreversible action so be careful the
next page we have is the branding page
these options are rather obvious
lastly we have the analytics tab this
naturally shows nothing because we
haven't done anything yet but after a
while you should see some stuff here
real quick before we go on to coding our
app i want to mention the javascript sdk
documentation you can click on this link
to go there it looks something like this
basically it's a list of all the
different methods that are available in
this app we're only going to use a few
different methods so it's really not
going to give you a good idea of
everything dropbox can do so go to the
documentation check out all the
different methods you can use even if
you're not going to use the javascript
sdk in your app maybe you're coding in
python or something else this will be
helpful because all these methods are
the same or very similar to what you
might use in another language
once again you can head over to
dropbox.com developers when you're ready
to set up account until then let's go
ahead and start the tutorial
let's begin by importing the dropbox sdk
one thing you need to make sure of is to
surround dropbox with curly braces
because this is a named import or export
and once we do that we can go ahead and
use it to create a class or rather
instantiate a class and assign it to a
variable we'll call that dbx for dropbox
and here we're just going to say new and
then dropbox with parentheses and we're
going to pass in an object to this
function which is creating a class for
us that once again we're assigning to
dbx now that object is going to take two
properties one is going to be an access
token
and the other is going to be a fetch
library now there are different
libraries you can use in which case
you'd put whatever fetch library here
but if you just want to use the native
window fetch library then you can just
put fetch and that uses the es6 feature
of simply assuming that the property and
the variable are the same
which they are
for the access token you'll want to go
ahead and use your own because by the
time you view this the access token i'm
going to put right here is not going to
be valid any longer so go ahead and go
to dropbox.com developers i'll go ahead
and paste that link up here
and set up your account to get your own
token and once you do that you can
replace the token here in whatever
lesson you want to play around with if
you don't really want to play around
with the code of course you don't have
to do this everything will still work
it's not absolutely necessary but part
of the beauty of scrimba and having
lessons on here is that you can play
around with the code and you're not
going to be able to do that unless you
change out this access tokens so i do
encourage doing that but either way
we've imported our dropbox sdk and we're
now ready to use this dbx variable
so far all we've done is instantiate our
class in order to see what methods are
available on that class you can go to
the documentation here
we're just going to go ahead and use as
our first method
something called files list folder which
will essentially take the folder and
list out the files inside that folder so
this takes a lot of different options on
the object that we pass in but we're
just going to use for now the path
now to specify the root path we actually
pass an empty string not a slash
and i should note the root path here is
going to be the root of our app folder
not the user's dropbox account and this
is because when i set up my developer
app i chose that option you can set it
to the user's dropbox account but i set
mine to the app folder so the root will
actually be the root of the app folder
not the dropbox account okay now what's
that going to do for us that's going to
return a promise
and all i want to do for now is go ahead
and
see what we're getting back let's hit
save
okay
it worked
we got back it looks like an object with
an entries property and that value of
that entries property is an array of
different objects and each object seems
to represent either a folder or a file
so you'll see here this first one we
have is a folder named other stuff
we have another folder here named 2018
another folder here in name 2019
looks like we've got a bunch of files in
there and you can see that we have a lot
of data on each of these files
so in the next lesson we'll go ahead and
render these to the browser so that
we're looking at it in a pretty way
that's nice to see instead of in the
console but before we move on i need to
know real quick before you go off and
use this new files list folder method
you've learned
you need to know this might not be all
the files in the account or whatever the
path is that we're trying to get them
from there might be more files and there
is a way and we're going to learn later
on how to use this to get more files
it's called files list folder continue
there's a different method that dropbox
provides to us so i just need to make
that note real quick we'll learn how to
get more files later on for now we're
just learning how to get that first
response however many files dropbox is
willing to give us and in the next
lesson once again we'll learn how to
render those files to the browser
as it is now our application only logs
the result that we're getting back from
dropbox
that's fun and all but let's see if we
can render things to the browser
i know this tutorial is more about
dropbox but i thought it might be useful
to see how we're making things happen in
the dom
first of all we need to declare an
element to interact with
here i'm declaring a variable called
file list lm for element and using
document.queryselector to select an
element with the class of js file list i
like to put js at the beginning of my
class names just to know that i'm
dealing with javascript so i don't
accidentally mess with them when i'm
just dealing with html or css
i'm going to go ahead and do a little
refactoring here to set up our app
what i've just done is declare a state
variable that will hold our state right
now it's just one files
property which is an empty array
i've moved our call to the files list
folder endpoint into an init function
which we can call at the end after
declaring our other functions
i've declared an update files function
which will take some files
and update the state accordingly so that
we keep all our old files that were in
state as well as update it with the new
ones
and inside that we're also calling our
render files function which will fill in
now
inside render files we'll first need to
get our element so that we can place
some html in there
now there are two things i want to do
with the files here
first i want to sort them
then i want to map over them
and for every one of them create an li
element so that we can see the list
let's sort alphabetically and let's go
ahead and put the folders on top
okay real quick i'll go over what we're
doing here
on this line we're comparing the dot tag
property of each item
if you recall what we logged to the
console
every item in the array is going to have
a dot tag property that is either a
folder or file
what we're basically saying here is are
either one of these items a folder if so
we're going to need to prioritize the
folder
next we're checking are they the same if
they're both folders or if they're both
files we don't need to do anything with
them except for organize them
alphabetically which we do here
but if one of them is folder and one of
them is a file we're going to check
which one is a folder if it's the first
one we return negative one to say that
it should come first and if it's the
second one we return positive one to say
that should come second
in this way we're sorting all our
folders on top and we're sorting
everything alphabetically
next we turn to our dot map method which
is going to loop through every item in
the array and return an array
the map method of an array accepts a
function the first argument is each item
in that array in our case a file or
folder in fact let's go ahead and check
what type this is
we'll say const type equals file and
then if you'll recall the dot tag
property is what stores whether it's a
file or a folder then we just want to
return our actual html i'm going to go
ahead and use backticks to create a
template literal
inside this template literal whatever i
put will be what's returned it will take
it literally hence the name
so let's return an li element
and what we want to see ultimately in
the browser is the name of the file if
we were to look at our console again and
see what is being returned from dropbox
we'll see that there's a dot name
property on every file
so we'll put that in there
i also want to go ahead and do some
styling real quick i've already declared
a class of dbx list item for each
individual item in the list
and then i also want to put the type
that we just declared above so we know
if it's a file or a folder
okay now before that's actually going to
do anything we do need to replace our
console.log up here so that instead of
logging it we're actually calling all
this logic
and to do that we will call update files
with the files that we get back from
dropbox once again if you were to look
at that console that we logged earlier
in the last lesson you'll see that
there's a dot entries property on that
object which holds the array of files so
now we have our init function calling
our update files function which calls
our render files function which will
ultimately render something to the dom
however if we were to call this right
now we would see a bunch of commas in
between every li element let me go ahead
and hit save to show you what i mean
as you can see we've successfully logged
the items of the array however we are
seeing commas in between every item and
that's simply because we're not
returning a string here to our dot inner
html we're returning an array
we don't really want to do that we want
to return a string so let's take this
array let's call the dot join method
which will join every element in the
array into one string and inside we can
pass what kind of separator we want to
use in our case we don't want a
separator we just want one long string
so we'll pass an empty string
hit save again
and now voila we can see all of our
items we can see that our folder is up
on top other stuff and we can see that
they are ordered alphabetically now
that's not really easy to tell this is a
folder so in the next lesson we'll go
ahead and add some thumbnails
right now our app is working and we're
displaying our files but it doesn't look
great yet what we'd like to do in this
lesson is go ahead and add some
thumbnails now this lesson is going to
concentrate on simply rendering those
thumbnails and the next lesson we'll see
how we can get the actual thumbnails for
each file from dropbox
what we want to do here ultimately is in
our render function
while we're mapping over each file is
check if that file has a thumbnail
property
and if so use it and if not go ahead and
use a default now the first thing to
keep in mind here is that folders do not
have thumbnails so essentially our first
check is going to say are we dealing
with file
and if we are dealing with a file then
we can go ahead and use the thumbnail if
not we'll just use a default folder
thumbnail
let's start by declaring a thumbnail
variable
first we have our check to see if it's a
file if it is we want to go ahead and
use the thumbnail property on the file
in other words the actual thumbnail
and if not we want to go ahead and use a
default thumbnail we're going to go
ahead and check this with a ternary
expression in case you're not familiar
with ternary expressions they
essentially take the form of
if something
and if that's true
do
something and if it's not do something
else
okay so let's go ahead and write that
out
what are we going to test well first of
all we need to assign something to our
thumbnail variable
and here's where our ternary expression
starts
we're going to go ahead and check if
there is a thumbnail property on our
file
if there is then
we're going to go and use that thumbnail
and if not we'll use a default
okay now the thumbnail being returned by
dropbox is going to be a base64 image
essentially that's just one big long
string that's a representation of an
image instead of an actual file it's a
string that represents an image how do
we use that in html
well it looks something like this
the important part i suppose here is in
the beginning
we're going to start with data colon
image and then our type of image
and then base64 comma and then our
base64 string
this big long string is just a default
file thumbnail in case we don't have a
thumbnail available on our file
but if we do we want to go ahead and use
that thumbnail
okay so you'll see we're essentially
starting with the same thing except this
file is going to be a jpeg that is the
default of the file format from dropbox
then we're using a template literal with
an inserted variable to insert our
base64 string so this is going to be
whatever base64 string dropbox provides
just to review one more time we're
assigning our thumbnail variable to
either
the actual thumbnail if it exists or a
default thumbnail if it does not
for our folders once again folders don't
have thumbnails so we can simply use the
default
okay once again that's just a big long
string it's a folder thumbnail as we'll
see in just a moment
the last thing we need to do is actually
insert the thumbnail in our html so
we're going to go ahead and use an image
tag here i'm going to put a class on the
image because i've already set this up
in my css just to make it look nice and
then of course we need to declare our
source for our image tag it is going to
be
thumbnail which is the variable we have
declared and assigned based on whether
or not there is one and whether or not
it's a file or a folder okay let's save
and see what happens there we go we've
got our thumbnails as you can see we
have a folder here
and the rest of them are files now
obviously these are default thumbnails
and in the next lesson we'll learn how
we can get the actual thumbnails from
dropbox
in the last lesson we learned how to
render thumbnails with our files
in this lesson we'll go ahead and learn
how to get the actual thumbnails from
dropbox
if you look at the documentation which
i've linked to the top here you'll find
there is a method available to us called
files get
thumbnail batch
and that function takes an argument
which is an object that has an entries
property which is an array of objects
each object having a path
and an optional size
this is the basic format for the request
we'll be making
okay so we're getting an array of files
and we want to turn that into an array
of paths
so let's go ahead and do that now
we'll say const paths equals what do we
need to do to our array first well first
let's filter out all the folders because
folders don't have thumbnails
here we're using the filter method on an
array
and that takes a function the first
argument of which is the item in the
array we're working on
and it simply returns true or false if
it returns true we keep that item if it
returns false we get rid of it in this
case we're checking to see if the dot
tag property is equal to file because if
it is it's file and we want to keep it
if it's not we don't want to keep it
now that we've filtered our array so
that we only have files and no folders
we can go ahead and map over every item
and what we'll ultimately want to return
for every item is this object down here
so we need to return that item
but
how do we do that instead of just typing
curly braces we can actually surround
those curly braces in parentheses to
return a literal object
all right so what is our path well
that's actually available on the file
itself as path lower
if you'll recall we originally started
this app by making a call to files list
folder which gave us a list of folders
and files each of which had lots of
information and one of those pieces of
information is path lower
for the size you'll have to go ahead and
look at the documentation to see what
sizes are available but for our uses we
want to go ahead and use 32 by 32
okay so instead of this array here we
will pass the paths away we just created
and that will return a promise so let's
go ahead and see what we get back simply
by logging into the console
before we can do that however there are
a couple things we need to do
first off if we look at our
documentation we'll find that this
thumbnail batch call
actually has a limit on it so we can't
get more than 25 at a time it turns out
this files this folder call also has an
option for a limit so this would be a
good place to remedy that let's go ahead
and put a limit of 20 for our demo
purposes
and then of course we need to call our
new function somewhere let's go ahead
and call it in the update files function
and make sure to pass in the files array
okay so when we initialize our app we
are making a call to files this folder
to get the files and folders then we're
calling update files
and then we're calling get thumbnails
let's go ahead and save to see what
happens
alright looks like we got a success if
we look at the console you'll see
there's a lot of information there but
essentially we're just getting an object
with an entries property
and an array of files and folders well
in this case actually just an array of
files
all right so now that we have our
response back from dropbox we are ready
to start working with it and assign our
thumbnails to our files essentially what
we want to do is just create a thumbnail
property on each file object that holds
the thumbnail data
now this next part gets a little bit
complicated so i'm just going to go
ahead and paste it out and then we can
walk through it step by step
first of all we're going to make a copy
of our current state.files array we do
that very easily with the es6 spread
operator that's those three dots here at
the beginning
that's essentially telling javascript to
spread the items of the array into this
a new this new array
so we do that and we call our new
variable new state files
next we want to loop through the
res.entries
array that we got back from dropbox
that res.entries array is just going to
be an array of objects each object has a
lot of information on it but one of the
properties on the object is thumbnail
and that's the one we're interested in
we want to get the thumbnail of that
object so we're going to loop through
each item in the array
and in order to know which item we need
to update the thumbnail of we first need
to figure out where it is in the array
so we're declaring here a variable
called indexed update that's going to
figure out okay what item
in our new state files array
remember that's just a copy of our
current state
which item do we need to put a thumbnail
on
and the way we figure that out is using
a method called find index this is a
method available on the array prototype
so any array you work with it's going to
have this find index method
and it's similar to the dot filter
method that we used earlier in that it's
ultimately going to return either true
or false
and what we're testing here is just to
see if the path is the same
so if the path is the same it's the same
file right and if it's the same file
that's the one we want to update
so we pass an argument to the item we're
going to be working on and we just test
to see if the path is the same and if it
is
that's the index that we want to use
so we plug that index in here and we say
in our new files array
find this index
and add the dot thumbnail property to it
and make it equal to whatever the
thumbnail was that dropbox returned for
that file and once we do all that for
every single item in the array we can
finally assign
state.files to our new array of files
and the only difference here is this
array has thumbnails that's the only
difference between these two arrays
so we've added our thumbnails to our
items in our array and finally we render
them to the screen
let's hit save and see what happens
all right
looks like everything is working we've
got our actual thumbnails next to each
item
everything seems to be working fine
you'll notice that at the top here we
have a folder and that does not have a
thumbnail which is normal but every
other file does so everything was
successful and we're ready to move on
so far we've introduced two api calls
into our app
the first was files list folder
and the second
files get thumbnail batch
both of these have returned promises
using dot then
which make working with asynchronous
data a little easier
however we're going to need to make some
more calls in the future and we'd like
to move away from promises into a
feature in es7 called async await
the way async await works is simply we
declare async before our function so
instead of just writing out the function
put the async keyword right before it
now inside of that function we can use
the await keyword let's go ahead and
call our variable res just like before
this time we'll put a weight before our
function call
so cons res equals await whatever our
asynchronous call is
as long as that returns a promise this
should work
and we can get rid of our dot then call
and instead act like this is just a
regular variable
essentially if you picture this
function being a synchronous function
we're working with
asynchronous data the same way
it's as if we were saying constrains
equals one plus two and then using it
just like we normally would only this
function is asynchronous and by using
async await
we are telling javascript to wait until
this function is complete before moving
on to the update files call and then
using this variable
let's go ahead and do the same thing
with our get thumbnails function
again we'll declare the async keyword
before the function
and we will simplify here by assigning
our data to a res variable once again we
can get rid of the dot then call
and we can go ahead and use all the
stuff we've done earlier in pretty much
the same format only now it's a lot
cleaner it just looks like we're dealing
with synchronous data we're assigning a
variable
res to whatever data we get back here
and as long as we include the await
keyword before our asynchronous call we
should be good
let's go ahead and save and see if this
still works
looks like everything still works
so that's how you use async await to
simplify your code and make working with
asynchronous data a little bit more
manageable we'll go ahead and continue
to use async await in future lessons
we just learned how to render thumbnails
after getting them from dropbox in order
to get those thumbnails we had to limit
our first call to get files to only 25
at the very most and we chose 20.
however there are more than 20 files in
our folder in this folder that we're
using for our demo there are actually 37
files
so what do we do if we want our
thumbnails but we still want to get all
the files
well dropbox has a way to do this
for the sake of demo purposes let's go
ahead and change this limit to five
as you can see here we're only getting
five files one of them is a folder
to show how we can resolve this i'm
going to take a look at an online tool
that dropbox provides
and i've linked it right here they call
it the api explorer
if you go ahead and open up that link
you might see something like this
there are a bunch of methods listed on
the left hand side that you don't see in
the slide here but one of those methods
is list folder and you may recognize
that name because we're using the
javascript sdk equivalent right here
files list folder
now online if you look at the tool
you'll be able to see the different
options that are available and you can
enter a path and you can enter a limit
for example and then you can go ahead
and submit that call to see what happens
if you do that you might see a response
that looks something like this
this should look somewhat familiar to us
we have our entries property which is an
array of files
however there are two things we haven't
looked at yet and that's these last two
properties the cursor and has more
the cursor is essentially a very long
string that keeps track of where we are
in the process or in the folder it's
sort of like a you were here last time
you made this call pointer
and the has more property tells us are
there more files to get in this case it
looks like there are
so we can use the has more property to
tell if we have more files to get and we
can use the cursor to actually get those
files
and we would do that with another method
that's similar to the one we already
used if we look at the api explorer it
would be under list folder slash
continue
now the javascript sdk name will be a
little bit different but we'll go ahead
and look at this for now
if you look at the online tool you'll be
able to enter the cursor right here in a
box and submit a call that will show you
another object similar to what we've
already seen we have an entries property
which is an array of files
and you can do this over and over again
until finally at the very end once there
are no more files you'll see has more
equal to false
in other words for every response we get
from dropbox we want to check the has
more property and if it's true use the
cursor to get some more files and then
repeat that process until eventually has
more will be false
and that's what we'll learn how to do in
our next lesson
our app is going to start by calling
this init function
inside of that function we are getting
some files and folders from dropbox
we're limiting them to only 20 for the
sake of getting thumbnails
and then we are rendering them
after we make this call though we want
to check if there are more files
so let's check that has more property
that we discussed in the last lesson and
if it's true we will call a function
called get more files which we haven't
set up yet but let's just type it out
for now and into that function we'll
need to pass the cursor so it can use
that to get more files and in this case
since we'd like something to happen with
those files right away we'll also pass a
callback so this is going to be a
callback function here that's going to
receive more files from our get more
files function
and what do we want to do with those
files well we want to do the same thing
we did with our first set of files we
want to call update files
and remember that the entries property
is where those files are stored
once again we're going to call a get
more files function that we still need
to create we're going to pass in the
cursor
and we're also going to pass in a
callback function so that when more
files are retrieved those files can be
passed into this function and we can
update
files
okay now when we're doing this i'd like
to show a loading message to the user so
they know something's happening
let's go ahead and store that in a
variable here
now that we have that variable
we can simply hide or show
that element whenever we're loading or
not loading
okay so we're showing our loading
message we're running our get more files
function we're hiding our loading
message and in case we don't actually
have any more files we'll skip that
block altogether and we'll just make
sure our loading message is hidden
now this get more files function is
obviously going to be asynchronous so we
need to make sure to put a weight here
and that keyword will work because this
init function is asynchronous if we
didn't have this async keyword here that
await keyword and this away keyword
would not work but they do
so after our get more files function is
complete then we can continue with our
code
now we get to create our get more files
function
okay the first thing we need to do is
figure out what dropbox method there is
for us to call
if we look at the documentation we'll
find that there is a method very similar
to files lists folder called
files list folder
continue and that method is going to
take an object with a cursor property
which is going to be the cursor
using objective structuring we can
actually shorten this to just a cursor
because it is assumed when we write it
like this that the property name and the
variable that is the value will be the
same which they are we're getting our
cursor value here and so this is just a
shorthand way of saying cursor is equal
to cursor
after we do that and keep in mind that's
asynchronous so we'll need to make sure
this is an asynchronous function
and we'll check if there was a callback
provided to this function and if so call
it with our response
now as it is right now we are only
checking for more files one time but
obviously we need to do that until there
are no more files to get so once again
we'll check that has more property
and if there are more files to get we'll
just use recursion to call this same
file again this time we'll pass in the
cursor we got from our second call and
we'll pass in the same callback function
okay so get more files will run it will
check if there are more files using the
cursor
it will make a callback
and if there are more files still even
after that call that we just made
then it will call this same function yet
again and it will keep doing that until
has more is false in which case it will
skip this call right here
one more thing we need to remember is
this awaits keyword it's easy to forget
but do recall this get more files
function is asynchronous so our files
this folder continue functions
asynchronous and our get more files
function is asynchronous so they both
need this await keyword okay
let's save and see what happens
you may have noticed that the first
response was updated shortly after with
some new files and if you scroll down
you'll see we have a lot more than 20
right now
looks like it's working
so we're making our initial call to get
some files
we're updating our browser then we're
checking if there are more files if so
we'll show a loading message and will
wait for our get more files function
which will get more files
call the callback
and once again check if there are still
more files and if so repeat this loop
until eventually there are no more files
at which point this code will continue
because of our await keyword
and hide the loading message
we've done some pretty cool things in
our app already however one thing that
would be nice is if we weren't
restricted to just the root path all the
time
let's go ahead and build that out now
if we look at our app currently you'll
see i've made some changes with the css
and html
but the important thing for this lesson
is this folder path input up here
ideally we'd like to let the user enter
some sort of path in here and go to it
in our app right now we only have one
folder other stuff
so it'd be nice if the user could say
hey i want to go to other stuff
and hit enter or hit the button and go
to the path
right now it's not working it's just
refreshing the page so let's go ahead
and build out that logic
first off we'll need to declare a couple
new variables to reference some html
elements and get the data from that form
so we've declared one element for the
form and one element for the input why
do we need both
well for the form we want to use that to
listen to the submit event that's how
we'll know when the user has actually
changed
anything about the path
so we'll add an event listener and
listen for that submit event which will
give us an event i've labeled that as e
here
and the first thing we need to do is
prevent the default behavior of forms
because that will refresh the page and
we don't want that
next we need to get the value for the
inputs remember that is at
root path input
declared up here
and we can get the values simply by
saying value
however in dropbox the root path is
expressed with an empty string and not a
slash which a lot of people are used to
so i do real quick want to do a check
and see if they entered it equal to a
slash if so let's go ahead and use an
empty string if not we can go ahead and
use that value
also people sometimes make mistakes with
capitalization and such so let's turn
this into a lowercase string that way
we're always dealing with lowercase
now we're not actually doing anything
with this variable yet so let's think
about what we might need to do
it would be nice if this root path was
available throughout our app we may need
to use it elsewhere so let's actually go
ahead and put that on state it might
change over time so that seems like a
good place to put it
okay so now we are assigning the root
path property of the state object to
whatever the root path is that the user
enters when they submit the form
what else do we need to do
well we don't want to show the folders
and files from the old path so let's go
ahead and clear those out
also there is one quick thing i want to
do with the html
all i'm doing here is referencing that
loading element that you see sometimes
when the app first starts and i'm
removing the hidden class to show the
user that it is loading
and well if we think about it we're
basically starting over in our app when
we first pull up the app it's loading
files and then what's done loading that
loading message is hidden and we can
start using it we want to do the same
thing here every time a user changes the
path so let's just go ahead and call our
init function right now
that will basically start our app over
it will get this files this folder
called
and it will search for whatever the path
is except we don't want an empty string
here we want whatever our root path is
that the user entered
okay
so anytime the user submits that root
path field
it will get the value it will store it
on our state
it will show a hidden message and it
will reinitialize our app
oh i just realized i forgot to put
parentheses after our two lowercase
method sorry about that
now let's go ahead and save and see what
happens
okay we only have one folder here other
stuff
so i guess that's the folder we're going
to be testing here we go
and it works
i can look in my dropbox account and
confirm this is indeed the contents of
the other stuff folder so everything is
working as it should in the next lesson
we'll learn how to make this organize
button work to magically move our files
into their respective folders
at last we reach the main function of
our app the ability to organize our
files into folders based on the date
modified let's get started
first we'll need to get a reference to
the button element we'll go ahead and
call it organize button
then we need to listen for a click on
that button
since organizing our files will be
asynchronous let's show some sort of
message to our user to indicate that
something's happening
first we'll disable the button
and then after we disable the button
let's show a message
then we'll go ahead and carry out our
organize operation
that is asynchronous so we'll need to
make sure this is an asynchronous
function and we'll need to wait for that
to complete
once it completes we can re-enable our
button
and in order to restore the previous
text we'll need to grab that first
now that we have a variable to reference
the text before it was clicked we can
restore that
okay now we're ready to create our move
file sedated folders function
first off let's establish which dropbox
method we need to use in order to move
files around
for this function we will use files move
batch v2 they have a version 2 of this
function that's what we'll use here
that takes an object as an argument with
a you guessed it entries property and
that entries property is an array of
objects each object having a from path
and a two path so where are we moving it
from and where are we moving it to
now of course we won't hard code this
array we will generate it so let's call
that array entries so that we can
simplify it using object destructuring
and let's create that entries array up
here
that will be based on our state dot
files array so we're taking whatever
files are in our state currently and
we're going to perform two operations on
them first of all we're going to filter
out the folders just like we did with
our get thumbnails method
then we're going to map over every file
and what we ultimately want to return is
an object with a from path and a to path
now the front path is going to be pretty
simple that's just file.path lower
that's available on the metadata we got
from our very first dropbox call
the to path is what we'll need to build
based on the date
now the file does have a property on it
called client modified
and that will tell us the date that it's
last modified so that's already taken
care of for us just so you know there
also is a server modified property but
for this case we will use client
modified
and it's put in such a format that we
can actually use it with the javascript
date constructor so we will do that in
order to have this date variable
something that we'll be able to work
with in order to get the year and the
month and whatever other information we
need from this date
okay so essentially what we're going to
use to build our path is a template
literal
with four different variables we have
our root then our year then our month
and then the file name
so for the root that's found on our
state object so state dot root path
our year is going to come from that date
variable we just created and you can get
that by typing in here get
full year
our month is going to be a little bit
weirder than a year it's going to be get
utc months and also
the month number is one behind what you
might think it would be so january is
actually zero so we add one to whatever
the month says it is in order to make it
more reasonable
and then finally we have a file name all
right that's all for this lesson in the
next lesson we're going to finish
building our move files function and
we're actually going to see our app do
its magic
in the previous lesson we set up this
entries array and we passed it into the
property of entries on our object which
we passed into files move batch v2 from
dropbox which is going to move our files
around
now we need to handle whatever dropbox
does
so what is it going to do and what's it
going to return to us well it could
return one of two things it may be an
object saying that the job is done which
will say success or it may be an object
with an asynchronous job id
now if we get back an asynchronous job
id then we know that it's still working
so here i'm just pulling out that
property from our response object
and if that property exists
whatever is inside of this if block will
run
and so what do we need to do in here
well we need to check on that job
now how do we do that dropbox actually
provides a similar method to us
and that method is called files move
batch check v2 and in that method we
pass in an object with our asynchronous
job id okay so we'll want to make sure
that we're waiting for this to complete
and you'll notice i use the let keyword
there because we're going to reassign
that res variable and we're going to do
that right here because we want to
reassign it to a new value when we check
on the current status but we don't want
to do that one time we actually need to
keep doing that until we get a response
saying that that job is done so how do
we do that well we're going to need to
set up a loop
here we've set up a do while loop with a
do while loop the logic inside the
brackets will run at least one time
regardless of our logic here inside of
the parentheses that's what we want we
need to make sure if we're getting an
asynchronous job id back from our
response that we're checking we're
following up on that at least one time
then it will keep doing that as long as
this logic inside our wow parentheses is
true
and here we're simply checking the dot
tag property of our response to see if
it's still in progress as long as that
tag property is in progress our job is
still working so we need to keep
checking so we will loop over this
continually until eventually that dot
tag property is something else maybe
success maybe failure either way we know
the job is finally done now that's it
for our move files function
but once that's all done we want to
change the ui a bit so let's go back up
to our button
here we are waiting for our function to
be done and after it's done we are
re-enabling our button and we are
showing the original message of our
button
but we also need to re-initialize our
state just like we did
with our root path form so when someone
changes the path we need to clear out
the current state of files show the new
files the new path and we need to show
that loading message while we're doing
that and then we need to re-initialize
our whole app so we want to do the exact
same logic and because of that i'm going
to refactor here a little bit
okay all i've done here is move that
logic into its own function called reset
and we're calling that same function
with our root path form and our organize
button
okay so that's pretty much everything we
need to do
let's save and see what happens
all right the moment of truth here we go
now as you can see we're getting
responses back from dropbox this is our
loop running it is logging out whatever
response we get and you'll see that tag
property is still in progress so that
loop needs to keep running and our
button is disabled and it says working
so we are waiting for this job to
complete
and there we go you can see we have a
tag property with complete
and if you look at our file structure
well there are no files
we just have folders now we have a 2018
folder and a 2019 folder we still have
our other stuff folder so that hasn't
moved which is good let's go ahead and
check out the contents of these new
folders 2018 okay that has a 12 folder
so that's december let's go into that
and see what we have
and there we go here are our files
looks like all the files moved
successfully into our folder and we've
set it up so that there's also a 2019
folder with
january
so looks like our files were spanning
across two different months and they've
all been moved successfully our app
officially works
awesome
now there is one thing i want to mention
real quick and that is error handling
it's not something we've really done in
any of our methods thus far but it's
definitely advised in the real world
and with async await it's actually not
too hard you simply surround your code
with a try catch block so we're going to
try whatever is in these brackets and if
it is successful then great it just
carries on and does its thing otherwise
if there's any kind of error it can go
ahead and pass that error into a catch
block and we can do whatever we want
here we could log into the console or we
could show something to the user the
ladder would be preferable because we
want the user to know something went
wrong and that's the whole purpose of
error handling so that we can actually
do something with these errors and it
can be a better user experience so when
you build your own app it's definitely
advisable to do some kind of error
handling and once again you can wrap
stuff in a try catch block to at least
form the basic foundation of error
handling so that's just a quick preview
into how you might handle some errors
just in case something goes wrong with
dropbox or there's a network failure or
whatever it may be and with that we're
just going to leave our app as is it's
basically complete of course you can add
more features you're definitely
encouraged to do so but for the sake of
our demo what you see is officially our
app
congratulations you've made it to the
end of the dropbox api course thanks so
much for taking the time to look at this
i hope it was inspiring just to recap
what we've learned so far we learned how
to get files and display those in the
browser we learned how to get thumbnails
for those files and display those as
well and we learned how to move files
around in the actual dropbox account as
for the javascript side of things we
learned some array methods such as
sorting and filtering we saw some es6
features being used like arrow functions
and we learned async await which is a
great way to deal with asynchronous data
in general especially when you're
working with apis like this one
once again my name is christian it was a
lot of fun putting this course together
i hope that you will head over to
dropbox.com developers and set up your
own app and then go and look at the
documentation to find some more methods
that you can use and some more cool
things that you can do with dropbox
that's the end of our dropbox course i
just want to challenge you one more time
go ahead build something cool and share
with the world