# Web File Upload: MIME Types Handling

## Problem

When uploading files from Flutter Web, the browser may send incorrect MIME types:
- PNG files may be sent as `application/octet-stream` instead of `image/png`
- Server-side validation using only `content_type` fails

## Solution

Update backend to check **both MIME type and file extension**:

```python
# FastAPI example
from fastapi import HTTPException

@app.post("/upload")
async def upload_file(file: UploadFile):
    # Allowed MIME types and extensions
    allowed_types = ["image/png", "image/jpeg", "image/jpg", "application/octet-stream"]
    allowed_exts = ["png", "jpg", "jpeg"]
    
    # Get file extension
    file_ext = (file.filename or "").lower().split('.')[-1] if file.filename else ""
    
    # Check MIME type OR extension
    if file.content_type not in allowed_types and file_ext not in allowed_exts:
        raise HTTPException(
            status_code=400,
            detail=f"Unsupported file type: {file.content_type} (extension: .{file_ext}). Only PNG/JPG allowed."
        )
    
    # Process file...
```

## Flutter Web: Read File as Bytes

```dart
import 'package:image_picker/image_picker.dart';
import 'package:http/http.dart' as http;

Future<void> uploadImage(XFile? image) async {
  if (image == null) return;
  
  final request = http.MultipartRequest(
    'POST',
    Uri.parse('http://your-api/upload'),
  );
  
  // ✅ Web-compatible: use fromBytes instead of fromPath
  final bytes = await image.readAsBytes();
  request.files.add(
    http.MultipartFile.fromBytes(
      'file',
      bytes,
      filename: image.name,
    ),
  );
  
  final response = await request.send();
  // Handle response...
}
```

## Key Points

- **Don't rely solely on MIME type** in Web uploads
- **Always check file extension** as fallback
- **Accept `application/octet-stream`** for Web uploads
- **Use `MultipartFile.fromBytes()`** in Flutter Web (not `fromPath`)