@contember/bindx-uploader 0.1.0

package/src/extractors/getAudioFileDataExtractor.ts

@@ -0,0 +1,44 @@
+import type { FieldRef } from '@contember/bindx'
+import type { FieldName, FileDataExtractor } from '../types.js'
+
+export interface AudioFileDataExtractorProps<TEntity> {
+	durationField?: FieldName<TEntity>
+}
+
+/**
+ * Creates an extractor that extracts audio duration.
+ */
+export const getAudioFileDataExtractor = <TEntity extends Record<string, unknown>>({
+	durationField,
+}: AudioFileDataExtractorProps<TEntity>): FileDataExtractor<TEntity> => ({
+	getFieldNames: () => durationField ? [durationField] : [],
+	extractFileData: async ({ previewUrl }) => {
+		if (!durationField) {
+			return undefined
+		}
+
+		const result = await new Promise<{ duration: number }>((resolve, reject) => {
+			const audio = document.createElement('audio')
+			audio.preload = 'metadata'
+
+			audio.addEventListener('canplay', () => {
+				resolve({
+					duration: audio.duration,
+				})
+			})
+			audio.addEventListener('error', e => {
+				reject(e)
+			})
+			audio.src = previewUrl
+		})
+
+		return ({ entity }) => {
+			const fields = (entity as { $fields: Record<string, FieldRef<unknown>> }).$fields
+
+			if (durationField) {
+				// Round duration for integer fields
+				fields[durationField]?.setValue(Math.round(result.duration))
+			}
+		}
+	},
+})

package/src/extractors/getFileUrlDataExtractor.ts

@@ -0,0 +1,22 @@
+import type { FieldRef } from '@contember/bindx'
+import type { FieldName, FileDataExtractor } from '../types.js'
+
+export interface FileUrlDataExtractorProps<TEntity> {
+	urlField: FieldName<TEntity>
+}
+
+/**
+ * Creates an extractor that populates the URL field with the upload result's public URL.
+ */
+export const getFileUrlDataExtractor = <TEntity extends Record<string, unknown>>({
+	urlField,
+}: FileUrlDataExtractorProps<TEntity>): FileDataExtractor<TEntity> => ({
+	getFieldNames: () => [urlField],
+	populateFields: ({ entity, result }) => {
+		const fields = (entity as { $fields: Record<string, FieldRef<unknown>> }).$fields
+		const field = fields[urlField]
+		if (field) {
+			field.setValue(result.publicUrl ?? null)
+		}
+	},
+})

package/src/extractors/getGenericFileMetadataExtractor.ts

@@ -0,0 +1,40 @@
+import type { FieldRef } from '@contember/bindx'
+import type { FieldName, FileDataExtractor } from '../types.js'
+
+export interface GenericFileMetadataExtractorProps<TEntity> {
+	fileNameField?: FieldName<TEntity>
+	lastModifiedField?: FieldName<TEntity>
+	fileSizeField?: FieldName<TEntity>
+	fileTypeField?: FieldName<TEntity>
+}
+
+/**
+ * Creates an extractor that populates generic file metadata fields.
+ */
+export const getGenericFileMetadataExtractor = <TEntity extends Record<string, unknown>>({
+	fileNameField,
+	fileSizeField,
+	fileTypeField,
+	lastModifiedField,
+}: GenericFileMetadataExtractorProps<TEntity>): FileDataExtractor<TEntity> => ({
+	getFieldNames: () => [fileNameField, fileSizeField, fileTypeField, lastModifiedField].filter((f): f is FieldName<TEntity> => !!f),
+	extractFileData: ({ file }) => {
+		return ({ entity }) => {
+			const fields = (entity as { $fields: Record<string, FieldRef<unknown>> }).$fields
+
+			if (fileNameField) {
+				fields[fileNameField]?.setValue(file.name)
+			}
+			if (fileSizeField) {
+				fields[fileSizeField]?.setValue(file.size)
+			}
+			if (fileTypeField) {
+				fields[fileTypeField]?.setValue(file.type)
+			}
+			if (lastModifiedField) {
+				// Convert to ISO string for Date/DateTime fields
+				fields[lastModifiedField]?.setValue(new Date(file.lastModified).toISOString())
+			}
+		}
+	},
+})

package/src/extractors/getImageFileDataExtractor.ts

