Upload content with Google Drive

Upload content from your device to CodePlayground

The Google Drive 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 Google Drive to upload our content and then use it in CodePlayground.

Why Google Drive?

Google Drive 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 Google Drive in our projects is very simple. First we need to upload our file to the cloud. Once this step is completed, we have to get the link of our file, so right click on the img and click on the "Share" or "Get link" button.

After these steps change the "Restricted" option to "Anyone with the link"
Now you can copy the Link by clicking on the "Copy link" button.

 
              <!-- Original URL --> 
              https://drive.google.com/file/d/1ZYscKIr-43GwUcxumbTS7mcrYZU_6Wng/view?usp=sharing

 
              https://drive.google.com/open?id=1ZYscKIr-43GwUcxumbTS7mcrYZU_6Wng

However, these links will not work as an image host making it incompatible with Awesome Table

So, the first way is by paste that link here and it will autogenerate the new link for you:
Google Drive Direct Link Generator
Another One
The Second way is we are gonna generate the link manually, We need to get the image ID (the bold text) and generate the correct image link following a prescribed URL format like so:
https://drive.google.com/uc?id=1ZYscKIr-43GwUcxumbTS7mcrYZU_6Wng
Or
https://drive.google.com/uc?export=view&id=1ZYscKIr-43GwUcxumbTS7mcrYZU_6Wng

Now we can use our file without problems. 😎

 
              <img src="https://drive.google.com/uc?export=view&id=1ZYscKIr-43GwUcxumbTS7mcrYZU_6Wng">

 
                <img src="https://drive.google.com/uc?id=1ZYscKIr-43GwUcxumbTS7mcrYZU_6Wng">

Template created by Mickel 🌹

[Tutorial] Upload content with Google Drive