Basic Image Uploading
Let's build an image uploader. Not a theoretical example. Not a "hello world" toy. A real image uploader that resizes images and generates thumbnails automatically, using Trongate's Image module.
We'll use the following three-method pattern:
- Display the upload form
- Process the upload with validation
- Show the success page with image preview
Each method does one thing. Clean. Simple. Maintainable.
In a hurry? Head over to GitHub and download the Simple Image Uploader module:
https://github.com/trongate/Trongate-v2---Simple-Image-Uploader
The code demonstrates basic image uploading concepts with automatic resizing and thumbnail generation.
The Complete Controller
Create a simple_image_uploader directory with a controller file (name 'Simple_image_uploader.php') at:
Here's the code for the controller file:
That's the entire controller. Three methods. Zero complexity. Production-ready pattern.
The Image module automatically processes the first file uploaded in your form, regardless of its input field name. This makes it consistent with the File module.
Important: File Input Name
The name attribute of your file input field must match what you're validating. In this example, we use userfile consistently throughout:
- Form:
form_file_select('userfile', ...) - Validation:
set_rules('userfile', 'File', ...)
The Upload Form View
Create a view file named 'upload_form.php' at the following location:
Here's the code for the view file:
About the CSS file: The two view files mentioned on this page reference simple_image_uploader.css, which should be located at:
modules/simple_image_uploader/css/simple_image_uploader.css
Trongate's Module Asset Manager will automatically find and load this file when the views are rendered.
As a reminder, you can download the complete module (including the CSS file) from GitHub:
Simple Image Uploader Module
The Success Page View
Create a file named 'upload_success.php' and have it located at:
Create the Upload Directories
Before uploading, create the directories where images and thumbnails will be stored:
Or create them via PHP if you prefer:
How It Works (The Flow)
- User visits
yoursite.com/simple_image_uploader - Form displays with image file selection input
- User selects image and clicks "Upload Image"
- Browser POSTs to
yoursite.com/simple_image_uploader/submit_upload - Trongate validates the image (required, type, size, dimensions)
- If valid:
- Uploads image to
modules/simple_image_uploader/uploads/ - Automatically resizes if larger than 800x800px
- Generates 150x150px thumbnail in
uploads/thumbs/ - Sets success message and redirects
- Uploads image to
- If invalid: Redisplays form with error messages
- Success page shows both full-size image and thumbnail
Key Concepts Explained
1. form_open_upload() vs form_open()
Use for image uploads. It automatically adds:
That enctype attribute is required for file uploads. Trongate adds it automatically.
2. The POST-Redirect-GET Pattern
Notice, we don't render the success page directly. Instead, when an upload is successful, we immediately redirect the user elsewhere:
POST (upload) → Process → Redirect → GET (success page)
3. Validation Before Upload
We always validate before uploading:
4. What Happens Automatically
When you call $this->image->upload($config), the Image module automatically:
- Validates MIME types (JPEG, PNG, GIF, WEBP only)
- Checks file signatures to prevent spoofed uploads
- Scans for embedded malicious content
- Resizes images that exceed max_width or max_height
- Maintains aspect ratios during resizing
- Generates thumbnails with specified dimensions
- Prevents filename conflicts (car.jpg → car_2.jpg → car_3.jpg)
All of this happens with zero configuration beyond the simple config array.
Try It Right Now
- Create the three files above
- Create the upload directories (uploads and uploads/thumbs)
- Visit:
yoursite.com/simple_image_uploader - Upload an image (JPEG, PNG, GIF, or WEBP)
- See the resized image and thumbnail on the success page
Don't forget: You're welcome to download the code from GitHub.
We're continually improving the Trongate documentation. If anything is incorrect, unclear, incomplete, or could be better, we'd genuinely appreciate your input.
Share your thoughts in the Documentation Feedback.