Image Storage Explorer

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 a tool that keeps us within Visual Studio Code. It connects us to local files, cloud storage, and assets. As a developer focused on Cloudflare first, it was originally built to answer that need. Since then, we have added some of the usual suspects, and we will be adding more as the opportunities arise.

---

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

How To Add 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

On the Side Panel Edit tab, all of the providers that you have added are listed with checkboxes. The checkboxes are on the edit tab for the purpose of removing providers; multiple providers cannot be edited simultaneously. Additionally, there is a 3-second countdown between clicking on the Remove Providers button and the providers being removed, during which you may cancel the process with the same button. Clicking outside of the checkbox on the provider you are trying to edit displays the form that was used to add the provider with an Update button to save your changes, where any of the values can be modified. The credentials input will be validated before your changes and will not be saved if validation fails, so as not to save an unusable provider.

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 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