Stepwise Implementation of OCI File Manager — tips on Vue, Vuetify, Web APIs, QR Code, Zipfile

This article is primarily the detailed overview of how the OCI File Manager (introduced in this earlier article) was implemented. If your are interested in that tool, this article is really worthwhile. If you are not, it may still be of use, because it contains some useful examples of web technology — things I had to do some research for:

• adding Vuetify to existing Vue 3 application
• using and customizing the PrimeVue Tree component
• uploading and processing a zip file
• downloading multiple images and other files as a single zip file
• generating and displaying QR Codes
• initializing a Vue application from Query Parameters
• basic interaction with localstorage
• deploying a Vue 3 application on GitHub Pages

The code discussed in this article is on GitHub, my repository. The OCI File Manager application can be accessed using this link on GitHub pages.

The OCI File Manager is a simple static web application that provides a user interface to easily navigate the contents of your buckets on OCI Object Storage. In addition to browsing these buckets, you can download the files from the buckets (one by one or bundled in zip files) and upload files to these buckets. The OCI File Manager leverages a Pre Authenticated Request (aka PAR) that you…