@stoked-ui/media-selector

Media handling utilities for modern web applications.

Installation

npm install @stoked-ui/media-selector
# or
yarn add @stoked-ui/media-selector
# or
pnpm add @stoked-ui/media-selector

Usage with Next.js

This package is compatible with Next.js but requires some configuration to work with Server Components. There are a few approaches for using it in a Next.js application:

Method 1: Use the client entrypoint

For client components, you can import directly from the client entrypoint:

'use client';
import { App, Stage, WebFile, MediaFile } from '@stoked-ui/media-selector/client';

Method 2: Use the Next.js configuration helper

Add the provided helper to your Next.js configuration:

// next.config.js
const withStokedUI = require('@stoked-ui/media-selector/next.config.js');

/** @type {import('next').NextConfig} */
const nextConfig = {};

module.exports = withStokedUI(nextConfig);

This will add the necessary configuration to transpile the package correctly.

Method 3: Mark components with 'use client'

If you need to use these components in your own client components, make sure to mark them with 'use client':

'use client';
import { App, Stage, MediaFile } from '@stoked-ui/media-selector';

API Documentation

This package provides utilities for handling media files including:

• MediaFile - Base class for media file handling
• App - Base application class
• Stage - DOM manipulation utilities
• WebFile - File handling utilities

For complete API documentation, see the generated docs or source files.

file-selector

A small package for converting a DragEvent or file input to a list of File objects.

Table of Contents

• Installation
• Usage
• Browser Support
• Contribute
• Credits
• Support
• License

Installation

To install this package:

npm add @stoked-ui/media-selector
yarn add @stoked-ui/media-selector
pnpm add @stoked-ui/media-selector

Usage

ES6

Convert a DragEvent to File objects:

import FileWithPath from '@stoked-ui/media-selector/FileWithPath';
document.addEventListener('drop', async evt => {
    const files = await FileWithPath.from(evt);
    console.log(files);
});

Convert a change event for an input type file to File objects:

import FileWithPath from '@stoked-ui/media-selector/FileWithPath';
const input = document.getElementById('myInput');
input.addEventListener('change', async evt => {
    const files = await FileWithPath.from(evt);
    console.log(files);
});

Convert FileSystemFileHandle items to File objects:

import FileWithPath from '@stoked-ui/media-selector/FileWithPath';

// Open file picker
const handles = await window.showOpenFilePicker({multiple: true});
// Get the files
const files = await FileWithPath.from(handles);
console.log(files);

NOTE The above is experimental and subject to change.

CommonJS

Convert a DragEvent to File objects:

const {fromEvent} = require('@stoked-ui/media-selector');
document.addEventListener('drop', async evt => {
    const files = await fromEvent(evt);
    console.log(files);
});

Browser Support

Most browser support basic File selection with drag 'n' drop or file input:

• File API
• Drag Event
• DataTransfer
• <input type="file">

For folder drop we use the FileSystem API which has very limited support:

• DataTransferItem.getAsFile()
• DataTransferItem.webkitGetAsEntry()
• FileSystemEntry
• FileSystemFileEntry.file()
• FileSystemDirectoryEntry.createReader()
• FileSystemDirectoryReader.readEntries()

Contribute

If you wish to contribute, please use the following guidelines:

• Use Conventional Commits
• Use [ci skip] in commit messages to skip a build

Credits

• file-selector

Support

Backers

Support us with a monthly donation and help us continue our activities. [Become a backer]

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor]

License

MIT