Basic Integration - 3 Simple Steps
-
Include the scripts
<!-- In your HTML head -->
<script src="upload-component/upload.js"></script>
<script src="upload-component/embed.js"></script>
-
Add data attribute to input fields
<!-- Single upload -->
<input type="text" id="profile-image" data-upload="true">
<!-- Multiple upload (textarea) -->
<textarea id="gallery" data-upload="true" data-upload-multiple="true"></textarea>
-
Initialize (optional)
<script>
// Auto-attach upload buttons to all fields with data-upload="true"
uploadComponentEmbed.autoAttach();
// Or manually initialize
uploadComponent.init({
uploadUrl: 'upload-component/upload.php'
});
</script>
That's it! Upload buttons will automatically appear next to your form fields.
Advanced Configuration
// Complete initialization with all options
uploadComponent.init({
uploadUrl: 'upload-component/upload.php', // Upload handler URL
targetField: null, // Default target field ID
autoFill: true, // Enable auto-fill
multiple: true, // Allow multiple file selection
standalone:
false, // Standalone mode
onUploadComplete: function(urls, files) {
// Callback after upload completes
console.log('Uploaded:', urls);
},
onAutoFill: function(url, fieldId) {
// Callback after auto-fill
console.log(`Field ${fieldId} filled with ${url}`);
}
});
// Manual usage examples
uploadComponent.setTargetField('myField').open();
uploadComponent.setMultiple(false).open();
uploadComponent.copyAllUrls();
uploadComponent.autoFill('https://example.com/image.jpg');
Data Attributes for Auto-attach:
| Attribute |
Description |
Example |
data-upload |
Enable upload for this field (set to "true") |
data-upload="true" |
data-upload-button-text |
Custom button text |
data-upload-button-text="Upload Image" |
data-upload-multiple |
Allow multiple files (true/false) |
data-upload-multiple="true" |
data-upload-auto-fill |
Enable auto-fill (true/false) |
data-upload-auto-fill="true" |
Usage Examples
User Registration Form
<!-- Profile picture field -->
<div class="mb-3">
<label>Profile Photo</label>
<input type="text"
id="user-avatar"
name="avatar"
data-upload="true"
data-upload-button-text="Choose Photo"
placeholder="Select a profile photo">
</div>
<!-- Cover photo field -->
<div class="mb-3">
<label>Cover Photo</label>
<input type="text"
id="user-cover"
name="cover_photo"
data-upload="true"
data-upload-multiple="false">
</div>
Product Form
<!-- Product images -->
<div class="mb-3">
<label>Main Image</label>
<input type="text"
id="product-main"
data-upload="true">
</div>
<!-- Gallery images -->
<div class="mb-3">
<label>Gallery Images</label>
<textarea
id="product-gallery"
rows="4"
data-upload="true"
data-upload-multiple="true"></textarea>
<small>Upload multiple images for product gallery</small>
</div>