@@ -0,0 +1,50 @@
+import type { FieldRef } from '@contember/bindx'
+import type { FieldName, FileDataExtractor } from '../types.js'
+
+export interface ImageFileDataExtractorProps<TEntity> {
+	widthField?: FieldName<TEntity>
+	heightField?: FieldName<TEntity>
+}
+
+/**
+ * Creates an extractor that extracts image dimensions (width, height).
+ */
+export const getImageFileDataExtractor = <TEntity extends Record<string, unknown>>({
+	widthField,
+	heightField,
+}: ImageFileDataExtractorProps<TEntity>): FileDataExtractor<TEntity> => ({
+	getFieldNames: () => [widthField, heightField].filter((f): f is FieldName<TEntity> => !!f),
+	extractFileData: async ({ previewUrl }) => {
+		if (!heightField && !widthField) {
+			return undefined
+		}
+
+		const result = await new Promise<{
+			width: number
+			height: number
+		}>((resolve, reject) => {
+			const image = new Image()
+			image.addEventListener('load', () => {
+				resolve({
+					width: image.naturalWidth,
+					height: image.naturalHeight,
+				})
+			})
+			image.addEventListener('error', e => {
+				reject(e)
+			})
+			image.src = previewUrl
+		})
+
+		return ({ entity }) => {
+			const fields = (entity as { $fields: Record<string, FieldRef<unknown>> }).$fields
+
+			if (widthField) {
+				fields[widthField]?.setValue(result.width ?? null)
+			}
+			if (heightField) {
+				fields[heightField]?.setValue(result.height ?? null)
+			}
+		}
+	},
+})

package/src/extractors/getVideoFileDataExtractor.ts

@@ -0,0 +1,60 @@
+import type { FieldRef } from '@contember/bindx'
+import type { FieldName, FileDataExtractor } from '../types.js'
+
+export interface VideoFileDataExtractorProps<TEntity> {
+	widthField?: FieldName<TEntity>
+	heightField?: FieldName<TEntity>
+	durationField?: FieldName<TEntity>
+}
+
+/**
+ * Creates an extractor that extracts video metadata (dimensions, duration).
+ */
+export const getVideoFileDataExtractor = <TEntity extends Record<string, unknown>>({
+	widthField,
+	heightField,
+	durationField,
+}: VideoFileDataExtractorProps<TEntity>): FileDataExtractor<TEntity> => ({
+	getFieldNames: () => [widthField, heightField, durationField].filter((f): f is FieldName<TEntity> => !!f),
+	extractFileData: async ({ previewUrl }) => {
+		if (!heightField && !widthField && !durationField) {
+			return undefined
+		}
+
+		const result = await new Promise<{
+			width: number
+			height: number
+			duration: number
+		}>((resolve, reject) => {
+			const video = document.createElement('video')
+			video.preload = 'metadata'
+
+			video.addEventListener('loadedmetadata', () => {
+				resolve({
+					width: video.videoWidth,
+					height: video.videoHeight,
+					duration: video.duration,
+				})
+			})
+			video.addEventListener('error', e => {
+				reject(e)
+			})
+			video.src = previewUrl
+		})
+
+		return ({ entity }) => {
+			const fields = (entity as { $fields: Record<string, FieldRef<unknown>> }).$fields
+
+			if (widthField) {
+				fields[widthField]?.setValue(result.width ?? null)
+			}
+			if (heightField) {
+				fields[heightField]?.setValue(result.height ?? null)
+			}
+			if (durationField) {
+				// Round duration for integer fields
+				fields[durationField]?.setValue(Math.round(result.duration))
+			}
+		}
+	},
+})

package/src/extractors/index.ts

@@ -0,0 +1,5 @@
+export { getFileUrlDataExtractor, type FileUrlDataExtractorProps } from './getFileUrlDataExtractor.js'
+export { getGenericFileMetadataExtractor, type GenericFileMetadataExtractorProps } from './getGenericFileMetadataExtractor.js'
+export { getImageFileDataExtractor, type ImageFileDataExtractorProps } from './getImageFileDataExtractor.js'
+export { getVideoFileDataExtractor, type VideoFileDataExtractorProps } from './getVideoFileDataExtractor.js'
+export { getAudioFileDataExtractor, type AudioFileDataExtractorProps } from './getAudioFileDataExtractor.js'

package/src/extractors/types.ts

@@ -0,0 +1,14 @@
+import type { FieldRef } from '@contember/bindx'
+import type { FileWithMeta, FileUploadResult, FileDataExtractor, FileDataExtractorPopulator } from '../types.js'
+
+/**
+ * Generic entity type for extractors - allows any string field access
+ */
+export type ExtractorEntity = {
+	$fields: Record<string, FieldRef<unknown>>
+}
+
+/**
+ * Helper type for extractor factory function
+ */
+export type ExtractorFactory<TProps, TEntity = ExtractorEntity> = (props: TProps) => FileDataExtractor<TEntity>

