OCI Object Storage File Manager image 116

OCI Object Storage File Manager

This article introduces a static Vue 3 web application that is used to navigate the files in an OCI Object Storage Bucket. To upload files to that bucket and to download files from that bucket. It is extremely simple – only requiring a Pre Authenticated Request URL on the bucket to be explored / managed. No other configuration in OCI Object Storage is required. The application is a simple static web application that can be run in any browser and can be hosted anywhere – including in OCI Object Storage itself. Such a tool provides a very convenient way to interact wit OCI Object Storage.

Note: the tool does not currently support deleting of files. However, it can overwrite existing files..

Here are the steps – for a rudimentary application

Create a new Vue 3 application

npm create vue@latest

Then after npm install and npm run format, npm run dev to run the scaffolded web application. If you have worked with Vue before, this will look very familiar.


Now it is time to bring in the Pre Authenticated Request URL that will allow us direct access to the OCI Object Storage Bucket.

Create the Bucket

The bucket called TwoDrive created on OCI Object Storage. No thrills or special features.


Add some files to the bucket.image

And some more files with an object prefix of assets/  – interpreted as a nested folder


Create the Pre Authenticated Request (PAR) URL with read, write and list object privileges


and hang on to the URLs


Access the PAR in the browser


and get a JSON document with the names of the objects in the bucket

Vue Application – retrieve and display object names

The first step with the application: show the objects in the bucket.


The result:


As a next step, I would like to display the file names as links – through which the file can be downloaded. In case the file is an image (names ends with JPG) then also display the image.


The code to make this happen:


Allow Updates to be Made to the File Manager

In addition to downloading files, the file manager should also support uploading. This is easily added to the application. In the page we need an input file element – that we have support the upload of multiple files. We introduce a submit button to press when the uploaded files should be written to the bucket. A function handles this button click and submits the files one by one, using a new function submitBlob() in the filesStore.


Uploading one or more files is now a breeze.


et voilá, four more files are in the list and in the bucket


Allow upload of zip file – expanded into individual files

One feature that I believe will prove handy: allow the use to upload a zip file and indicate that the files in the archive should be extracted and should be individually created in the bucket.

To handle zip files in our static web application, we will use the library jszip. Add it to the application with this statement (to include in package.json and download its sources to the project)

npm install jszip –save

Next I add an import of jszip to App.vue and I extend function submitData() to cater for zip-files:


With this support in place, I can upload a zip file that in this case contains 5 files – my-photos.zip. The zip file is automatically expanded and the files contained in it are individually added to the bucket:


Support for Folders

One thing I would like my File Manager to also provide: support for folders. Even though buckets do not really support folders, we can nevertheless simulate them using object names that contain slashes. The name “assets/someIcon.jpeg” is interpreted as a file called someIcon.jpeg located in a folder called assets.

The file manager should make it visually clear if files are in a folder. And ideally folders can be expanded and collapsed – just like a in regular file explorer. And files can be uploaded into a target folder – an existing one or a new one. Let’s see what is required for this.

In filesStore, the logic for processing the data returned from the PAR list of objects is quite extended. All unique object names are retrieved. A collection of objects is composed with objects for files and also for the folders. Folders have a “isExpanded” property. Files have an optional “folderName” property that is set if they have a prefix that contains a slash – our definition of that file being in a folder.image

To visualize folders and allow them to be expanded and collapsed, some change are made in App,.vue:

Instead of UL and LI elements, the names are now rendered in DIV elements. A computed list of expanded folder (names) is added. If a file is in a folder, its name is only displayed if that folder is in the list of expanded folder (names). If an entry is a folder, then it is prefix with a  ‘▼’ or a  ‘▶’- depending on whether it is expanded or collapsed. Clicking on this icon toggles the expand/collapse status.


The end result – no awards for styling and user experience I fear – is that folders are displayed as such as they can be collapsed and expanded. The files within the folders are only shown if the container folder is expanded. Note: at this moment, only a single level of folders is supported.


In a future article, I want to show how I can make this file manager much more pleasing to the eye. Beautify using Vuetify. I will then also add the option to paste in your own PAR url and use the file manager for your own buckets and easily switch between them.


Code demonstrated in this article is in this GitHub Repository https://github.com/lucasjellema/oci-file-manager

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.