function triggerFpdNativeUpload(fileObj, slotIndex) {
$('#fpd-stage-skeleton').css('display', 'flex');
createHighResPreviewFile(fileObj, 3200, function(crispFile) {
var fpdInstance = typeof fancyProductDesigner !== 'undefined' ? fancyProductDesigner : null;
if (fpdInstance && fpdInstance.currentViewInstance) {
var stageCanvas = fpdInstance.currentViewInstance;
var elements = stageCanvas.elements || [];
// Filter elements that are designated as Upload Zones or Image Placeholders
var uploadZoneElements = elements.filter(function(el) {
return el.type === 'image' && (el.uploadZone || el.isUploadZone || el.replaceable);
});
// Fallback: If uploadZone flag isn't explicitly set on elements array, take all non-background images
if (uploadZoneElements.length === 0) {
uploadZoneElements = elements.filter(function(el, idx) { return el.type === 'image' && idx > 0; });
}
var targetElement = uploadZoneElements[slotIndex];
if (targetElement) {
var reader = new FileReader();
reader.onload = function(e) {
var dataUrl = e.target.result;
// Use FPD's native element replacement method to lock to exact bounding box
if (typeof stageCanvas.replaceImage === 'function') {
stageCanvas.replaceImage(targetElement, dataUrl);
} else if (targetElement.setSrc) {
targetElement.setSrc(dataUrl, function() {
if (stageCanvas.canvas) stageCanvas.canvas.renderAll();
});
}
setTimeout(function() {
$('#fpd-stage-skeleton').fadeOut(200);
}, 300);
};
reader.readAsDataURL(crispFile);
return;
}
}
// Safety fallback if no elements found
$('#fpd-stage-skeleton').fadeOut(200);
});
}