package/src/fileTypes/createAnyFileType.ts

@@ -0,0 +1,56 @@
+import type { FieldName, FileType, UploadClient } from '../types.js'
+import { getFileUrlDataExtractor } from '../extractors/getFileUrlDataExtractor.js'
+import { getGenericFileMetadataExtractor } from '../extractors/getGenericFileMetadataExtractor.js'
+
+export interface CreateAnyFileTypeProps<TEntity> {
+	/** Upload client to use */
+	uploader?: UploadClient<unknown>
+	/** Field name for the URL */
+	urlField: FieldName<TEntity>
+	/** Field name for file name (optional) */
+	fileNameField?: FieldName<TEntity>
+	/** Field name for file size (optional) */
+	fileSizeField?: FieldName<TEntity>
+	/** Field name for file type/MIME (optional) */
+	fileTypeField?: FieldName<TEntity>
+	/** Field name for last modified (optional) */
+	lastModifiedField?: FieldName<TEntity>
+	/** Additional extractors */
+	extractors?: FileType<TEntity>['extractors']
+	/** Custom file validator */
+	acceptFile?: FileType<TEntity>['acceptFile']
+	/** Accept MIME types (optional - defaults to any) */
+	accept?: FileType<TEntity>['accept']
+}
+
+/**
+ * Creates a file type configuration for any file upload.
+ * Includes extractors for URL and generic metadata only.
+ */
+export const createAnyFileType = <TEntity extends Record<string, unknown>>({
+	uploader,
+	urlField,
+	fileNameField,
+	fileSizeField,
+	fileTypeField,
+	lastModifiedField,
+	extractors = [],
+	acceptFile,
+	accept,
+}: CreateAnyFileTypeProps<TEntity>): FileType<TEntity> => ({
+	accept,
+	acceptFile,
+	uploader,
+	extractors: [
+		getGenericFileMetadataExtractor<TEntity>({
+			fileNameField,
+			fileSizeField,
+			fileTypeField,
+			lastModifiedField,
+		}),
+		getFileUrlDataExtractor<TEntity>({
+			urlField,
+		}),
+		...extractors,
+	],
+})

package/src/fileTypes/createAudioFileType.ts

@@ -0,0 +1,67 @@
+import type { FieldName, FileType, UploadClient } from '../types.js'
+import { getFileUrlDataExtractor } from '../extractors/getFileUrlDataExtractor.js'
+import { getGenericFileMetadataExtractor } from '../extractors/getGenericFileMetadataExtractor.js'
+import { getAudioFileDataExtractor } from '../extractors/getAudioFileDataExtractor.js'
+
+export interface CreateAudioFileTypeProps<TEntity> {
+	/** Upload client to use */
+	uploader?: UploadClient<unknown>
+	/** Field name for the URL */
+	urlField: FieldName<TEntity>
+	/** Field name for duration (optional) */
+	durationField?: FieldName<TEntity>
+	/** Field name for file name (optional) */
+	fileNameField?: FieldName<TEntity>
+	/** Field name for file size (optional) */
+	fileSizeField?: FieldName<TEntity>
+	/** Field name for file type/MIME (optional) */
+	fileTypeField?: FieldName<TEntity>
+	/** Field name for last modified (optional) */
+	lastModifiedField?: FieldName<TEntity>
+	/** Additional extractors */
+	extractors?: FileType<TEntity>['extractors']
+	/** Custom file validator */
+	acceptFile?: FileType<TEntity>['acceptFile']
+	/** Override default accept MIME types */
+	accept?: FileType<TEntity>['accept']
+}
+
+const DEFAULT_AUDIO_ACCEPT = {
+	'audio/*': ['.mp3', '.wav', '.ogg', '.flac', '.m4a', '.aac', '.wma', '.aiff'],
+}
+
+/**
+ * Creates a file type configuration for audio uploads.
+ * Includes extractors for URL, audio duration, and generic metadata.
+ */
+export const createAudioFileType = <TEntity extends Record<string, unknown>>({
+	uploader,
+	urlField,
+	durationField,
+	fileNameField,
+	fileSizeField,
+	fileTypeField,
+	lastModifiedField,
+	extractors = [],
+	acceptFile,
+	accept = DEFAULT_AUDIO_ACCEPT,
+}: CreateAudioFileTypeProps<TEntity>): FileType<TEntity> => ({
+	accept,
+	acceptFile,
+	uploader,
+	extractors: [
+		getGenericFileMetadataExtractor<TEntity>({
+			fileNameField,
+			fileSizeField,
+			fileTypeField,
+			lastModifiedField,
+		}),
+		getAudioFileDataExtractor<TEntity>({
+			durationField,
+		}),
+		getFileUrlDataExtractor<TEntity>({
+			urlField,
+		}),
+		...extractors,
+	],
+})

