Upload

The client library for handling file uploads, Right now it only supports uploading a single image.

installation

before installing the library you'll need to have npm configured to be able to install from qpix github packages. To do this you'll need to add .npmrc file with the following content to the root directory of your repo

//npm.pkg.github.com/:_authToken=2f5aa0a78cdc90a88a0cfd513bb713dd48ae35e1
@qpixio:registry=https://npm.pkg.github.com/qpixio

then run

npm install @qpixio/upload

basic file upload example for react

before using it you must initialize the library by calling the init function using your upload token (you can get the upload token for your tenet from clevershop control )

import { init } from '@qpixio/upload'

init({ clevershopAPI: 'https://upload-dev.v1.api.cleversell.io/', token: 'E8DkRcSr5gCwvf399xKiA' });

after which you can start using it

import { useState } from "react";
import { useUploadImage } from '@qpixio/upload'

const imageUpload = () => {
  const [file, setFile] = useState();
  const { urls, loading, upload, cancel } = useUploadImage('profile-pic');

  return (
    <div>
      <input
        type="file"
        accept="image/*"
        multiple={false}
        disabled={loading}
        onChange={event => setFile(event.target.files?.[0])}
      />
      <div>
        <button disabled={loading} onClick={() => upload(file)}>
          upload
        </button>
        <button disabled={!loading} onClick={cancel}>
          cancel
        </button>
      </div>
    </div>
  );
}

react native

import { init, useUploadImage } from '@qpixio/upload';
import ImagePicker from 'react-native-image-crop-picker'

init({
  clevershopAPI: 'https://upload-dev.v1.api.cleversell.io/',
  token: 'E8DkRcSr5gCwvf399xKiA',
  reactNative: true,
});

const ImagePickerComponent = () => {
  const { urls, loading, upload, cancel } = useUploadImage('profile-pic');
  const [selectedImage, setSelectedImage] = useState<ImageType | null>(null)

  const openPicker = () => {
    ImagePicker.openPicker({
      width: 400,
      height: 400,
      cropping: true,
    }).then(image =>{
      setSelectedImage(null)
      upload(image)
      setSelectedImage(image)
    })
     // eslint-disable-next-line consistent-return
      .catch(error => {
        if (error.code === 'E_PICKER_CANCELLED') {
          return false
        }
      })
  }

  return (
    <TouchableOpacity onPress={openPicker}>
      <Image
        width={80}
        height={80}
        alignSelf={'center'}
        uri={selectedImage?.path}
      />
      {loading && (
        <IndicatorBackground>
          <StyledIndicator color={colors.white} size='small' />
        </IndicatorBackground>
      )}
    </TouchableOpacity>
  )
}

minimal example for Node.js

import { init, uploadImage } from '@qpixio/upload';
import * as fs from 'fs';

const readStream = fs.createReadStream('neuron activation.jpg');
uploadImage(readStream, 'profile-pic').then(urls => console.log({ urls }))

functions

init

| argument | type | | ------------- | ------- | | clevershopAPI | string | | token | string | | reactNative? | boolean |

uploadImage

Note: the upload image can be used with either an array or single file

| argument | type | | -------- | ---- | | files | readStream[] or File[] or ReactNativeFiles[] or File or readStream or ReactNativeFile | | type | string | | options? | UploadImageOptions |

uploadFiles

Note: UploadFiles can only be called with an array, or an ArrayLike (e.g. File[] or FileList)

| argument | type | | -------- | ------ | | files | readStream[] or FileList or File[] or ReactNativeFiles[] | | type | string | | options? | UploadImageOptions |

MISC

you can find more examples in the examples directory