Building an App with Dropbox API

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.

"WEBVTTKind: captionsLanguage: enhello 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 worldhello 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 worldhello 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\n"