package/src/fileTypes/createImageFileType.ts

@@ -0,0 +1,87 @@
+import type { FieldName, FileType, UploadClient } from '../types.js'
+import { getFileUrlDataExtractor } from '../extractors/getFileUrlDataExtractor.js'
+import { getGenericFileMetadataExtractor } from '../extractors/getGenericFileMetadataExtractor.js'
+import { getImageFileDataExtractor } from '../extractors/getImageFileDataExtractor.js'
+
+export interface CreateImageFileTypeProps<TEntity> {
+	/** Upload client to use */
+	uploader?: UploadClient<unknown>
+	/** Field name for the URL */
+	urlField: FieldName<TEntity>
+	/** Field name for width (optional) */
+	widthField?: FieldName<TEntity>
+	/** Field name for height (optional) */
+	heightField?: FieldName<TEntity>
+	/** Field name for file name (optional) */
+	fileNameField?: FieldName<TEntity>
+	/** Field name for file size (optional) */
+	fileSizeField?: FieldName<TEntity>
+	/** Field name for file type/MIME (optional) */
+	fileTypeField?: FieldName<TEntity>
+	/** Field name for last modified (optional) */
+	lastModifiedField?: FieldName<TEntity>
+	/** Additional extractors */
+	extractors?: FileType<TEntity>['extractors']
+	/** Custom file validator */
+	acceptFile?: FileType<TEntity>['acceptFile']
+	/** Override default accept MIME types */
+	accept?: FileType<TEntity>['accept']
+}
+
+const DEFAULT_IMAGE_ACCEPT = {
+	'image/*': ['.png', '.jpg', '.jpeg', '.gif', '.webp'],
+}
+
+/**
+ * Creates a file type configuration for image uploads.
+ * Includes extractors for URL, image dimensions, and generic metadata.
+ *
+ * @example
+ * ```tsx
+ * interface Image {
+ *   id: string
+ *   url: string
+ *   width: number
+ *   height: number
+ * }
+ *
+ * const imageFileType = createImageFileType<Image>({
+ *   urlField: 'url',      // Type-checked: must be keyof Image
+ *   widthField: 'width',  // Type-checked
+ *   heightField: 'height',
+ * })
+ * ```
+ */
+export const createImageFileType = <TEntity extends Record<string, unknown>>({
+	uploader,
+	urlField,
+	widthField,
+	heightField,
+	fileNameField,
+	fileSizeField,
+	fileTypeField,
+	lastModifiedField,
+	extractors = [],
+	acceptFile,
+	accept = DEFAULT_IMAGE_ACCEPT,
+}: CreateImageFileTypeProps<TEntity>): FileType<TEntity> => ({
+	accept,
+	acceptFile,
+	uploader,
+	extractors: [
+		getGenericFileMetadataExtractor<TEntity>({
+			fileNameField,
+			fileSizeField,
+			fileTypeField,
+			lastModifiedField,
+		}),
+		getImageFileDataExtractor<TEntity>({
+			widthField,
+			heightField,
+		}),
+		getFileUrlDataExtractor<TEntity>({
+			urlField,
+		}),
+		...extractors,
+	],
+})

package/src/fileTypes/createVideoFileType.ts

