Image Storage Explorer

Helping the Developer stay in the code

As developers we found ourselves constantly mentally switching between applications, coding, and login details as we gathered links, corrected spelling errors, and located assets for our projects.

We developed Image Storage Explorer in response to our need to reduce that mental load, to avoid switching between applications, reducing the path between assets and code.

The extension provides us with with a tool keeps us within Visual Studio Code. It connects us to local files, buckets, and assets. As a developer focused on Cloudflare first it was originally built to answer that need.

Comparison

* 1 Cloudflare R2 bucket per workspace

What is in the Free Trial ?

Currently activating a free trial will give you 90 days of unrestricted access to the features within the extension.

What will the Subscription cost ?

When the payment portal comes online the Annual Subscriptions will be £24.00 ,not including tax charged at your local rate. This will allow you unrestricted access to the features within the extension and the ability to activate this license on up to 5 vscode installations.

Key concepts we have addressed in this Visual Studio Code extension

Cloudflare First

We think it's time developers thought Cloudflare first, though other CDN buckets are available. The first Cloudflare buckets in any workspace will be available with all features enabled.

Pasting the image path directly into your code

From source bucket to source code, the extension copies the path and HTML wrapper for the image directly as a point-and-click process. Later, you will see how we extended this feature.

Make a List item from a collection of images

Wrapping the multiple image selections and dropping them into the codebase surrounded by respective LI elements within the code.

Aiding in documentation creation with Markdown ready paste

Switching from HTML to Markdown when handling adding assets is a process which can cause developers to avoid the task of better documentation. We built this tool and use it for ourselves to answer this problem.

Customisable Masks for Copy/Paste

Within the subscription version of the Extension, you can amend the mask which handles the cut/paste process.

Filter by Prefix and Key

Allowing to search by object key within the bucket based on objects returned from the bucket allows fast find and paste.

To Get Started After the Extension is Installed

Adding A Provider

On the side panel with the Add tab open, you will be presented with a dropdown list labelled "Select your Storage Provider". The current provider type options for adding a storage provider are Cloudflare R2, Local Workspace, Google Storage, and AWS S3. Select the type of provider that you are trying to add from the list to display the add form.

Each type of provider has its own required fields:

• Cloudflare R2
  • Name
  • Bucket Name
  • Access Key
  • Secret Access Key
  • Endpoint
  • Public Domain or Path (optional)
• Local Workspace
  • Select Folder
  • Name (optional)
  • Public Domain or Path (optional)
  • Src root
• Google Storage
  • Service Account Key
  • Bucket Name
  • Name
  • Public Domain or Path (optional)
  • Bucket Prefix Filter (optional)
• AWS S3
  • Name
  • Region
  • Bucket Name
  • Access Key
  • Secret
  • Public Endpoint (optional)
• Azure
  • Name
  • Storage Account Name
  • Access Key
  • Container Name
  • Public Domain or Path (optional)

Adding Images To A Provider

The supported file types for uploading to providers are avif, apng, png, jpg, jpeg, webp, zip, pdf.

For Non-Local Workspace Providers

On the Side Panel, use the tab with a provider selected. A button labelled Add Image will be enabled with a prefix box beside it. Clicking on the Add Image button will open a file dialog to choose the images from your local filesystem and upload them into the storage provider. If you have entered text into the prefix box prior to uploading objects, any objects uploaded will have their key prefixed with the input text in the storage provider.

For Local Workspace Providers

With a Local Workspace Provider selected for use on the Side Panel Use Tab, a button labelled File Explorer will be displayed. Clicking on the button will open the File Explorer equivalent of your platform at the directory of the selected provider. Images will have to be added manually to the directory to add them to the provider.

How To Edit A Provider

For each provider in the side panel click the ellipsis (...) button to access the dropdown menu for it, from here you have the option to Edit, Refresh Images from Source, Clone and Delete the provider.

Edit

When you chose Edit the provider if you have updated the credential, when you click the update button we validate your updated credentials by trying to access your bucket before we overwrite the existing ones.

Delete

If you chose Delete the provider, we only delete the the provider for the current workspace so if you are accessing the same bucket in another project or workspace it is unaffected by your action.

Refreshing images from source

Selecting Refreshing images from Source first removes all the images for the selected provider and re-fetches all the bucket objects again, if you bucket contains a huge amount of objects it it maybe worth using the prefix option to reduce the time this takes.

Cloning

Cloning your Provider copies all the images/objects that are in your bucket and the credentials for accessing them, this is a very useful command if your bucket has a huge amount of objects in it and you want to show only a subset of them, then use the prefix option to reduce your providers stored objects.

How To Use The Extension Main Panel

When a provider is selected on the side panel, the paginated contents of the provider are displayed on the main panel. Pages can be navigated with the main panel's Previous and Next buttons, displaying 25 objects per page.

The total number of images across all pages is visible on the side panel. Hovering over an object on the main panel draws a checkbox and two buttons labelled </img\> and .md. Clicking on the img button will copy the image with HTML <img> or <a> tags appropriately, and the md button will copy the image for Markdown.

With a subscription, the img Mask set on the side panel will be used instead when copying HTML objects. If multiple objects have been checked, the img button will copy the images with <li> tags.

Website Link: https://azydeco.com