Raw Image Uploader

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

An image uploader component is a software component that allows users to upload images.

The image uploader component consists of a user interface that allows users to select an image from their device. It also include features such as drag-and-drop functionality, file format validation, and progress indicators to provide feedback on the upload process.

When implementing an image uploader component, it is important to consider factors such as file size limits, supported file format. File size limits may be necessary to prevent users from uploading overly large files that could slow down the website or application.

How it's work

Here are steps for uploading an image in HcRawImageUploader:

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.
Generate the rendition: Uploading image to companition with one MAIN rendition. The height, width and aspect ratio of the image for this rendition are the same as in the original file.
Generate the rendition: Generate the rendition by executing the appropriate command in the system. Wait for the system to finish generating the rendition.
Create image item: Create image item with one MAIN rendition.

Usage

Before use HcRawImageUploader 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. Use prop optional to show delete action. Use prop downloadable to show download action.

<template>
  <ClientOnly>
    <div class="flex items-end">
      <HcRawImageUploader
        v-model="value1"
        label="Image uploader"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0"
      />
      <HcRawImageUploader
        v-model="value2"
        label="Zoomable"
        btn-text="Upload"
        class="!w-36 !h-36 !rounded-2xl ml-5 flex-shrink-0"
        zoomable
        hide-tooltip
      />
      <HcRawImageUploader
        v-model="value3"
        label="Optional and downloadable"
        btn-text="Upload"
        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 { HcRawImageUploader } from '@deeepvision/hope-component-kit';

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

</script>

Disabled state

Use prop disabled or readonly to change component state

<template>
  <ClientOnly>
    <div class="flex items-end">
      <HcRawImageUploader
        v-model="value1"
        label="Disabed"
        btn-text="Upload"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0"
        disabled
      />
      <HcRawImageUploader
        v-model="value2"
        label="Readonly"
        btn-text="Upload"
        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 { HcRawImageUploader } from '@deeepvision/hope-component-kit';

const value1 = ref('');
const value2 = ref('');
</script>

Error state

Add Boolean prop error or prop errorMsg for show error state

<template>
  <ClientOnly>
    <div class="flex items-end">
      <HcRawImageUploader
        v-model="value1"
        label="Error"
        btn-text="Upload"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0"
        error
      />
      <HcRawImageUploader
        v-model="value2"
        label="Error message"
        btn-text="Upload"
        class="!w-36 !h-36 !rounded-2xl flex-shrink-0 ml-5"
        error-msg="This field is required"
      />
      <HcRawImageUploader
        v-model="value3"
        label="Error and disabled"
        btn-text="Upload"
        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 { HcRawImageUploader } from '@deeepvision/hope-component-kit';

const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
</script>

Props

Property	Type	Values	Description	Default
modelValue	String	String	binding value (imageId)
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
maxFileSize	Number	Number	allowed max file size for downloaded file	5000000
disabled	Boolean	Boolean	whether component is disabled	false
readonly	Boolean	Boolean	whether component is readonly	false
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
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

Raw Image Uploader #

How it's work #

Usage #

Several uppy instances and api in the project #

Basic usege #

Disabled state #

Error state #

Props #

Slots #

Events #