To handle file uploads and images properly, store files in dedicated file storage and keep only their reference and details in the database; automatically generate resized versions in modern formats such as WebP; and serve them through a CDN. Limit allowed file types and sizes, keep private files such as IDs and prescriptions behind short-lived links that only authorized people can open, and make sure your backups include files.
- how to handle file uploads in my app
- best image size for product photos online store
- how to make product images load faster
- secure way to store customer id uploads
- should i store images in the database
How do you handle file uploads and images in your app the right way?
Handling file uploads and product images the right way rests on three rules: files go into dedicated file storage, not inside the database; images are resized and converted automatically into the right sizes and formats for each screen; and private files stay protected behind short-lived links and permissions. That keeps your app fast, your customers' data safe and your hosting bill sensible.
Images are usually the heaviest part of a store or app. One photo from a modern phone camera can be several megabytes, and if it is shown as-is on a page with 30 products, a customer on mobile data leaves before the page finishes. Other files, such as an ID photo in a rental app or a prescription in a pharmacy app, carry a completely different kind of risk.
This guide covers both: public images that sell and private files that must be protected. If you are building a store from scratch, start with build an online store with AI.
Where should files live? Storage vs the database
The most common mistake in first apps is saving the image itself inside the database. It bloats the database, slows backups and makes every query heavier. The right approach splits the work:
| What | Where it is stored | Example |
|---|---|---|
| The file itself | Object storage | The original image and its resized versions |
| File reference | Database | File path, linked product, display order |
| Metadata | Database | Size, type, dimensions, who uploaded it and when |
| Alt text | Database | Image description in Arabic and English |
| Access level | Database and server | Public, or private to the owner and staff |
Product images: sizes, formats and automatic resizing
Upload the original once at good quality and let the system generate the versions each screen needs. Common sizes (illustrative; adjust to your design):
| Version | Approximate width | Where it appears |
|---|---|---|
| Thumbnail | 200 to 300 px | Cart, dashboard lists, orders |
| Product card | 500 to 700 px | Category pages and search results |
| Product page | 1000 to 1200 px | The main image on the product page |
| Zoom | 1600 to 2000 px | Loaded only when the customer taps to zoom |
- Format: serve WebP or AVIF to browsers that support them with JPEG as fallback; use PNG only for logos and graphics with transparency.
- Lazy loading: images further down the page load only as the customer approaches them.
- A CDN: serve images through a CDN close to your Gulf customers so they arrive faster.
- Responsive images: phones get the small version and large screens the larger one, part of responsive design.
One aspect ratio makes a tidy store
Choose one ratio for all product photos, square (1:1) or portrait (4:5), and a consistent background. A perfume and oud store, for example, looks professional with one backdrop and similar lighting, as in build a perfume and oud online store. Ask the app to auto-crop to your chosen ratio, with manual adjustment.
The upload experience: what does the uploader see?
Whether the uploader is staff adding products or a customer sending a photo, a good experience cuts errors and support messages:
- 1Pick or capture
On mobile: choose from the gallery or take a photo directly. On desktop: drag and drop several files at once.
- 2Instant validation
A clear message, in Arabic or English, if the type or size is not allowed, before the upload starts rather than after.
- 3Progress bar
Especially on mobile networks, with cancel and retry when the connection drops.
- 4Preview and crop
See the image as it will appear, adjust the crop and reorder by dragging.
- 5Alt text
An optional field to describe the image in both languages, useful for screen readers and search engines.
Private files: IDs, prescriptions and contracts
Some apps need sensitive files: an ID or licence photo in an equipment or car rental app, a prescription in a pharmacy, a lease in a property management app, or a bank transfer receipt. None of these belong behind a public link.
- A permanent public link anyone can open
- All files in one folder with product images
- Every staff member can see every ID
- Files kept forever after they are no longer needed
- Short-lived links that expire in minutes, issued after a permission check
- Private storage separate from public images
- Role-based access with a log of who opened each file
- A defined retention period, then automatic deletion
- Turn on encryption in transit and at rest.
- Check the real file type on the server, not just the extension, and reject executables.
- Strip embedded location data (EXIF) from customer photos that will be shown publicly.
- Explain in your privacy policy which files you collect, why, and when you delete them.
Limits, cost and backups
Storage is relatively cheap, but data transfer and uncompressed images add up. Set limits from the start:
| Rule | Suggested example | Why |
|---|---|---|
| Max product image size | A few MB for the original | Stops pointlessly huge uploads |
| Images per product | 6 to 10 | Enough to sell while keeping the page light |
| Allowed customer file types | JPG, PNG, HEIC and PDF | Blocks risky and useless files |
| Orphaned file cleanup | Weekly | Images of deleted products waste space |
| Private file retention | As needed and per your policy | Lower risk and privacy compliance |
Make sure your backups include files, not just the database; restoring a database that points to missing images does not help. Fanann hosting includes daily backups, and for a full plan read backups and disaster recovery for small businesses.
Build file uploads and images in Fanann
In Fanann you describe the images and files you need, and the agent builds upload, resizing, storage and permissions into your app, then tests them on phone and desktop.
Add a product image and customer file system to my store. Product images: upload from the admin dashboard by drag and drop or from a phone, up to 8 images per product, automatic 1:1 crop with manual adjustment, drag to reorder, alt text in Arabic and English. Automatically generate 300, 700, 1200 and 2000 px wide versions in WebP with JPEG fallback, convert HEIC automatically, and serve images through a CDN with lazy loading. Customer files: an ID photo on the first cash-on-delivery order above a set amount, stored in separate private storage, opened only through a 5-minute link by the store manager, with a log of who opened it, and deleted automatically 90 days after delivery. Check file types on the server, reject anything other than JPG, PNG, HEIC and PDF, and show error messages in Arabic and English. Clean up orphaned images weekly and make sure backups include files.
Try it in FanannNext step: photograph five products today with the same background, lighting and aspect ratio, upload them and check the page on your phone. Then go through the security checklist if your app collects private files.
Key takeaways
- The file lives in storage; its reference and description live in the database. Do not mix them.
- Upload once and auto-generate multiple sizes, served through a CDN.
- Limit allowed types and sizes, and convert iPhone HEIC photos automatically.
- Private files sit behind short-lived links and permissions, never permanent public URLs.
- Product photos with one aspect ratio and a consistent background lift the whole store.
Frequently asked questions
What is the best image size for product photos in an online store?
How do I make product images load faster?
Should I store images in the database?
How do I protect ID photos that customers upload?
Why don't iPhone photos show on my website?
Ask your AI assistant about this
Copy this prompt into the AI assistant you use, then add the details of your own case.
I am reading this guide: “File uploads and product images in your app, done right” https://fanann.com/en/blog/file-uploads-images-app/ My question: how to handle file uploads in my app Use that page as a source and explain the answer step by step for my situation, tell me what to check before I start, and cite the page link.