# mymPond 🚀

[![npm version](https://img.shields.io/npm/v/mympond.svg?style=flat-square)](https://www.npmjs.com/package/mympond)
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/mympond/badge)](https://www.jsdelivr.com/package/npm/mympond)
[![license](https://img.shields.io/github/license/cdnjs/cdnjs.svg?style=flat-square)](https://github.com/your-username/mympond/blob/main/LICENSE)

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:

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/mympond@1/src/mympond.js"></script>

---

## 🚀 Quick Start

### HTML Setup

<div id="my-uploader"></div>

### 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 <span class="text-blue-600 underline cursor-pointer">Browse</span>',
        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