Batch Attachment Downloader for Airtable

A client-side web application that allows you to download all attachments from your Airtable tables in a single ZIP file. Built with React, TypeScript, and Shadcn/ui.

Features

• 🔐 Secure Authentication: Uses Airtable Personal Access Tokens (stored locally only)
• 📦 Batch Download: Download all attachments from selected tables in one ZIP file
• 🔍 Filtering: Apply Airtable formula filters to download specific records
• 📊 Preview: See how many files will be downloaded before starting
• 🎨 Clean UI: Built with Shadcn/ui components for a modern, accessible interface
• 🔒 Privacy First: All processing happens client-side - no data is sent to our servers
• 💾 Smart Naming: Optionally use field values as filenames

How It Works

1. Authenticate: Enter your Airtable Personal Access Token
2. Select Base: Choose the Airtable base you want to work with
3. Select Table: Pick the table containing your attachments
4. Choose Field: Select the attachment field you want to download
5. Optional Settings:
   • Choose a filename field to name downloaded files
   • Add a filter formula to download only specific records
6. Preview: See how many files will be downloaded
7. Download: Click the download button to get all attachments as a ZIP file

Privacy & Security

This application runs entirely client-side.

• ✅ No data is sent to our servers
• ✅ No data is stored on our servers
• ✅ Your Airtable token is stored only in your browser's localStorage
• ✅ When you close the page, all data is deleted
• ✅ All processing happens in your browser

Getting Started

Prerequisites

• Node.js 18+ and npm
• An Airtable account with Personal Access Token

Installation

1. Clone the repository:

git clone <repository-url>
cd batch-file-downloader

2. Install dependencies:

npm install

3. Start the development server:

npm run dev

4. Open your browser to http://localhost:5173

Building for Production

npm run build

The built files will be in the dist directory.

Getting Your Airtable Personal Access Token

1. Go to Airtable Account Settings
2. Navigate to "Developer" → "Personal access tokens"
3. Click "Create new token"
4. Give it a name and select the scopes:
   • data.records:read - Required to read records
   • schema.bases:read - Required to list bases and tables
5. Copy the token and use it in the app

Usage

Basic Usage

1. Enter your Personal Access Token when prompted
2. Select your base, table, and attachment field
3. Click "Download All Attachments"

Using Filters

You can filter records using Airtable formula syntax:

• {Status} = "Active" - Download only active records
• {Created} > "2024-01-01" - Download records created after a date
• AND({Status} = "Active", {Priority} = "High") - Multiple conditions

Custom Filenames

If you select a filename field, downloaded files will be named using that field's value. For example:

• If the filename field contains "Invoice-2024", files will be named Invoice-2024_1.pdf, Invoice-2024_2.pdf, etc.
• If no filename field is selected, files will be named using the record ID

Technical Details

Tech Stack

• React 19 - UI framework
• TypeScript - Type safety
• Vite - Build tool and dev server
• Tailwind CSS - Styling
• Shadcn/ui - UI components
• JSZip - ZIP file creation
• File-saver - File downloads
• Airtable REST API - Data fetching

Architecture

• Client-Side Only: No backend server required
• Component-Based: Modular React components
• Type-Safe: Full TypeScript coverage
• Responsive: Works on desktop and mobile devices

API Usage

The app uses the Airtable REST API:

• GET /meta/bases - List all bases
• GET /meta/bases/{baseId}/tables - List tables in a base
• GET /meta/bases/{baseId}/tables/{tableId} - Get table schema
• GET /{baseId}/{tableId} - Fetch records (with optional filter)

Limitations

• CORS: Some browsers may block direct API calls. If you encounter CORS issues, you may need to use a browser extension or configure CORS on your Airtable base.
• Rate Limits: Airtable API has rate limits. For large datasets, downloads may take time.
• Browser Memory: Very large downloads (thousands of files) may cause browser memory issues.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

License

This project is open source and available under the MIT License.

Support

For issues, questions, or contributions, please open an issue on GitHub.

Credits

Built with ❤️ by useefficiently

---

Note: This is an open source product by useefficiently. We don't store any of your data. Everything runs in your browser.