Upload content with Dropbox

Upload content from your device to CodePlayground

The Dropbox way

Continue

Introduction

It's normal to find in the Q&A section some questions like "How can I upload a file from my device?". And in the last days I've seen it with some regularity, so I decided to do a tutorial about how to use Dropbox to upload our content and then use it in CodePlayground.

Why Dropbox?

Dropbox is easy to use and has great popularity. That is the main reason why I chose it for this tutorial. It has applications for all platforms and that is another advantage to highlight. Also, it allows us to upload all kinds of content: audio, images, videos, text files.

Getting started

NOTE Before starting it is good to discard that I will not cover topics on the creation of accounts and on how to upload files.

The mechanics to use files that we have hosted in Dropbox in our projects is very simple. First we need to upload our file to the cloud, it is important to remember that it must meet the terms of use of Dropbox. Once this step is completed, we must share our file, so we must click on the "Share" button and then "Create a link". Once this is done we can copy our link.

 
              <!-- Original URL --> 
              https://www.dropbox.com/s/q1mdrm8hno97cr3/svg-icons.css?dl=0

If we use directly the link that we copy we will have problems to access our file. This is because the url redirects to the download page of the file and not to the file. To make our url redirect us directly to the file we have two options:

The first is to change the www. by dl., in such a way that our url is of the following way:

https://dl.dropbox.com/s/q1mdrm8hno97cr3/svg-icons.css
The second way is to modify the query string of our file, for that we only have to change ?dl=0 to ?raw=1 in our url.
https://www.dropbox.com/s/q1mdrm8hno97cr3/svg-icons.css?raw=1

Now we can use our file without problems. 😎

 
              <link rel="stylesheet" href="https://www.dropbox.com/s/q1mdrm8hno97cr3/svg-icons.css?raw=1">

 
                <link rel="stylesheet" href="https://dl.dropbox.com/s/q1mdrm8hno97cr3/svg-icons.css">

image instructions