Storing Images

Some applications require uploads of videos, images, pdfs,​ or other types of files from users. The example application we build is centered around images but could have been any type of file, a video-sharing​ site for instance. Ready to get started?

Full Source Code #

This lesson contains the full source code of the application. Please refer to the tabs in the widget below to look at the code and comments.

Here are the main features of the application:

Upload File Syntax #

This uploads an image, and when the image is uploaded, it provides you with a download URL, which can be used directly inside an image element as the src attributes value.

Preview of Upload #

A great way to make sure everything worked correctly is to inject the uploaded image into a div. You will see in the code below a div with the id preview-of-upload. In the JavaScript on line 69, we inject the uploaded image into that div. In the next lesson, we will remove this because it covers a real-time listener that shows all uploaded images by looping through them. This is just a nice in between to make sure all is well and have some visual results.

Optional Progress Bar #

The application includes a progress bar to enhance the UI/UX. It’s only a few lines of HTML, CSS, and JavaScript.