Integration of HEIC conversion, preview, and cropper on the frontend (Classifieds website)

Clean frontend task: heic2any for conversion, Cropper.js for cropping, preview gallery, and loader during processing. Everything is integrated into a .tpl/.php form template without touching the backend — the backend receives a ready JPG through the existing upload script.

I will do it in 2–3 days, 30 USD.

Form upload template on jQuery or Vanilla JS?

Show original

Translate

Hello! I would be happy to collaborate with you. My experience in developing web applications with JavaScript Vanilla JS / jQuery is over 15 years. Portfolio: Freelancehunt

Show original

Translate

Hello!
I've read the brief carefully and the scope is well-defined. This is a pure frontend task — no backend changes, no database work, no Tamaranga engine knowledge required. Just clean JavaScript injected into the right template file. Let me walk you through exactly how I'd implement it.
Technical Approach
Step 1 — Locate the Upload Template
First I'll identify the correct .tpl or .php template file handling the ad submission/editing form — specifically the file input element for photo uploads. This is the single integration point for all functionality below.
Step 2 — HEIC to JPG Conversion
Using heic2any library loaded via CDN — no build tools, no dependencies, drops straight into any template. When a user selects .heic or .heif files, the conversion fires automatically on the change event before anything else happens.
All conversion happens client-side — the server never sees a HEIC file.
Step 3 — Loading Indicator
… A clean visual loader appears the moment conversion starts and disappears when it's complete. Simple CSS spinner or progress overlay — styled to match your existing theme. For multiple files, each file shows its own conversion status so the user knows exactly what's processing.
Step 4 — Preview Gallery
After conversion (or for standard JPG/PNG files), thumbnails render in a preview grid below the file input. Each thumbnail shows:
The image preview
File name and size
A remove button to deselect before upload
A crop button to open the cropper for that specific image
Step 5 — Cropper.js Integration
Clicking crop on any preview thumbnail opens a modal with Cropper.js initialized on that image. The user can:
Drag to reposition
Resize the crop area
Confirm crop → the cropped version replaces the original in the preview
Deliverable
A single well-commented JavaScript file (and minimal CSS for the loader and modal) that you drop into your theme. Implementation instructions included so your team knows exactly which template line to add the script reference to.
The code will be written in Vanilla JS — no framework dependencies, compatible with jQuery-based templates without conflicts.
One question before starting:
Does your Tamaranga theme use jQuery or pure Vanilla JS? This determines whether I use jQuery's $.ajax for the form submission or the native Fetch API — both work, just want to match what's already in the template to avoid library conflicts.