Image Uploader

After the image cropped, component <HcImageUploader /> return imageId.

An uploader image with cropper is a tool that allows users to upload an image and then crop it as needed before saving.

The uploader image with cropper consists of a simple interface that allows users to upload an image by either dragging and dropping it onto the designated area or by selecting a file from their device. Once the image is uploaded, users can then use the cropper tool to adjust the crop.

The cropper tool includes ability adjust the aspect ratio of the crop, a grid overlay.

Component has prop renditions and it's create image with renditions that you pass.

How does it's work

Here are steps for uploading an image in HcImageUploader:

Choose the image: Select the image file that you want to upload to the system (or use drag-and-drop functionality for this). Ensure that the image meets the required size and format specifications.
Open the cropper: Once the image is uploaded, the cropper opening in the popup. The cropper tool allows you to select a portion of the image that you want to use. You can configure the cropper use renditions prop, specifying there width, height, type, mimeType and quality
Crop: Click to crop button to start the cropping process. Based on the array of renditions, images are loaded to companion with the appropriate parameters.
Create imageRenditions: As result of uploading we have image urls. When all images are uploaded, then starting create imageRenditions.
Create image: When imageRenditions created, then starting create image with existing imageRenditions. As result of creating image, you have imageId.

Usage

Before use HcImageUploader component you need to add uppy plugin in your project.

/* Uppy Instances */
import { Plugin, shallowRef } from 'vue';
import { Uppy } from '@uppy/core';
import { Gcp } from '@deeepvision/hope-component-kit';
import { IMAGE_UPLOADER_UPPY_KEY } from '@deeepvision/hope-component-kit';

export default {
  install(app) {
    const companionUrl = 'your companionUrl';
    const bucket = 'your bucket';

    if (!companionUrl) {
      throw new Error(`companionUrl wasn't set in env variables`);
    }

    if (!bucket) {
      throw new Error(`bucket wasn't set in env variables`);
    }

    const uppy = shallowRef<Uppy | null>(new Uppy({
      id: 'image-uploader',
      debug: true,
      autoProceed: true,
      allowMultipleUploadBatches: true,
      restrictions: {
        allowedFileTypes: ['image/*'],
      },
    }).use(Gcp, {
      limit: 2,
      companionUrl,
      bucket,
    }));

    app.provide(IMAGE_UPLOADER_UPPY_KEY, {
      default: uppy,
    });
  },
} as Plugin;

Several uppy instances and api in the project

If you have more that one uppy instance and need to save files on earch of them, you should provide additional uppy instances.

  app.provide(IMAGE_UPLOADER_UPPY_KEY, {
    default: uppy,
    exampleUppyId: exampleUppy,
    ...
  });

After that use prop uppyId to describe which uppy you want to use in the component.

There are cases where you use two or more api and need to save image in each of them. In this case you can use prop graphqlClientId and pass there ApolloClientId

Basic usege

Use prop btn-text to customize button text in empty state. Use prop hide-tooltip to hide info icon. Use prop zoomable to show zoom action for uploaded image. Use prop optional to show delete action for uploaded image. Use prop downloadable to show download action for uploaded image.

<template>
  <ClientOnly>
    <div class="flex items-end">
      <HcImageUploader
        v-model="value1"
        label="Image uploader"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0"
      />
      <HcImageUploader
        v-model="value2"
        label="Zoomable"
        btn-text="Upload"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl ml-5 flex-shrink-0"
        zoomable
        hide-tooltip
      />
      <HcImageUploader
        v-model="value3"
        label="Optional and downloadable"
        btn-text="Upload"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0 ml-5"
        optional
        downloadable
      />
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { IImageRenditionType, IRenditionOptions } from '@deeepvision/dynamic-components';
import { HcImageUploader } from '@deeepvision/hope-component-kit';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');

const renditions = ref<IRenditionOptions[]>([
  {
    width: 600,
    height: 600,
    type: IImageRenditionType.MAIN_2X,
  },
  {
    width: 300,
    height: 300,
    type: IImageRenditionType.MAIN,
  },
]);
</script>

