Local vs Online - loading files to web pages

Loading files to Web

LOCAL vs ONLINE

Contents

About this page
Image
Audio
Video
Important Message

About this page

Most of the newbies here on SoloLearn at some point got stuck on uploading a local file(from their phone or pc). This page is to show two different methods(local and online) of uploading a file to your web(page) side by side so that one can easily understand the pros and cons of both practices.

You can load a file from your phone(Android - internal storage) by providing the file path like this:

file:///sdcard/yourFolder/yourFile.fileType

For example, to load a image with name "myImg.png" which is located in a folder named "Images" in your internal storage, file path would be:

file:///sdcard/Images/myImg.png

You can get the file path for a file by(for Android devices):

Go to Google Chrome browser
Type file:///sdcard in the search bar. It will show the contents of your internal storage

Now navigate to the file you want to upload

Now you can copy the file path from the search bar

In each of the sections down below, I loaded two files: one from local(from my phone) and one from online(from my GitHub repository). The HTML element(of the file) is shown below the file(Code).

You can see that local files won't be accessible to other devices but online files can be accessed by anyone. That's why everebody here insist on using a online resource or hosting your files from hosts like Dropbox.

Please read the Important Message section down at the bottom

Images

Audio file

Browsers support for different video and audio filetypes is different. So, you can include multiple sources of different file types inside video and audio elements:

Video

All the browsers out there don't support video and audio elements. So, some alternate description can be added in between the opening and closing tags of video and audio elements which will be displayed in those unsuppprted browsers:

Important Message

Even though local file loading seems good and reasonable, please use it only upto the point of prototyping(or experimenting) say you want to see how a image/video fits into a layout. But at a finishing stage, please use files from online resources.

Here are some suggestions/tutorials from the community.

Upload content with Dropbox to CodePlayground - by Mickel
How to Host/upload an image | For Begginers - by Farhanaz 🌟
AUDIO/VIDEO UPLOAD TUTORIAL(Html) - by Gude

In this page though, I used GitHub to host my files. You can host your own website from GitHub using GitHub Pages. Learn more about it here.

Please suggest on how to do the same i.e. loading local files on a Mac, iPhone in the comments.

Local vs Online - loading a file