File & Image Uploads

Let visitors send photos, screenshots, and PDF documents directly in the chat — the AI sees, reads, and responds.

What It Does

When enabled, a 📎 attachment button appears in the chat widget. Visitors can attach a file alongside their message, and the AI processes it in real time:

• Images (JPG, PNG, WebP) — sent to the AI model's vision capability. The model literally sees the image and can describe it, answer questions about it, or extract information from it.
• PDF documents — text is extracted automatically and injected into the conversation context, so the AI can read, summarize, or answer questions about the document.

What Can the AI See?

AI vision models are remarkably capable. Here's what they can identify and understand:

Setup (2 Steps)

1. Enable on Your Bot

1. Go to AxiaChat AI → Bots
2. Edit your bot and scroll to the "File Upload" section
3. Toggle on "Allow file uploads from chat"

2. Configure Options

Select only the types that make sense for your use case. For example, a legal bot might only need PDF; a home renovation bot might only need images.

How It Works Internally

1. Visitor clicks 📎, selects a file, and writes their message
2. The file is uploaded via AJAX and validated (type, size, security checks)
3. Images are automatically optimized (resized to max 1536px, compressed) to reduce API costs and speed up processing
4. PDFs have their text extracted (up to 50,000 characters)
5. The processed content is passed to the AI model alongside the user's question
6. A thumbnail preview appears in the user's message bubble so both parties see what was sent
7. The AI responds based on both the message text and the file content

AI Provider Compatibility

All three supported providers handle file uploads, but each has different strengths for vision analysis:

For image analysis, use a vision-capable model. Older text-only models (GPT-3.5, etc.) will ignore the image.

Real-World Use Cases

File uploads transform your chatbot from a text-only assistant into a visual + document-aware agent. Here are practical examples:

🏠 Home Services & Renovation

⚖️ Legal & Professional Services

🏢 Corporate Intranet & Internal Use

🛒 E-commerce & Product Support

🎓 Education & Training

🏥 Healthcare & Wellness

🔧 Technical & Field Services

What Visitors See

The upload experience is designed to feel natural:

1. A 📎 clip icon appears to the left of the send button
2. After selecting a file, a preview bar shows the file name (and thumbnail for images) above the input
3. The visitor types their question and hits send
4. The sent message shows a small thumbnail (for images) or a file indicator (for PDFs) attached to their message bubble
5. The AI responds, referencing the file content in its answer

Admin Logs

When file uploads are used, the admin conversation logs reflect this:

• The logs list shows a 📎 icon next to conversations that contain file attachments
• The conversation detail page shows a thumbnail preview (clickable to view full size for images) next to the user's message

This makes it easy to review conversations where documents or images were exchanged.

PDF & Document Analysis

When a visitor uploads a PDF, AxiaChat extracts the text content (up to 50,000 characters) and injects it as conversation context. The AI can then:

• Summarize — "Give me a summary of this contract in 5 bullet points"
• Find specific info — "What's the payment deadline in this invoice?"
• Compare — "Does this document mention any penalties for early termination?"
• Explain — "What does clause 4.2 mean in plain language?"
• Extract data — "List all the dates and amounts mentioned in this document"

PDF Examples by Industry

Writing Effective Bot Instructions

The key to getting great results from vision analysis is writing clear bot instructions in Training → Instructions. Here are tested templates:

General-purpose vision instructions

When a user sends an image, carefully analyze everything visible:
objects, text, colors, layout, condition, and context. Describe what
you see in detail, then answer the user's question based on your
observations. If you're uncertain about something, say so.

Product support bot

If the user sends a photo of a product:
1. Identify the product model if visible (check labels, model numbers)
2. Assess the condition (new, used, damaged)
3. If damaged, describe the damage and advise on warranty or return
4. If they're asking about compatibility, check against our catalog

Always be empathetic if reporting a defect. Offer to start a return
or connect them with support if needed.

Home services quote bot

When visitors send photos of their home or property:
- Describe what you see (room type, dimensions if estimable, condition)
- Identify any issues (damage, wear, outdated fixtures)
- Provide a rough cost range based on typical project pricing
- ALWAYS mention that an on-site visit is required for an exact quote
- Offer to schedule a free assessment visit

Use warm, helpful language. Don't be alarmist about damage.

Document review bot

When the user uploads a PDF:
- Read the full document carefully
- Identify the document type (contract, invoice, report, etc.)
- Answer the user's specific question based on the document content
- Highlight important dates, amounts, or deadlines if relevant
- If the document contains legal terms, explain them in plain language
- NEVER provide legal, medical, or financial advice — suggest they
  consult a professional for important decisions

Internal corporate assistant

Employees may send screenshots, reports, or internal documents.
When analyzing:
- Extract key data points and present them clearly
- Reference internal procedures from the knowledge base when relevant
- For error screenshots, check the known issues database first
- For spreadsheet data, identify trends and anomalies
- Always format output clearly with bullet points or tables

You are an internal assistant — be direct, concise, and action-oriented.

Tips for Best Results

For image uploads

• Good lighting matters — tell visitors to use well-lit photos for best analysis
• Close-up for details — if the AI needs to read text or see damage, closer is better
• One subject per photo — focused images get better results than cluttered scenes
• AxiaChat auto-optimizes — images are resized to 1536px max and compressed, so visitors don't need to worry about file size

