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.
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.
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.
Resources
Code demonstrated in this article is in this GitHub Repository https://github.com/lucasjellema/oci-file-manager
