Directus Form To Flow Extension

A Directus endpoint extension that receives HTML form data (multipart/form-data or application/x-www-form-urlencoded) and forwards it to a Directus flow in JSON format.

📋 Description

This extension acts as a bridge between classic HTML forms and Directus flows. It automatically converts received data to JSON format and forwards it to the specified flow, facilitating the integration of external forms with your Directus instance.

✨ Features

• Multi-format support: Handles both multipart/form-data and application/x-www-form-urlencoded forms
• File handling: Automatically processes file uploads and encodes them in base64
• Transparent forwarding: Preserves cookies and URL parameters
• Error handling: Returns appropriate responses on failure
• HTTPS compatible: Automatically detects the protocol used, even behind a proxy
• Logging: Logs flow triggers and errors for easier debugging

📖 Usage

Endpoint

POST /formtoflow/:id

Where :id corresponds to the Directus flow ID you want to trigger.

HTML Form Example

<form action="/formtoflow/YOUR_FLOW_ID" method="POST" accept-charset="UTF-8" enctype="multipart/form-data">
    <input type="text" name="name" placeholder="Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="file" name="document">
    <textarea name="message" placeholder="Message"></textarea>
    <button type="submit">Submit</button>
</form>

Example Data Sent to Flow

The data received by the flow will be in JSON format:

{
    "name": "John Doe",
    "email": "[email protected]",
    "message": "Here is my message",
    "document": {
        "buffer": "[Base64 data]",
        "originalname": "document.pdf",
        "mimetype": "application/pdf"
    }
}

⚙️ How It Works

1. Reception: The endpoint receives form data
2. Parsing: Data is parsed according to its content type
3. Transformation: Files are converted to base64 with their metadata
4. Forwarding: JSON data is sent to the Directus flow, preserving cookies and URL parameters
5. Response: The flow's response is returned to the client

🔧 Configuration

No specific configuration is required. The extension uses:

• multer for multipart file handling
• body-parser for URL-encoded data
• node-fetch for requests to flows

📝 Important Notes

• URL parameters are preserved when forwarding to the flow
• Session cookies are transmitted for authentication
• Errors are logged to the Directus console
• The extension automatically detects the protocol (HTTP/HTTPS), including behind proxies

🐛 Error Handling

• 500: Internal server error
• Flow status: Returns the flow's status code on failure
• Detailed logging in the console for debugging

🔒 Security

• Session cookies are transmitted for authentication
• No server-side validation: validation should be done in the flow
• Use Directus permissions to control access to flows

📦 Dependencies

• @directus/extensions-sdk
• node-fetch
• multer
• body-parser

🤝 Contributing

This extension can be extended to:

• Add server-side validation
• Implement custom data transformations
• Add more detailed logging
• Support other data formats

📄 License

MIT Dan Denolf