For PDF uploads

• Text-based PDFs work best — documents created digitally (Word, Google Docs) extract perfectly
• Scanned PDFs may not work — if the PDF is an image scan, suggest taking a photo instead
• Up to 50,000 characters — very long documents are truncated; for shorter documents, the full text is analyzed
• Multi-page support — the AI receives all extracted text, so it can answer about any section

For bot builders

• Be specific in instructions — tell the bot exactly what to look for ("if the user sends a photo of a broken product...")
• Provide context — the AI works better when it knows your business ("we are a home renovation company specializing in kitchens and bathrooms")
• Set boundaries — clearly state what the bot should NOT do ("never provide medical diagnoses")
• Combine with tools — pair vision analysis with lead capture ("after analyzing the photo, collect the visitor's contact details for a follow-up")

Example Conversations

Complete conversation flows showing the feature in action:

Scenario 1: Home renovation quote

Scenario 2: Product defect report

Scenario 3: Document analysis

Security & Privacy

• 🔐 No public URLs — uploaded images are stored securely as base64 in the database, never as publicly accessible files on disk
• 🔒 Admin-only access — only authenticated administrators can view uploaded images in the conversation logs
• 🛡️ File validation — MIME types are verified server-side; only explicitly allowed file types are accepted
• 📏 Size limits — configurable per bot (1–20 MB), enforced both client-side and server-side
• 🧹 Minimal retention — files exist in memory for the AI call; the optimized image is stored in the database for admin review only
• ✅ GDPR — the same consent flow applies to file uploads as to text messages

Troubleshooting

Clip icon doesn't appear

• Make sure "Allow file uploads from chat" is enabled in your bot's settings
• Check that at least one file type is selected

Upload fails with an error

• Verify the file is within the size limit (default: 5 MB)
• Check that the file extension matches one of the allowed types
• Server-side: ensure PHP upload_max_filesize and post_max_size are large enough in your php.ini

AI doesn't reference the image

• Use a vision-capable model (GPT-4o, Claude Sonnet, Gemini Pro)
• Older text-only models (GPT-3.5, etc.) cannot process images — they will ignore the visual content
• Add explicit instructions telling the bot to analyze attached images

PDF text not extracted

• The PDF might be image-based (scanned document). These contain no extractable text — the AI receives an empty document
• For scanned PDFs, consider taking a photo/screenshot instead, so the AI vision can read it

Integration with Tools, Webhooks & MCP

One of the most powerful aspects of file uploads is how they combine with AI Tools, Custom Webhooks, and MCP Servers. When a visitor sends an image, AxiaChat processes it securely — the AI receives the visual content via base64 and can describe what it sees. It can then pass a description, extracted data, or base64-encoded image data as arguments when calling tools.

How It Works

1. Visitor uploads an image → AxiaChat optimizes it and stores it securely as base64 in the database (never as a public file)
2. The AI model receives the image via its vision capability and analyzes it
3. If a tool/webhook/MCP server is available and relevant, the model calls it — passing a description, extracted data, or image_base64 as arguments
4. The external system receives the data and processes it however it needs

With Custom Webhooks

Go to AxiaChat AI → Tools → Custom Webhooks and create a webhook that includes an image_base64 or image_description parameter in its schema. Example scenarios:

• Zapier/Make/n8n automation: Visitor sends a photo → AI analyzes and calls your webhook with a detailed description → automation platform creates a task
• Damage report system: Insurance customer sends damage photo → AI calls webhook with image_description, severity, and optionally image_base64 → your backend creates a claim
• Product identification: Customer sends product photo → AI identifies it and calls webhook with detected_product and product_id → your CRM logs the inquiry

Webhook schema example:

Parameters:
  - image_description (string, required): "AI-generated description of the uploaded image"
  - image_base64 (string, optional): "Base64-encoded image data for further processing"
  - category (enum: damage|inquiry|feedback): "Type of request"

Bot instructions example:

When a user sends a photo of property damage, analyze the image,
describe the damage you see, and call the report_damage webhook
passing your description and the severity level.

With MCP Servers

If you have MCP Servers connected, the same principle applies. Any MCP tool can receive image descriptions or base64 data as arguments. Examples:

• An internal OCR service that processes base64 image data
• A document management system that archives uploaded files
• A computer vision API that classifies or tags images

With n8n, Zapier & Make

These automation platforms work perfectly via Custom Webhooks:

1. Create a Webhook trigger in n8n/Zapier/Make
2. Copy the webhook URL
3. In AxiaChat, go to Tools → Custom Webhooks and create a new webhook with that URL
4. Add image_description and/or image_base64 as parameters in the schema
5. In your automation, decode the base64 data to reconstruct the image if needed
6. Process it: save to Google Drive, attach to a ticket, send via email, run OCR, etc.

Practical Integration Examples

Compatibility

• ✅ All AI providers (OpenAI, Claude, Gemini)
• ✅ Floating and inline widgets
• ✅ Shortcode and global widget
• ✅ Works alongside all other features (RAG, tools, lead capture, etc.)
• ✅ AI Tools: Custom Webhooks, MCP Servers
• ✅ Automation platforms: Zapier, Make, n8n (via webhooks)