Disabled state

Use prop disabled or readonly to change component state

<template>
  <ClientOnly>
    <div class="flex items-end">
      <HcImageUploader
        v-model="value1"
        label="Disabed"
        btn-text="Upload"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0"
        disabled
      />
      <HcImageUploader
        v-model="value2"
        label="Readonly"
        btn-text="Upload"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl ml-5 flex-shrink-0"
        readonly
      />
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { IImageRenditionType, IRenditionOptions } from '@deeepvision/dynamic-components';
import { HcImageUploader } from '@deeepvision/hope-component-kit';

const value1 = ref('');
const value2 = ref('');

const renditions = ref<IRenditionOptions[]>([
  {
    width: 600,
    height: 600,
    type: IImageRenditionType.MAIN_2X,
  },
  {
    width: 300,
    height: 300,
    type: IImageRenditionType.MAIN,
  },
]);
</script>

Error state

Add Boolean prop error or prop errorMsg for show error state

<template>
  <ClientOnly>
    <div class="flex items-end">
      <HcImageUploader
        v-model="value1"
        label="Error"
        btn-text="Upload"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0"
        error
      />
      <HcImageUploader
        v-model="value2"
        label="Error message"
        btn-text="Upload"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0 ml-5"
        error-msg="This field is required"
      />
      <HcImageUploader
        v-model="value3"
        label="Error and disabled"
        btn-text="Upload"
        :renditions="renditions"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0 ml-5"
        error
        disabled
      />
    </div>
  </ClientOnly>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { IImageRenditionType, IRenditionOptions } from '@deeepvision/dynamic-components';
import { HcImageUploader } from '@deeepvision/hope-component-kit';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');

const renditions = ref<IRenditionOptions[]>([
  {
    width: 600,
    height: 600,
    type: IImageRenditionType.MAIN_2X,
  },
  {
    width: 300,
    height: 300,
    type: IImageRenditionType.MAIN,
  },
]);
</script>

Types

IRenditionOptions:

Option	Type
width	number
height	number
type	IImageRenditionType
mimeType	string
quality	number

IImageRenditionType = ORIGINAL | MAIN_2X | MAIN | SMALL | MAIN_LEGACY

Props

Property	Type	Values	Description	Default
modelValue	String	String	binding value (imageId)
renditions	IRenditionOptions	IRenditionOptions[]	array of renditions	[]
btnText	String	String	uploader button text
rounded	Boolean	Boolean	whether component is rounded	false
size	String	middlelarge	component size.	middle
optional	Boolean	Boolean	whether show delete button	false
downloadable	Boolean	Boolean	whether show download button	false
zoomable	Boolean	Boolean	whether show zoom button	false
disabled	Boolean	Boolean	whether component is disabled	false
readonly	Boolean	Boolean	whether component is readonly	false
maxFileSize	Number	Number	allowed max file size for downloaded file	5000000
error	Boolean	Boolean	whether component has error and change it's style to that state.	false
errorMsg	String	String	Error message
label	String	String	Label text
hideTooltip	Boolean	Boolean	whether show info tooltip	false
gc	Boolean	Boolean	whether garbage collector enabled	true
graphqlClientId	String	String	graphql clientId for queries and mutations	default
uppyId	String	String	id one of provided uppy instances	default

Slots

Property	Values	Description
empty-state	dragging - boolean	customize uploader empty state
empty-state-inner	-	customize uploader empty inner state
empty-state-tooltip	-	customize tooltip content
label-suffix	-	customize label suffix content

Events

Property	Type	Values	Description
update:model-value	Function	imageId - string	triggers when image uploaded
focus	Function	event - FocusEvent	triggers when ImageUploader focuses
blur	Function	-	triggers when ImageUploader blurs

Image Uploader #

How does it's work #

Usage #

Several uppy instances and api in the project #

Basic usege #

Disabled state #

Error state #

Types #

Props #

Slots #

Events #