mymPond 🚀

File management UX/UI component library built with Vanilla JS. Lightweight, zero-dependency alternative to FilePond.

✨ Features

• ⚡ Zero Dependencies: Pure Vanilla JavaScript.
• 🎨 Tailwind CSS Ready: Styled out-of-the-box with clean Tailwind utility classes.
• 📦 Multi-file & Single-file Support: Configurable upload modes.
• 🖼️ Image Previews & Smart Icons: Dynamic thumbnails with automatic Blob URL memory cleanup (URL.revokeObjectURL).
• 🗑️ Clear All Support: Convenient batch file removal in multi-file mode.
• 📐 File Validations: Easy limit handling for maxFileSize, maxFiles, and accept formats.

📦 Installation

1. via npm

npm install mympond

2. via CDN (jsDelivr)

Include Tailwind CSS and mymPond directly in your HTML:

🚀 Quick Start

HTML Setup

JavaScript Initialization

import mymPond from 'mympond';

const pond = new mymPond('#my-uploader', { allowMultiple: true, maxFiles: 5, maxFileSize: 2 * 1024 * 1024, accept: 'image/*', autoUpload: true, uploadUrl: '/api/upload', labels: { idle: 'Drag & Drop files or Browse', removeAll: 'Clear All Files' }, onAddFile: (err, file) => console.log('Added:', file.name), onRemoveFile: (err, file) => console.log('Removed:', file.name), onProcessFile: (err, result) => console.log('Upload result:', result) });

⚙️ Options & Configurations

| Option | Type | Default | Description | | :--- | :--- | :--- | :--- | | allowMultiple | Boolean | false | Enable multiple file selection | | autoUpload | Boolean | true | Upload automatically upon file drop/selection | | maxFiles | Number | null | Maximum allowed number of files | | maxFileSize | Number | null | Maximum file size in bytes | | accept | String | '*' | Accepted MIME types | | uploadUrl | String | '' | Endpoint URL for handling uploads |

🛠️ API Methods

const files = pond.getFiles(); pond.upload(); pond.removeFiles(); pond.disable(); pond.enable();

📄 License

This project is licensed under the MIT License - see the author details below.

Author: Muhammed YILMAZ