File Text - Directus Extension

A text input field that supports both manual text input and file drag & drop, automatically reading file content and filling it into the input field.

Features

• 📝 Text Input: Support for multi-line text input
• 📁 File Drag & Drop: Drag and drop files to the input area
• 📂 File Selection: Click to select files from file picker
• 🔍 Auto Read: Option to automatically read file content
• ✅ File Validation: Support for file type and size restrictions
• 🎨 Beautiful UI: Modern drag & drop area and file information display
• 🌐 Internationalization: Support for multiple languages

Installation

npm install @elecerp/directus-extension-filetext-interface

Usage

1. Configure Field in Directus

1. Create a text type field
2. Select "File Text" interface in field settings
3. Configure related options

2. Configuration Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | placeholder | string | "Please enter text or drag files here" | Input field placeholder text | | acceptFileTypes | string | ".txt,.md,.json,.csv" | Accepted file types, supports extensions and MIME types | | maxFileSize | number | 10 | Maximum file size (MB) | | showFileInfo | boolean | true | Whether to show file information | | autoReadFile | boolean | true | Whether to automatically read file content |

3. Supported File Types

• Text files: .txt, .md, .log
• Code files: .js, .ts, .py, .java, .c, .cpp
• Data files: .json, .csv, .xml
• Markup files: .html, .css, .sql

Features Description

File Drag & Drop

• Drag files to the dashed border area
• Supported files will automatically display file information
• If auto-read is enabled, file content will automatically fill the text field

File Selection

• Click "Select File" button to choose files
• Support for file type filtering
• File size validation

Text Editing

• Support for multi-line text input
• Real-time content saving
• Clear text functionality

Error Handling

• Display error messages for unsupported file types
• Display error messages for oversized files
• Display error messages for file reading failures

Development

Build

npm run build

Development Mode

npm run start

Technical Implementation

• Vue 3: Using Composition API
• Directus Extensions SDK: 9.5.2+
• File API: Using FileReader API to read file content
• Drag & Drop API: Using HTML5 Drag and Drop API

Publishing

1. Update version number
2. Build project: npm run build
3. Publish to npm: npm publish --access=public

License

MIT License

Contributing

Welcome to submit Issues and Pull Requests!

Changelog

v1.0.0

• Initial version
• Support for file drag & drop and selection
• Support for text input and editing
• Support for file type and size validation
• Support for automatic file content reading