Universal Photo Upload

Upload photos and auto-fill any form field

Auto-Fill Ready

Not connected to any field

Drag & Drop Photos Here

or click to browse files

Connect to Form Field

Connect this uploader to any input field on your form

This should match the id attribute of your form field
How to Find Field ID:
<!-- Your form field should have an id attribute -->
<input type="text" id="profile-photo" name="photo">

<!-- Then use "profile-photo" as the Target Field ID -->
JavaScript API

Use these methods to control the uploader programmatically:

Basic Usage:
// Initialize
uploadComponent.init({
uploadUrl: 'upload.php',
targetField: 'my-field-id'
});

// Open uploader
uploadComponent.open();

// Open with specific field
uploadComponent.setTargetField('profile-image').open();
Methods:
Method Description
init(options) Initialize component with options
open(fieldId) Open uploader popup
setTargetField(fieldId) Set target field for auto-fill
setMultiple(enabled) Enable/disable multiple upload
autoFill(url) Manually fill field with URL
copyAllUrls() Copy all uploaded URLs to clipboard
Callbacks:
uploadComponent.init({
onUploadComplete: function(urls, files) {
// Called after upload completes
console.log('Uploaded URLs:', urls);
},
onAutoFill: function(url, fieldId) {
// Called after auto-fill
console.log(`Filled ${fieldId} with ${url}`);
}
});