Image Acquisition

The image service supports the acquisition of images from various sources.

Manual upload

It is possible to manually upload images through the management system workflow. To find out more about this, please refer to the Upload section.

Upload via the GraphQL API

The upload process can also be done using the GraphQL API, using the uploadImage mutation.

The following code snippet demonstrates how to upload an image using the @apollo/client and apollo-upload-client package to handle file uploads:

ImageUpload.tsx

import React from 'react';
import {
  ApolloClient,
  ApolloLink,
  concat,
  gql,
  InMemoryCache,
} from '@apollo/client';
import { createUploadLink } from 'apollo-upload-client';

const uploadLink = createUploadLink({
  uri: "https://image.service.eu.axinom.net/graphql",
});

const authLink = new ApolloLink((operation, forward) => {
  // In an actual microfrontend, the currently valid token would be retrieved
  // from the getToken() function on the PiletApi object.
  // https://docs.axinom.com/platform/packages/mosaic-portal#permissions-1
  const token = "ADD_YOUR_TOKEN";

  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      authorization: `Bearer ${token}`,
    }
  }));

  return forward(operation);
});

const uploadClient = new ApolloClient({
  link: concat(authLink, uploadLink),
  cache: new InMemoryCache(),
});

export const ImageUpload: React.FC = () => {
  const uploadImage = async (file: File) => {
    const response = await uploadClient.mutate({
      mutation: gql`
              mutation UploadImage($file: Upload!, $imageType: String!) {
                uploadImage(input: { file: $file, imageType: $imageType }) {
                  image {
                    id
                  }
                }
              }
            `,
      variables: {
        file,
        imageType: 'demo', // make sure to use an existing image type
      },
    });

    console.log(response);
  }

  return (
    <div>
      <h1>Upload Image</h1>
      <input
        type="file"
        accept="image/*"
        onChange={async (event) => {
          const file = event.target.files?.[0];
          if (file) {
            uploadImage(file);
          }
        }}
      />
    </div>
  );
};

tip

In addition to the GraphiQL endpoint, the image service also provides an Altair endpoint. The Altair application is a more convenient interface to upload files via GraphQL.

Acquisition via Messaging

It is also possible to provide images to the service through messaging. To do that, you need to send an ensureImageExists command the image service.

The fields that are required in this message are:

• image_type
• image_location

The image_type needs to be the name of an existing image type. Make sure to register the image type before sending the message.

The image_location is the relative path to the image file on your acquisition storage. The storage needs to be configured in the acquisition profile within the management system. For more information, please refer to the Acquisition Profile section.

The ensureImageExists command checks whether the image is already present (identified by the image_location) and if not, downloads the image from the specified location, stores it within the Image Service, and creates the relevant records on the database.

The service will notify listeners about the result of the operation by sending out events on the message bus. In case the image did already exist, the service will emit an ensure-image-exists-already-existed-event message. In case it did not exist, the service will emit an ensure-image-exists-image-created-event message. Both events will contain the image_id of the image. If something went wrong, the service will emit an ensure-image-exists-failed-event message.

Validation Webhook

Image Service allows regsitering a webhook that is called after an image is uploaded. The webhook endpoint can decide whether the upload is accepted or rejected based on the image properties.

The Image Service will invoke the webhook using a POST request with a payload containing information about the image. The webhook can then return an array of errors if the image should be rejected or a response without errors if the image should be accepted.

To find out more details check out the API document of the Image Upload webhook.