@bigbinary/neeto-image-uploader-frontend NPM

neeto-image-uploader-nano

The neeto-image-uploader-nano manages assets across neeto products. The nano exports the @bigbinary/neeto-image-uploader-frontend NPM package and neeto-image-uploader-engine Rails engine for development.

neeto-image-uploader-nano
Contents
Development with Host Application
- Engine
  - Installation
- Frontend package
Instructions for Publishing

Development with Host Application

Engine

The engine is used to manage assets across neeto products.

Installation

Add this line to your application's Gemfile:

source "NEETO_GEM_SERVER_URL" do
   # ..existing gems

   gem 'neeto-image-uploader-engine'
end

And then execute:
```
bundle install
```

Add this line to your application's config/routes.rb file:

mount NeetoImageUploaderEngine::Engine => "/neeto_image_uploader_engine"

Add the following keys to environment variables (all 6 keys are required):

IMAGE_KIT_PUBLIC_KEY
IMAGE_KIT_PRIVATE_KEY
IMAGE_KIT_URL_ENDPOINT

UNSPLASH_ACCESS_KEY #(for fetching images from unsplash)

Frontend package

Installation

Install the latest neeto-image-uploader-frontend package using the below command:
```
yarn add @bigbinary/neeto-image-uploader-frontend
```

Components

1. `AssetLibrary` (source code)

Props

isOpen: A boolean to specify whether the modal is open or not.
onClose: A callback function triggered when the modal is closed.
onUploadComplete: A callback function triggered when the image upload is complete.
uploadConfig: Configuration object for image uploads.

Usage

import React, { useState } from "react";
import { AssetLibrary } from "@bigbinary/neeto-image-uploader-frontend";

const App = () => {
  const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
  const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });

  const handleUploadComplete = image => setImage(image);

  return (
      <AssetLibrary
        isOpen={isAssetLibraryOpen}
        onClose={() => setIsAssetLibraryOpen(false)}
        onUploadComplete={handleUploadComplete}
      />
  );
};

export default App;

2. `ImageUploader` (source code)

Props

onUploadComplete: A callback function triggered when the image upload is complete.
className: Additional classes to be applied to the component.
src: The source URL of the image to be displayed initially.
uploadConfig: Configuration object for image uploads.
fixedAspectRatio: An option to maintain a specific aspect ratio for the image. Expected input format is {height: number, width: number}.

Usage

import React, { useState } from "react";
import { ImageUploader } from "@bigbinary/neeto-image-uploader-frontend";

const App = () => {
  const [isAssetLibraryOpen, setIsAssetLibraryOpen] = useState(false);
  const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });

  const handleUploadComplete = image => setImage(image);

  return (
      <ImageUploader
        className="mb-8 h-52 w-80"
        key={image.url}
        src={image.url}
        onUploadComplete={handleUploadComplete}
      />
  );
};

export default App;

3. `BasicImageUploader` (source code)

Props

src: The source URL of the image to be displayed initially.
className: Additional classes to be applied to the component.
imageFallbackProps: Props to be passed to the ImageWithFallback component.
onDrop: Callback function triggered when an image is dropped or selected for upload.
isDisabled: A boolean to specify whether the uploader is disabled.
onRemove: Callback function triggered when the "Remove" button is clicked.

Usage

import React, { useState } from "react";
import { noop } from "neetocist";
import { BasicImageUploader } from "@bigbinary/neeto-image-uploader-frontend";

const App = () => {
  const [image, setImage] = useState({ url: TEST_IMAGE_SRC, signedId: "" });

  return (
      <BasicImageUploader
        className="h-52 w-80"
        src={image.url}
        uploadProgress={0}
        onDrop={noop}
        onRemove={() => setImage({ url: "", signedId: "" })}
      />
  );
};

export default App;

Hooks

1. `useImageUpload` (source code)

The useImageUpload hook is a React custom hook that simplifies the process of uploading images in your application. It handles both development and production scenarios, tracks upload progress, and provides a clean interface for image uploading.
Usage in neetoAuth.

Returns

uploadImage: Function to initiate image upload. It takes two parameters:
- file: The image file to be uploaded.
- onUploadComplete: Callback function called when the upload is complete.
uploadProgress: Number representing the upload progress (0-100).
isUploading: Boolean indicating whether an upload is in progress.

Usage

Import the hook

import { useImageUpload } from "@bigbinary/neeto-image-uploader-frontend";

Invoke the hook

const { uploadImage, uploadProgress, isUploading } = useImageUpload();

Call uploadImage to Upload an Image

const handleImageUpload = async (file) => {
  uploadImage(file, (uploadedImageData) => {
    // Handle the uploaded image data
  });
};

Upload Config

The "Upload Config" section describes the default upload configuration. This configuration can be overridden by passing the uploadConfig prop.

{
  "maxImageSize": globalProps.endUserUploadedFileSizeLimitInMb,
  "allowedImageTypes": {
    "image/png": [".png"],
    "image/jpg": [".jpg", ".jpeg"],
    "image/gif": [".gif"],
    "image/svg+xml": [".svg"]
  }
}

Example: Overriding upload config in neetoForm.

Keys

maxImageSize: The maximum size allowed for uploaded images.
allowedImageTypes: An object specifying the allowed image types and their corresponding file extensions.