Portable Photo Upload Component

✓ Photo Upload Component - Portable Version

Works with ANY form, ANY server, ANY website

📋 Your Custom Form

Photo Name

Your Field Name

Gallery URLs (one per line)

Multiple uploads append URLs with newlines for easy copy/paste.

⚙️ Required HTML & JavaScript

Step 1: Include the tiny helper script (no modal needed) after form tag:


<script src="https://photoupload.tokyobigsale.com/upload-component/upload-embed.js"></script>
<script>
    setupUploadComponent({
        // Point to where upload.php lives
        uploadServer: 'https://photoupload.tokyobigsale.com',
        titleFieldId: 'photoTitle' // optional; defaults to photoTitle
        // onUpload: (url, fieldId, fileInfo) => {} // optional callback
    });
</script>

Step 2: Add your form fields (any IDs you like):


<input type="text" id="myPhotoField" readonly>
<button type="button" onclick="openUploadPopup('myPhotoField')">Upload</button>

<textarea id="myGalleryField" rows="3" readonly></textarea>
<button type="button" onclick="openUploadPopup('myGalleryField', { multiple: true })">Upload Photos</button>

Optional: React to uploads (analytics, previews, etc.):


setupUploadComponent({
    uploadServer: 'https://photoupload.tokyobigsale.com',
    onUpload: (url, fieldId, fileInfo) => {
        console.log('Uploaded to', url, 'field', fieldId, fileInfo);
    }
});

🎯 What You Need to Customize

What	Example	Notes
Field ID	`id="myPhotoField"`	Use ANY name you want
Button onclick	`onclick="openUploadPopup('myPhotoField')"`	Match the field ID above
Upload Server URL	`uploadServer: 'https://photoupload.tokyobigsale.com'`	MOST IMPORTANT! Must point to where upload.php is served
Multiple flag	`openUploadPopup('field', { multiple: true })`	multiple true appends newline-separated URLs

📱 Class & ID Reference

❌ Not needed anymore:

No modal markup, drop areas, or status containers required.
Bootstrap JS is optional; helper uses the native file picker.

✅ You only set:

Your field IDs (e.g., myPhotoField, myGalleryField).
Buttons calling openUploadPopup('fieldId', { multiple: true|false }).
The uploadServer option in setupUploadComponent.

🚀 Real-World Examples

Example 1: Product Image


<input type="text" id="productImage">

<button onclick="openUploadPopup('productImage')">

  Upload Image

</button>

Example 2: Multiple Attachments


<textarea id="attachments"></textarea>

<button onclick="openUploadPopup('attachments', { multiple: true })">

  Add Files

</button>

⚡ Quick Setup Checklist

Include upload-component/upload-embed.js on the page Set uploadServer to where upload.php is hosted Add id="yourField" to your input/textarea Add a button with openUploadPopup('yourField') For multi-upload, call openUploadPopup('yourField', { multiple: true }) Test via http://localhost:8888/... (not file://)

⚠️ Important Notes:

uploadServer must point to the live folder containing upload.php (e.g., https://photoupload.tokyobigsale.com).
Cross-domain works only if that server allows CORS; ensure photoupload.tokyobigsale.com sends permissive CORS headers for your sites.
Always load via HTTP/HTTPS (never file://), or the browser will block the upload.