React Media Uploader

Status: Under development

Quick start

bun install

bun run build

Hook

Upload on select

"use client";

import { useMediaUploader } from "@susonwaiba/react-media-uploader";

export function Uploader() {
  const uploader = useMediaUploader();
  return (
    <input
      name="image"
      type="file"
      onChange={uploader.onFileInputChange}
    />
  );
}

Manual upload

"use client";

import { useMediaUploader, MediaStatusEnum } from "@susonwaiba/react-media-uploader";

export function ManualUploader() {
  const uploader = useMediaUploader({
    enableManualUpload: true,
    // Update media status to ACTIVE status on success
    mediaUploadSuccessStatus: MediaStatusEnum.ACTIVE,
  });

  const onSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    const mediaValues = await uploader.uploadManually();
    console.log("mediaValues ->", mediaValues);
    // submit data to API
  };

  return (
    <form onSubmit={onSubmit}>
      <div className="mb-4">
        <input
          name="image"
          type="file"
          multiple
          onChange={uploader.onFileInputChange}
        />
      </div>
      <div>
        <button type="submit">Upload</button>
      </div>
    </form>
  );
}

UseMediaUploaderProps

export interface UseMediaUploaderProps<T extends object> {
  defaultValues?: T;
  mediaUploadSuccessStatus?: MediaStatusEnum;
  enableManualUpload?: boolean;
  serverConfig?: {
    additionalHeaders?: Record<string, string>;
    generateUploadUrl?: string;
    onGenerateUploadUrl?: (
      media: Partial<Media>,
    ) => Promise<{ item: Media; uploadUrl: string }>;
    markMediaAsTemp?: string;
    onMarkMediaAsTemp?: (
      mediaIds: (string | number)[],
    ) => Promise<Partial<Media>[]>;
    markMediaAsActive?: string;
    onMarkMediaAsActive?: (
      mediaIds: (string | number)[],
    ) => Promise<Partial<Media>[]>;
    markMediaAsCanceled?: string;
    onMarkMediaAsCanceled?: (
      mediaIds: (string | number)[],
    ) => Promise<Partial<Media>[]>;
  };
  onUploadSuccess?: (currentValues: any) => Promise<void>;
  onUploadFailure?: (uploadRes: any) => Promise<void>;
}

UseMediaUploaderResponse

export interface UseMediaUploaderResponse<T extends object> {
  values: T;
  setValues: (val: T) => void;
  enableManualUpload?: boolean;
  uploadManually: () => Promise<T>;
  mediaItems: Record<string, MediaItem>;
  setMediaItems: (items: Record<string, MediaItem>) => void;
  uploadInfos: Record<string, UploadMediaInfo>;
  onFileInputChange: (e: React.ChangeEvent<HTMLInputElement>) => Promise<void>;
  onFileChange: (file: File, name: string, multiple?: boolean) => Promise<void>;
}