bombsight-gallery

bomsight-gallery

This is a Vue.js plugin that will help you browse bombsight images and upload images or files to bombsight

Installation

Install from npm:

npm install bombsight-gallery@latest

In your vue app use the plugin:

// main.ts

import { createApp } from "vue";

import App from "./App.vue";
import BombsightGalleryPlugin from "bombsight-gallery";

const app = createApp(App);
app.use(BombsightGalleryPlugin, { apiKey: "YOUR_API_KEY" });

app.mount("#app");

Available components

• BombsightGallery
• BombsightMediaLibrary

BombsightGallery

<BombsightGallery /> will enable you select from a list of bombsight image for use or upload for use.

<template>
  <main>
    <BombsightGallery 
        @image-selected="onImageSelected"
        @image-uploaded="onImageUploaded"
        @cancel="onCancel"
    />
  </main>
</template>

<script setup lang="ts">
import { BombsightGallery } from "bombsight-gallery";

const onImageSelected(image: Image) {
    // do whatever you want with the image.
    // most likely take the url of the image (image.url)
}

const onImageUploaded(image: Image) {
    // do whatever you want with the image.
}

const onCancel(image: Image) {
    // this event is called when the cancel button is clicked 
    // you can close a dialog or navigate to a new page when this event is triggered
}
</script>

BombsightMediaLibrary

<BombsightMediaLibrary /> is to show you a list of images you have on bombsight and some details. you can also upload images

<template>
  <main>
    <BombsightMediaLibrary
        @image-uploaded="onImageUploaded"
    />
  </main>
</template>

<script setup lang="ts">
import { BombsightMediaLibrary } from "bombsight-gallery";

const onImageUploaded(image: Image) {
    // do whatever you want with the image.
}
</script>

Bombsight Image interface

the Image passed in the events has the following shape.

export interface Image {
  name: string;
  originalName: string;
  path: string;
  extension: string;
  mimeType: string;
  projectID: string;
  environment: "development" | "production";
  url: string;
  createdAt: Date;
  updatedAt: Date;
}