Anniversary Gift: Versatile Cross Device File Manager (10GB free storage) image

Anniversary Gift: Versatile Cross Device File Manager (10GB free storage)

As part of our 20 year AMIS blog anniversary celebration, I would like to present the OCI File Manager – a free tool that allows users to easily, on any device, store, retrieve and share files – documents, photographs, source files, music and others.

image

This tool supports for example these scenarios:

  • take pictures with my phone; save these pictures to a named folder in a cloud based back end (I do this frequently after internal knowledge sessions to quickly organize and persist my pictures)
  • hand these picture to the speakers in the session by showing the a QR code
  • access my files on any device – phone, tablet, desktop – using a simple URL
  • share a set of images or documents with friends or colleagues by sharing a URL in a chat or email or presenting them with a QR code on my phone (both take them to a web site with download links and possibly the option to upload additional files)
  • allow a team or even a large group of people to upload files to a central location (from any device) – pictures, notes, recordings etc.

Some technical, Oracle Cloud Infrastructure oriented use cases

  • Explore files in OCI Storage buckets – created for example by cloud native applications running on Oracle Cloud
  • Move local files into Oracle Cloud Infrastructure – to backup or for processing in the cloud
  • Deploy a static web application to OCI Object Storage

Some characteristics of the OCI File Manager tool:

  • it is free and open source; use it, clone it, modify it, distribute it. anything you like
  • it is completely client side: no install is required (simply open a URL), so server side information or processing is involved
  • the app runs on mobile devices as well as desktop
  • local browser storage is used to remember buckets across sessions (optional)

The OCI File Manager works on top of Oracle Cloud Object Storage and leverages the Pre Authentication Request (PAR) that you can create for a bucket. This PAR is a URL that gives read and/or write access to a bucket.

image

In order to use the OCI File Manager, you have to provide a PAR. The tool knows how to interpret and use the URL to retrieve information and download and upload files. The tool can be configured with multiple PARs to access multiple buckets (possibly in multiple regions or tenants). You can also create connections for various folders (somewhat similar to a mount point) in a bucket: even though they may all refer to the same  bucket, they seem to provide access to different logical storage compartments.

Features of the OCI File Manager: include the ability to upload multiple files as a single zip file that is expanded into individual files and folders when persisted to the cloud backend, creating shareable URLs or QR Code for files, downloading multiple files in a zip file, sharing access to a folder or folder structure with other users through a URL or QR Code, copy files between buckets (or between folders within a bucket). OCI File Manager can overwrite existing files. It cannot rename or delete files (although overwriting a file with a zero byte replacement is very close to deletion).

image

I would like to repeat: the tool runs completely client side, inside your browser. It does not have a backend. The only interactions it has are HTTP GET and PUT requests across the PAR that you provide. None of the information – neither PAR nor the files – goes anywhere else. The PAR configuration is stored locally in your browser’s local storage. You could run the OCI File Manager (a simple static web application, built using Vue 3) on your own web server instead of using it from my deployment on GitHub Pages. In terms of functionality or performance, it will not make any difference because the tool runs completely client side and after the initial load, the web server is no longer involved.

How to get started with OCI File Manager

Getting started is pretty easy. Here are the steps at high level:

  • get yourself an Oracle Cloud account – go to https://signup.oraclecloud.com/ if you do not already have an account. Signing up is free. As part of the OCI Free Tier, you get 10 GB of Object Storage for free – for an unlimited period of time. Additional storage will set you back less than 25 cents per month for 10 GB (see OCI Cloud Cost Estimator).
  • create a bucket on OCI Object Storage
  • create a Pre Authenticated Request for this bucket – copy the URL associated with this PAR (and keep it secret: anyone who has that URL can access the bucket it refers to)
  • open OCI File Manager
  • add a bucket in OCI File Manager based on the PAR

At this point, OCI File Manager can be used to upload files to the bucket, create folders, inspect and download files and share access to a file or a folder with files with others and have them upload files as well.

Demo of Getting Started with OCI File Manager

I assume that an OCI account has been created and that you are logged into the account.

Create the new bucket in the OCI Object Storage;the bucket in this example is called shared-drive:

image

Click Create.

The Bucket is created and its details are presented:

image

Click the link for Pre Authenticated Requests:

image

and click on the button Create Pre Authenticated Request.

In the windows that appears you can modify the name for the PAR. Make sure that the target of the PAR is bucket and that the checkbox for Enable Object Listing is checked. Select the appropriate Access Type. Specify the expiration date (until when can this PAR be used to access the bucket contents).image

Click the button Create Pre Authenticated Request to do exactly that.

A window appears that contains the URL we need.

image

Both of these URLs can be used. Copy one of them to the clipboard. Then press Close.

Open the OCI File Manager at https://lucasjellema.github.io/oci-file-manager/.

Expand the panel Bucket Management.

image

Click on Add Bucket. A window appears:

image

Define the Label under which this connection is displayed in the tool. Then paste the PAR URL into the designated field. Optionally add a description and specify whether the tool should consider this connect a read and/or write connection. Note: OCI File Manager cannot allow more than the PAR permits. It can restrict: if the PAR supports write but you want to use this bucket connection only for reading/downloading files than unchecking write allowed makes the file manager only present the read functionality.

Click Save to complete the configuration.

At this point, the bucket connection is shown in the right hand pane. Once you select the radio button for the bucket, the left side of the page shows the bucket contents (empty at the moment) and new panels are available for uploading, downloading, copying and sharing:

image

I next upload a file from my desktop:

image

I check in the OCI console and find the file inside the  bucket

image

I can open and share the file in the OCI File Manager:

image

In the Share panel I can create a URL or QR Code to share access to the bucket or a specific folder in the bucket:

image

The QR Code can be opened for example on my phone and gives me instant access to the files in the bucket on my mobile device.

Here you see me pointing my phone to scan the QR Code on my laptop:

image

and after opening the link the phone retrieved from the QR Code here is what I see on the phone:

image

It is the OCI File Manager in the context of the Shared Drive, with the same file available for download / review on the phone:

image

The use of QR Code makes it very easy to share access to document and images between mobile devices and/or laptops/desktop computers.

Resources

The OCI File Manager served on GitHub Pages (remember: it fully runs client side; once loaded there is no interaction with GitHub)

The source code for the OCI File Manager – a Vue 3 application (pure JavaScript) in a GitHub Repository

Oracle Cloud Infrastructure – Object Storage documentation

Link to Sign Up for Oracle Cloud – Free Tier (and more)


Leave a Reply

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