Image to PDF Converter (FastAPI + HTML/JS/CSS)

A minimal, accessible web app to convert a bunch of images into a single PDF. The page order in the PDF matches the order in which you select the images. The generated PDF is provided back via a simple Download button/link.

Features

• Multiple images to a single PDF
• Order preserved as selected in the file picker
• Accessible UI: default multi-file input, keyboard and screen reader friendly
• Clean, minimal look (vanilla HTML/CSS/JS)
• Download ready link on success
• Temporary storage with automatic cleanup of old PDFs

Requirements

• Python 3.9+ (3.8+ should also work)
• pip

Python dependencies are listed in requirements.txt and installed via pip.

Install & Run (Local)

1. Optional: Create and activate a virtual environment

   • Windows (PowerShell):
     • python -m venv .venv
     • .venv\Scripts\Activate.ps1
   • Windows (cmd):
     • python -m venv .venv
     • .venv\Scripts\activate.bat
   • Linux/macOS:
     • python3 -m venv .venv
     • source .venv/bin/activate

2. Install dependencies

   • pip install -r requirements.txt

3. Start the server (development)

   • python -m uvicorn main:app --host 0.0.0.0 --port 8000 --reload

4. Open the app in your browser

   • http://localhost:8000/

How to Use

1. Click "Choose images" and select your images. You can select multiple images at once.
   • To preserve your desired order, select the files in that order (use Ctrl or Shift for multi-select). Most modern browsers keep the selection order.
2. The app shows your selected files in an ordered list.
3. Click "Create PDF".
4. When done, a Download PDF button appears. Click it to save the generated PDF.

Notes on Image Order

• The backend preserves the order it receives from the browser.
• Browsers typically keep the order you selected when using multi-file selection with Ctrl/Shift.
• If you select a whole folder in one go, some file pickers may sort by name. To enforce a specific order, select the files in that order or rename them appropriately before selection.

Supported Images

• Common formats like JPG/JPEG, PNG, BMP, and single-frame GIF work out of the box.
• Images are converted to RGB internally for best PDF compatibility. Transparent backgrounds will be flattened to white.
• Very large images or a very large number of files can increase processing time and memory usage.

API (Optional Reference)

• POST /api/convert with multipart/form-data
  • field name: files (can be repeated multiple times)
  • response: { id: string, download_url: string, message: string }
• GET /download/{id} returns the generated PDF

Temporary Files & Cleanup

• PDFs are stored in the generated/ folder with random IDs.
• Best-effort cleanup removes files roughly older than 6 hours.

Project Structure

• main.py — FastAPI app (endpoints + static serving)
• static/ — Frontend files
  • index.html — UI
  • styles.css — minimal styling
  • app.js — client logic for selection, upload, and download
• generated/ — created at runtime to store PDFs (git-ignored if you use git)
• requirements.txt — Python dependencies

Troubleshooting

• Error: "File is not a valid image"
  • Ensure you selected image files only and that they are not corrupted.
• PDF creation failed
  • Try with fewer/smaller images. Extremely large or unusual image formats can cause failures.
• Nothing loads at http://localhost:8000/
  • Ensure the server is running without errors; check the terminal for logs.
  • Confirm the URL is correct and not blocked by a firewall/proxy.

Deployment Notes

• This demo app is designed for local use and simplicity. If deploying to the internet, place it behind a proper server/proxy and consider adding authentication, rate limiting, and storage policies.