Discover what can be done with the FIle Drop widget
Share this page...
UPDATED - 15/12/17
The File Drop was designed for teachers to be able to collect work from students quickly and easily. Many schools are also using it as a way to display lists of files without too much effort, but the File Drop and more specifically its API offer so much more capability.
You can use it to create a slideshow, video gallery and pretty much anything else.
By the end of this tutorial, you should be able to:
Use the HTML widget to access a File Drop's API
Use that API to create a Carousel gallery on a page
Use that API to create a video gallery
Use the API to display SIMS cover webpages
And with that, let's get started...
File Drop API
This tutorial isn't going to go in-depth about working with APIs. That's for a future tutorial. Instead, to keep this one simple and not take too much time, I'm going to supply you with the code and instructions on how to implement it.
Drag a File Drop onto a page and add some files to it. Make sure the view settings are Group and not individual.
Set the View settings to Group. Once all set up, you're probably also going to want to add a Rule to the widget hiding it from everyone, so we only see the HTML version, but I'll leave that to you to decide.
Drag in an HTML widget and paste in the following code:
We need to determine the UUID (the unique identifier) of the FileDrop in order to run its API. To do this:
Leave edit mode
Right-click on the FileDrop and choose Inspect
In the Developer Tools, Elements section, move your mouse pointer up through the code until in the browser the entire widget is highlighted blue
The code above should produce a list of the file names for the files:
So, using this powerful API, we can also access information such as the URL of the files and their extensions, and that means we can start building some really useful resources.
Frog utlises most of Bootstrap CSS (there's a few missing bits, due to naming conflicts. This means that we can quickly and easily use Bootstrap's Carousel with our File Drop widget. In place of the individual listing for each image, we can use the File Drop API to populate the list for us.
Paste the code above into an HTML widget (setting the UUID to your File Drop's UUID) and it should do the work for you. The style tags at the top are because of Graham Quince's personal preference. The images fade from one to another rather than slide.
The class tags .carousel-arrow-left and .carousel-arrow-right (line 32 onwards) are because the graphicons for left and right arrows in Bootstrap are missing in Frog's version.
Note the IF statement on line 82. That only adds images to the carousel code. If you happen to add other file types that aren't jpg, gif or png files, they won't display. Hopefully you can see that to adapt this to add another image, it is as easy as knowing the file extension.
That's quite a complicated first example, so the next example is a bit easier. Let's use basic HTML5 to display videos to quickly make a video gallery.
The Media widget is a great, quick way to add video to a page, but what if you want to add dozens of videos. Using the File Drop widget and the HTML widget, we can quickly set out a page of videos - and add and remove them easily.
There are limitations with embedding videos in a browser. Frog currently does not stream video, so the files download first.
Set up your page with the HTML widget and File Drop widget and use this code:
SIMS Cover list
Something a lot of our schools ask for is the ability to present the cover pages generated by SIMS. Using the File Drop widget and the code below, this can be achieved as well.
SIMS generates menu pages, as you can see from this example, we haven't included those. Files uploaded to Frog have their filenames altered - to prevent users overwriting other files of the same name. As a result, any hard coded menus won't work, but using the File Drop, each individual page can be displayed at least.