@@ -0,0 +1,75 @@
+import type { FieldName, FileType, UploadClient } from '../types.js'
+import { getFileUrlDataExtractor } from '../extractors/getFileUrlDataExtractor.js'
+import { getGenericFileMetadataExtractor } from '../extractors/getGenericFileMetadataExtractor.js'
+import { getVideoFileDataExtractor } from '../extractors/getVideoFileDataExtractor.js'
+
+export interface CreateVideoFileTypeProps<TEntity> {
+	/** Upload client to use */
+	uploader?: UploadClient<unknown>
+	/** Field name for the URL */
+	urlField: FieldName<TEntity>
+	/** Field name for width (optional) */
+	widthField?: FieldName<TEntity>
+	/** Field name for height (optional) */
+	heightField?: FieldName<TEntity>
+	/** Field name for duration (optional) */
+	durationField?: FieldName<TEntity>
+	/** Field name for file name (optional) */
+	fileNameField?: FieldName<TEntity>
+	/** Field name for file size (optional) */
+	fileSizeField?: FieldName<TEntity>
+	/** Field name for file type/MIME (optional) */
+	fileTypeField?: FieldName<TEntity>
+	/** Field name for last modified (optional) */
+	lastModifiedField?: FieldName<TEntity>
+	/** Additional extractors */
+	extractors?: FileType<TEntity>['extractors']
+	/** Custom file validator */
+	acceptFile?: FileType<TEntity>['acceptFile']
+	/** Override default accept MIME types */
+	accept?: FileType<TEntity>['accept']
+}
+
+const DEFAULT_VIDEO_ACCEPT = {
+	'video/*': ['.mp4', '.webm', '.ogg', '.mov', '.avi', '.wmv', '.mkv', '.3gp'],
+}
+
+/**
+ * Creates a file type configuration for video uploads.
+ * Includes extractors for URL, video dimensions, duration, and generic metadata.
+ */
+export const createVideoFileType = <TEntity extends Record<string, unknown>>({
+	uploader,
+	urlField,
+	widthField,
+	heightField,
+	durationField,
+	fileNameField,
+	fileSizeField,
+	fileTypeField,
+	lastModifiedField,
+	extractors = [],
+	acceptFile,
+	accept = DEFAULT_VIDEO_ACCEPT,
+}: CreateVideoFileTypeProps<TEntity>): FileType<TEntity> => ({
+	accept,
+	acceptFile,
+	uploader,
+	extractors: [
+		getGenericFileMetadataExtractor<TEntity>({
+			fileNameField,
+			fileSizeField,
+			fileTypeField,
+			lastModifiedField,
+		}),
+		getVideoFileDataExtractor<TEntity>({
+			widthField,
+			heightField,
+			durationField,
+		}),
+		getFileUrlDataExtractor<TEntity>({
+			urlField,
+		}),
+		...extractors,
+	],
+})

package/src/fileTypes/index.ts

@@ -0,0 +1,4 @@
+export { createImageFileType, type CreateImageFileTypeProps } from './createImageFileType.js'
+export { createVideoFileType, type CreateVideoFileTypeProps } from './createVideoFileType.js'
+export { createAudioFileType, type CreateAudioFileTypeProps } from './createAudioFileType.js'
+export { createAnyFileType, type CreateAnyFileTypeProps } from './createAnyFileType.js'

package/src/hooks/index.ts

@@ -0,0 +1,2 @@
+export { useUploaderStateFiles, type StateFilter } from './useUploaderStateFiles.js'
+export { useS3Client } from './useS3Client.js'

package/src/hooks/useS3Client.ts

@@ -0,0 +1,26 @@
+import { useMemo } from 'react'
+import { useBindxContext } from '@contember/bindx-react'
+import { S3UploadClient, type S3UploadClientOptions } from '../uploadClient/S3UploadClient.js'
+import { createContentApiS3Signer } from '../utils/urlSigner.js'
+
+/**
+ * Creates an S3 upload client using the current Contember GraphQL client.
+ * Uses the bindx context to get the GraphQL client for URL signing.
+ */
+export const useS3Client = (options: Partial<S3UploadClientOptions> = {}): S3UploadClient => {
+	const { adapter } = useBindxContext()
+
+	return useMemo(() => {
+		// Get the GraphQL client from the adapter
+		// ContemberAdapter has a graphQlClient property
+		const graphQlClient = (adapter as { graphQlClient?: { execute: (query: string, options?: unknown) => Promise<unknown> } }).graphQlClient
+		if (!graphQlClient) {
+			throw new Error('useS3Client requires a Contember adapter with GraphQL client')
+		}
+
+		return new S3UploadClient({
+			signUrl: createContentApiS3Signer(graphQlClient as Parameters<typeof createContentApiS3Signer>[0]),
+			...options,
+		})
+	}, [adapter, options])
+}

package/src/hooks/useUploaderStateFiles.ts

@@ -0,0 +1,22 @@
+import { useMemo } from 'react'
+import type { UploaderFileState } from '../types.js'
+import { useUploaderState } from '../contexts.js'
+
+export type StateFilter = UploaderFileState['state'] | UploaderFileState['state'][]
+
+/**
+ * Filters uploader state by state type.
+ * Returns an array of matching file states.
+ */
+export const useUploaderStateFiles = (stateFilter?: StateFilter): UploaderFileState[] => {
+	const files = useUploaderState()
+
+	return useMemo(() => {
+		if (!stateFilter) {
+			return files
+		}
+
+		const filterArray = Array.isArray(stateFilter) ? stateFilter : [stateFilter]
+		return files.filter(file => filterArray.includes(file.state))
+	}, [files, stateFilter])
+}