Receipts for expense tracking
The user scans a crumpled receipt, the scanner flattens and crops it, and your backend stores the file and extracts amount, date and merchant with OCR or an AI model.
What users scan in vibe-coded apps
Contracts and signed forms
Multi-page scans of leases, consent forms or onboarding paperwork go straight into the client record instead of arriving by email as blurry photos.
Field work and deliveries
Delivery notes, inspection sheets, handwritten work orders: crews scan on site and the office sees a clean, readable document a minute later.
No new UI to build
The scanner hooks into every standard <input type="file">. If Lovable already has an upload button, the scan entry appears there as soon as the setting is on.
Prompt for Lovable
Paste this into Lovable to implement the web-app side. Review the result, publish, then test inside the WebViewGold app.
Prompt to paste into Lovable
Make the receipt upload ready for the native document scanner in our WebViewGold app. 1) Change the receipt file input to accept="image/*,application/pdf" and keep it a standard input type="file" (no drag-and-drop-only widget). 2) Upload files to a private Supabase Storage bucket receipts under the path user_id/uuid with the original extension, allowing application/pdf, image/jpeg and image/png up to 20 MB. 3) Create a documents table (id, user_id, path, mime_type, status, amount, merchant, receipt_date) with row-level security for the owner only. 4) After upload, call an edge function extract-receipt that reads the file with the service role, sends it to our OCR or AI extraction provider using a secret, and updates amount, merchant and receipt_date. 5) Show a progress bar during upload and a status chip (processing, done, failed). 6) When navigator.userAgent contains WebViewGold, label the button "Scan or upload receipt"; in a browser label it "Upload receipt". 7) Display stored files only via signed URLs.
My iOS WebView is finally approved. Thanks!!
Switch it on and make your uploads scan-friendly
Half an hour, including a test on two phones.
Enable the setting
iOS:
var kVisionKitEnable = truein Config.swift. Android:ENABLE_ML_KIT_DOCUMENT_SCANNER = truein Config.java. Set either one to false to hide the entry again.Accept PDFs as well as images
Android returns a PDF of up to 5 pages per scan, and the upload dialog adapts its entries to the input's
acceptattribute. Use something likeaccept="image/*,application/pdf"and make sure your upload code and storage acceptapplication/pdf.Allow realistic file sizes
A multi-page scan is larger than a profile photo. Check the size limits of your upload route and storage bucket, and show progress while the file travels over mobile data.
Write an honest camera purpose string
The scanner uses the camera, so the camera usage description should mention documents, for example "to scan receipts and attach them to your expense reports".
Test on real devices
iOS needs iOS 18.4 or later and a device that supports the VisionKit document camera; elsewhere the entry hides itself. Android needs Google Play Services. Simulators and emulators are not a realistic test.
iOS and Android at a glance
| iOS | Android | |
|---|---|---|
| Scanner | Apple VisionKit document camera | Google ML Kit Document Scanner |
| Setting | kVisionKitEnable in Config.swift | ENABLE_ML_KIT_DOCUMENT_SCANNER in Config.java |
| Entry in the upload dialog | Scan Document, next to Camera and Photo Library | Scan document, next to the photo, video and gallery entries the accept attribute allows |
| What your input receives | The finished scan, like any uploaded file | A PDF, up to 5 pages per scan |
| Requirements | iOS 18.4 or later on a supported device | Google Play Services |
| Built in | Edge detection, cropping, enhancement, additional pages | Edge detection, cropping, enhancement, additional pages, gallery import |
An upload handler that is ready for scans
Works for photos, scans and PDFs, in the browser and in the app. Point /api/documents at your upload route; for your Lovable app that lives in: Supabase or Lovable Cloud (Postgres, storage, edge functions).
javascript
// <input type="file" id="doc" accept="image/*,application/pdf">
document.getElementById("doc").addEventListener("change", async function (e) {
var file = e.target.files && e.target.files[0];
if (!file) return;
var isPdf = file.type === "application/pdf" || /\.pdf$/i.test(file.name);
if (file.size > 20 * 1024 * 1024) { showError("That scan is too large. Try fewer pages."); return; }
var form = new FormData();
form.append("file", file, file.name || (isPdf ? "scan.pdf" : "scan.jpg"));
showStatus("Uploading " + (isPdf ? "document" : "photo") + "…");
var res = await fetch("/api/documents", { method: "POST", body: form });
showStatus(res.ok ? "Saved. We are reading it now." : "Upload failed. Please try again.");
});Review and privacy checklist
- Guideline 4.2: a camera scanner with edge detection is something a website cannot offer on iPhone. Mention it in the review notes and show it in a screenshot.
- App Privacy and Data safety: if scans are uploaded and stored, declare them (for example "Other User Content" on Apple, "Files and docs" on Google Play) together with the purpose you use them for.
- Scans of IDs, bank statements or medical forms are sensitive: keep storage private, serve files through short-lived links and let users delete their documents (the account deletion guide).
- Give the reviewer a demo account that reaches an upload screen; otherwise they never see the scanner.
Frequently asked questions
Do I have to change my web app for the document scanner?
Usually not. Every standard file input gets the scan entry once the setting is on. Check that the input accepts PDF as well as images, because Android returns a PDF, and that your upload limit allows multi-page files.
Which file format do I receive?
On Android a PDF with up to 5 pages per scan. On iOS the VisionKit scan arrives through the same file input; accept both images and PDFs and test the result on a device before you build anything that depends on the format.
Does the scanner read the text (OCR)?
The scanner captures, crops and enhances the pages. Reading the text is up to your backend: send the uploaded file to an OCR or AI extraction service on the server and store the result next to the document.
Why is Scan Document missing on some iPhones?
The iOS entry needs iOS 18.4 or later and a device that supports the VisionKit document camera. On other devices it is hidden automatically and users still see Camera and Photo Library.
Does scanning cost anything per page?
No. VisionKit is part of iOS and the ML Kit Document Scanner runs through Google Play Services, so there are no per-scan fees. Costs only appear if you send the files to a paid OCR or AI service.
Three ways to get your app into the stores
Same result, different amount of work on your side. All three come with the approval guarantee and 24/7 human support.
Do it yourself
$109 per platform, one-time
The WebViewGold license: a finished Xcode or Android Studio project. Paste your URL, set name and icon, switch on features, build and submit. Free updates forever.
See plans on the main pageCloud Builder
$349 per license, one-time add-on
No Mac, no Xcode, no Android Studio: configure in the browser, we build both apps in the cloud and hand them to App Store Connect and the Play Console.
How the Cloud Builder works Try the free demoFull Service
$698 per platform $798
Send us your URL and icon. Our team configures, builds and delivers your app within 72 hours, white-label, with source projects. Both platforms for $1,158.
Full Service details Powered by
Winter Sale prices valid until December 31, 2026.