Skip to main content

​
Overview

Invoice OCR supports multiple ways to upload your invoices for processing. The upload interface provides drag-and-drop functionality, file browser selection, and accepts both images and PDF documents.

​
Supported File Formats

The system accepts the following file types:

Images

  • PNG (.png)
  • JPEG (.jpg, .jpeg)
  • Other standard image formats
  • Maximum size: 10MB

PDFs

  • PDF documents (.pdf)
  • Multi-page PDFs supported
  • Maximum size: 10MB
The system automatically detects whether your upload is an image or PDF and configures the processing pipeline accordingly.

​
Upload Methods

​
Method 1: Drag and Drop

The fastest way to upload invoices is using drag and drop:
1

Locate your invoice file

Open your file browser and locate the invoice image or PDF you want to process.
2

Drag the file

Click and hold the file, then drag it over the upload area in the Invoice OCR interface.The upload area will highlight with a blue border and scale slightly when you hover over it with a file.
3

Drop to upload

Release the mouse button to drop the file. The system will immediately preview your document.
The upload area displays “Drop your invoice here” when you’re dragging a file over it.

​
Method 2: File Browser

Alternatively, you can use the traditional file browser:
1

Click Browse Files button

Click the Browse Files button in the center of the upload area.
2

Select your file

A file picker dialog will open. Navigate to your invoice file and select it.
3

Confirm selection

Click Open in the file picker. Your invoice will be loaded and previewed.

​
File Information Display

Once uploaded, Invoice OCR displays key information about your file: 
// Source: components/ocr-uploader.tsx:400-405
<div>
  <p className="font-medium">{file?.name || "Document uploaded"}</p>
  <p className="text-sm text-muted-foreground">
    {file && (file.size / 1024).toFixed(1)} KB • {isPdf ? "PDF" : "Image"}
  </p>
</div>
  • File name: Original name of your uploaded file
  • File size: Displayed in KB for easy reference
  • File type: Automatically detected as “PDF” or “Image”

​
Changing the Uploaded File

If you need to upload a different invoice:
  1. Click the Change button next to the file information
  2. Select a new file using the file picker
  3. The previous file will be replaced, and the preview will update
Changing the file will clear any previous extraction results. You’ll need to click Extract Data again to process the new file.

​
Upload Area States

The upload area provides visual feedback for different states:
StateAppearanceDescription
EmptyGray dashed borderReady to accept a file
DraggingBlue border, scaled upFile is being dragged over the area
UploadedGreen border, gradient backgroundFile successfully loaded

​
File Validation

The system performs automatic validation: 
// Source: components/ocr-uploader.tsx:134-142
const files = e.dataTransfer.files;
if (files && files.length > 0) {
  const f = files[0];
  if (f.type.startsWith("image/") || f.type === "application/pdf") {
    handleFile(f);
  } else {
    setError("Please upload an image or PDF file");
  }
}
If you attempt to upload an unsupported file type, you’ll see an error message: “Please upload an image or PDF file”

​
Keyboard Shortcuts

For faster workflow, use keyboard shortcuts:
ShortcutActionDescription
⌘K / Ctrl+KShow shortcutsDisplay all available keyboard shortcuts
⌘↵ / Ctrl+EnterExtract dataProcess the uploaded invoice (when file is ready)
⌘⇧C / Ctrl+Shift+CClear allRemove the uploaded file and reset the interface
Press ⌘K or Ctrl+K at any time to see the full list of keyboard shortcuts in a modal overlay.

​
Next Steps

After uploading your invoice:

Configure Options

Select AI model, extraction mode, and schema format before processing

Extract Data

Click the Extract Data button to process your invoice with AI

​
Troubleshooting

​
File too large

Problem: Your file exceeds the 10MB limit. Solution:
  • Compress the image using tools like TinyPNG or ImageOptim
  • For PDFs, use PDF compression tools or reduce the resolution
  • If the invoice has multiple pages, consider splitting it

​
File not accepted

Problem: The upload area rejects your file. Solution:
  • Verify the file extension is .png, .jpg, .jpeg, or .pdf
  • Check that the file isn’t corrupted (try opening it in another application)
  • Ensure the file has the correct MIME type

​
Preview not showing

Problem: File uploads but no preview appears. Solution:
  • Refresh the page and try uploading again
  • Try a different browser
  • Check browser console for errors (F12 → Console tab)

Build docs developers (and LLMs) love

Get started for freeTalk to us