<📸 class="w-4 h-4 text-white">
Mobile Photo Upload

📱 MOBILE DEVICE PHOTO UPLOAD

NeuralAI APIs natively support uploading photos and images from mobile devices (iOS/Android). You can analyze images, extract text (OCR), describe content, or use them as context for AI responses.

📤 Method 1: HTML5 File Input (Simple)

The simplest method to allow mobile photo upload is to use an HTML5 file input with the attribute accept="image/*" and capture.

html
<!-- Pulsante per scattare/selezionare foto da mobile -->
<input 
  type="file" 
  id="photoInput"
  accept="image/*"
javascript
// Gestione upload foto da mobile
const photoInput = document.getElementById('photoInput');

photoInput.addEventListener('change', async (event) => {
  const file = event.target.files[0];

🎯 Method 2: Drag & Drop Zone (Advanced UX)

For a more modern user experience, implement a drag & drop zone that also supports tap on mobile.

html
<!-- Drop zone per upload foto -->
<div 
  id="dropZone" 
  class="drop-zone"
  onclick="document.getElementById('photoInput').click()"

⚛️ Method 3: React Component (Recommended)

If you use React, create a reusable component with state, preview and error handling.

jsx
import { useState, useRef } from 'react';

function MobilePhotoUploader({ onImageUploaded, apiKey }) {
  const [preview, setPreview] = useState(null);
  const [uploading, setUploading] = useState(false);

💡 Use Cases for Mobile Photo Upload

📝 OCR - Estrazione Testo

"Estrai tutto il testo visibile in questa immagine"

Documenti, biglietti da visita, insegne

🖼️ Descrizione Immagine

"Descrivi in dettaglio cosa vedi in questa foto"

Accessibilità, catalogazione, social

🔍 Riconoscimento Oggetti

"Elenco tutti gli oggetti riconoscibili in questa immagine"

Inventario, e-commerce, ricerca

🎨 Analisi Artistica

"Analizza lo stile artistico, i colori e la composizione"

Arte, fotografia, design

📊 Lettura Grafici

"Analizza questo grafico e estrai i dati principali"

Report, dashboard, presentazioni

🔢 Risoluzione Problemi

"Risolvi questo problema matematico mostrato nell'immagine"

Education, tutoring, esercizi

📚 Complete Example: Web Mobile App

A complete example of HTML page optimized for mobile with photo upload and AI analysis.

html
<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

⚠️ Important Notes

  • HTTPS required — Mobile camera only works on HTTPS or localhost
  • Supported formats — JPG, PNG, WEBP, GIF, HEIC (iOS)
  • Max size — 10MB per image (<5MB recommended for speed)
  • Permissions — Browser will request camera permission on first use
  • Supported browsers — Safari iOS 14+, Chrome Android 80+, Edge Mobile
  • File URLs expire — Uploaded file URLs expire after 1 hour - download them for permanent use

💡 Mobile Best Practices

  • Use capture="environment" for rear camera (better default)
  • Always show a preview before sending to AI
  • Implement visual feedback during loading (spinner, progress bar)
  • Compress images client-side if they exceed 5MB (use canvas or libraries like browser-image-compression)
  • Handle errors in a user-friendly way with clear messages
  • Allow user to retry if upload fails
  • Temporarily save analyzed images in localStorage for history

💰 Image Analysis Token Costs

  • Image analysis (chat with file) — 20 tokens
  • OCR (text extraction) — 20 tokens
  • Detailed description — 20 tokens
  • Object recognition — 20 tokens
  • File upload — ✅ Free (only API consumption for analysis)