tiny-essentials
Version:
Collection of small, essential scripts designed to be used across various projects. These simple utilities are crafted for speed, ease of use, and versatility.
80 lines • 2.93 kB
text/typescript
export default TinyUploadClicker;
export type UploaderConfig = {
/**
* -
* Single or multiple elements (or selectors) that will act as upload triggers.
*/
triggers: string | HTMLElement | Array<string | HTMLElement>;
/**
* -
* Whether to allow selection of multiple files.
*/
multiple?: boolean | undefined;
/**
* -
* A comma-separated list of accepted file types (e.g., ".png,.jpg" or "image/*").
*/
accept?: string | string[] | undefined;
/**
* -
* Additional attributes to apply to the created `<input type="file">`.
*/
inputAttributes?: Record<string, string> | undefined;
/**
* -
* Inline CSS styles to apply to the hidden input. Default hides the element.
*/
inputStyles?: Partial<CSSStyleDeclaration> | undefined;
/**
* -
* Callback executed when a trigger is clicked (before the file dialog opens).
*/
onClick?: ((triggerElement: HTMLElement) => void) | null | undefined;
/**
* -
* Callback executed when files are selected through the file input.
*/
onFileLoad?: ((files: FileList, triggerElement: HTMLElement) => void) | null | undefined;
};
/**
* TinyUploadClicker is a lightweight utility class for attaching custom clickable elements
* (like buttons, divs, icons, etc.) that trigger hidden file input elements.
*
* It provides full control over the input file element without needing to display it,
* and allows per-trigger customization, style injection, and event handling.
*
* Each trigger element creates its own associated hidden file input, enabling multiple
* upload zones with different behaviors. You can handle `onClick` and `onFileLoad` callbacks,
* define accepted file types, allow multiple selections, and cleanly destroy everything via `destroy()`.
*
* Designed for maximum flexibility in pure JavaScript environments, including dynamic UI rendering.
*
* @example
* const uploader = new TinyUploadClicker({
* triggers: '#uploadBtn',
* accept: ['.png', '.jpg'],
* multiple: true,
* inputAttributes: { 'data-tracker': 'upload' },
* inputStyles: { display: 'none' },
* onClick: (el) => console.log('Trigger clicked:', el),
* onFileLoad: (files, el) => console.log('Files selected:', files)
* });
*
* // Later, if needed:
* uploader.destroy();
*/
declare class TinyUploadClicker {
/**
* Creates a new instance of TinyUploadClicker.
*
* @param {UploaderConfig} options - Configuration object for customizing the uploader behavior and appearance.
* @throws {TypeError} If the config is invalid or required options are missing.
*/
constructor(options: UploaderConfig);
/**
* Cleans up all internal elements and event listeners, removing created inputs and breaking references.
*/
destroy(): void;
#private;
}
//# sourceMappingURL=TinyUploadClicker.d.mts.map