killercow
/
EasySmartInventory
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix: photo upload on iOS and remove empty photo message from email

Browse Source 
- Photo placeholder now uses label element for better iOS support
- Input gets unique ID for label association
- Removed 'Geen foto's toegevoegd' message from email when no photos
- Added null checks for preview element
- Preview now explicitly set to display:block when photo loaded
v1.0.1
killercow 2 weeks ago
parent 7c48fac373
commit 38bcbd90c7
4 changed files with 160 additions and 60 deletions
Show Stats Download Patch File Download Diff File

55
examples/inventory_corporate.html
Unescape View File

@ -1120,27 +1120,54 @@ input.invalid, select.invalid, textarea.invalid {
document.querySelectorAll('.photo-container').forEach(container => { document.querySelectorAll('.photo-container').forEach(container => {
const input = container.querySelector('input[type="file"]'); const input = container.querySelector('input[type="file"]');
const preview = container.querySelector('.photo-preview'); const preview = container.querySelector('.photo-preview');
const fieldId = preview.id; const placeholder = container.querySelector('.photo-placeholder');
const fieldId = preview ? preview.id : null;
const maxWidth = parseInt(container.dataset.maxWidth) || 1200; const maxWidth = parseInt(container.dataset.maxWidth) || 1200;
const maxHeight = parseInt(container.dataset.maxHeight) || 1200; const maxHeight = parseInt(container.dataset.maxHeight) || 1200;
// Make the placeholder clickable with a label
if (placeholder && input) {
// Create a unique ID for the input
const inputId = 'photo-input-' + (fieldId || Math.random().toString(36).substr(2, 9));
input.id = inputId;
// Wrap placeholder in a label for better iOS support
const label = document.createElement('label');
label.setAttribute('for', inputId);
label.style.cursor = 'pointer';
label.style.display = 'block';
label.innerHTML = placeholder.innerHTML;
placeholder.innerHTML = '';
placeholder.appendChild(label);
}
// Also handle click on container (for desktop)
container.addEventListener('click', function(e) { container.addEventListener('click', function(e) {
if (e.target.tagName !== 'BUTTON') { // Don't trigger if clicking on buttons or if already handled by label
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'LABEL' || e.target.closest('label')) {
return;
}
if (input) {
input.click(); input.click();
} }
}); });
input.addEventListener('change', function(e) { if (input) {
const file = e.target.files[0]; input.addEventListener('change', function(e) {
if (!file) return; const file = e.target.files[0];
if (!file) return;
processImage(file, maxWidth, maxHeight, function(dataUrl) {
preview.src = dataUrl; processImage(file, maxWidth, maxHeight, function(dataUrl) {
container.classList.add('has-photo'); if (preview) {
hasChanges = true; preview.src = dataUrl;
saveData(); preview.style.display = 'block';
}
container.classList.add('has-photo');
hasChanges = true;
saveData();
});
}); });
}); }
}); });
} }
@ -1284,7 +1311,7 @@ input.invalid, select.invalid, textarea.invalid {
body += '\n========================\n'; body += '\n========================\n';
// Add photos section if there are any // Add photos section only if there are photos
if (photos.length > 0) { if (photos.length > 0) {
body += '\nFOTO BIJLAGEN (BASE64)\n'; body += '\nFOTO BIJLAGEN (BASE64)\n';
body += '========================\n'; body += '========================\n';
@ -1299,8 +1326,6 @@ input.invalid, select.invalid, textarea.invalid {
body += photo.data + '\n'; body += photo.data + '\n';
body += '<<< EINDE BASE64 <<<\n\n'; body += '<<< EINDE BASE64 <<<\n\n';
}); });
} else {
body += 'Geen foto\'s toegevoegd aan dit formulier.\n';
} }
const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) + const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) +

55
examples/inventory_minimal.html
Unescape View File

@ -1151,27 +1151,54 @@ select {
document.querySelectorAll('.photo-container').forEach(container => { document.querySelectorAll('.photo-container').forEach(container => {
const input = container.querySelector('input[type="file"]'); const input = container.querySelector('input[type="file"]');
const preview = container.querySelector('.photo-preview'); const preview = container.querySelector('.photo-preview');
const fieldId = preview.id; const placeholder = container.querySelector('.photo-placeholder');
const fieldId = preview ? preview.id : null;
const maxWidth = parseInt(container.dataset.maxWidth) || 1200; const maxWidth = parseInt(container.dataset.maxWidth) || 1200;
const maxHeight = parseInt(container.dataset.maxHeight) || 1200; const maxHeight = parseInt(container.dataset.maxHeight) || 1200;
// Make the placeholder clickable with a label
if (placeholder && input) {
// Create a unique ID for the input
const inputId = 'photo-input-' + (fieldId || Math.random().toString(36).substr(2, 9));
input.id = inputId;
// Wrap placeholder in a label for better iOS support
const label = document.createElement('label');
label.setAttribute('for', inputId);
label.style.cursor = 'pointer';
label.style.display = 'block';
label.innerHTML = placeholder.innerHTML;
placeholder.innerHTML = '';
placeholder.appendChild(label);
}
// Also handle click on container (for desktop)
container.addEventListener('click', function(e) { container.addEventListener('click', function(e) {
if (e.target.tagName !== 'BUTTON') { // Don't trigger if clicking on buttons or if already handled by label
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'LABEL' || e.target.closest('label')) {
return;
}
if (input) {
input.click(); input.click();
} }
}); });
input.addEventListener('change', function(e) { if (input) {
const file = e.target.files[0]; input.addEventListener('change', function(e) {
if (!file) return; const file = e.target.files[0];
if (!file) return;
processImage(file, maxWidth, maxHeight, function(dataUrl) {
preview.src = dataUrl; processImage(file, maxWidth, maxHeight, function(dataUrl) {
container.classList.add('has-photo'); if (preview) {
hasChanges = true; preview.src = dataUrl;
saveData(); preview.style.display = 'block';
}
container.classList.add('has-photo');
hasChanges = true;
saveData();
});
}); });
}); }
}); });
} }
@ -1315,7 +1342,7 @@ select {
body += '\n========================\n'; body += '\n========================\n';
// Add photos section if there are any // Add photos section only if there are photos
if (photos.length > 0) { if (photos.length > 0) {
body += '\nFOTO BIJLAGEN (BASE64)\n'; body += '\nFOTO BIJLAGEN (BASE64)\n';
body += '========================\n'; body += '========================\n';
@ -1330,8 +1357,6 @@ select {
body += photo.data + '\n'; body += photo.data + '\n';
body += '<<< EINDE BASE64 <<<\n\n'; body += '<<< EINDE BASE64 <<<\n\n';
}); });
} else {
body += 'Geen foto\'s toegevoegd aan dit formulier.\n';
} }
const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) + const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) +

55
examples/inventory_modern.html
Unescape View File

@ -1182,27 +1182,54 @@ input.invalid, select.invalid, textarea.invalid {
document.querySelectorAll('.photo-container').forEach(container => { document.querySelectorAll('.photo-container').forEach(container => {
const input = container.querySelector('input[type="file"]'); const input = container.querySelector('input[type="file"]');
const preview = container.querySelector('.photo-preview'); const preview = container.querySelector('.photo-preview');
const fieldId = preview.id; const placeholder = container.querySelector('.photo-placeholder');
const fieldId = preview ? preview.id : null;
const maxWidth = parseInt(container.dataset.maxWidth) || 1200; const maxWidth = parseInt(container.dataset.maxWidth) || 1200;
const maxHeight = parseInt(container.dataset.maxHeight) || 1200; const maxHeight = parseInt(container.dataset.maxHeight) || 1200;
// Make the placeholder clickable with a label
if (placeholder && input) {
// Create a unique ID for the input
const inputId = 'photo-input-' + (fieldId || Math.random().toString(36).substr(2, 9));
input.id = inputId;
// Wrap placeholder in a label for better iOS support
const label = document.createElement('label');
label.setAttribute('for', inputId);
label.style.cursor = 'pointer';
label.style.display = 'block';
label.innerHTML = placeholder.innerHTML;
placeholder.innerHTML = '';
placeholder.appendChild(label);
}
// Also handle click on container (for desktop)
container.addEventListener('click', function(e) { container.addEventListener('click', function(e) {
if (e.target.tagName !== 'BUTTON') { // Don't trigger if clicking on buttons or if already handled by label
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'LABEL' || e.target.closest('label')) {
return;
}
if (input) {
input.click(); input.click();
} }
}); });
input.addEventListener('change', function(e) { if (input) {
const file = e.target.files[0]; input.addEventListener('change', function(e) {
if (!file) return; const file = e.target.files[0];
if (!file) return;
processImage(file, maxWidth, maxHeight, function(dataUrl) {
preview.src = dataUrl; processImage(file, maxWidth, maxHeight, function(dataUrl) {
container.classList.add('has-photo'); if (preview) {
hasChanges = true; preview.src = dataUrl;
saveData(); preview.style.display = 'block';
}
container.classList.add('has-photo');
hasChanges = true;
saveData();
});
}); });
}); }
}); });
} }
@ -1346,7 +1373,7 @@ input.invalid, select.invalid, textarea.invalid {
body += '\n========================\n'; body += '\n========================\n';
// Add photos section if there are any // Add photos section only if there are photos
if (photos.length > 0) { if (photos.length > 0) {
body += '\nFOTO BIJLAGEN (BASE64)\n'; body += '\nFOTO BIJLAGEN (BASE64)\n';
body += '========================\n'; body += '========================\n';
@ -1361,8 +1388,6 @@ input.invalid, select.invalid, textarea.invalid {
body += photo.data + '\n'; body += photo.data + '\n';
body += '<<< EINDE BASE64 <<<\n\n'; body += '<<< EINDE BASE64 <<<\n\n';
}); });
} else {
body += 'Geen foto\'s toegevoegd aan dit formulier.\n';
} }
const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) + const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) +

55
src/templates.py
Unescape View File

@ -1386,27 +1386,54 @@ JAVASCRIPT = """
document.querySelectorAll('.photo-container').forEach(container => { document.querySelectorAll('.photo-container').forEach(container => {
const input = container.querySelector('input[type="file"]'); const input = container.querySelector('input[type="file"]');
const preview = container.querySelector('.photo-preview'); const preview = container.querySelector('.photo-preview');
const fieldId = preview.id; const placeholder = container.querySelector('.photo-placeholder');
const fieldId = preview ? preview.id : null;
const maxWidth = parseInt(container.dataset.maxWidth) || 1200; const maxWidth = parseInt(container.dataset.maxWidth) || 1200;
const maxHeight = parseInt(container.dataset.maxHeight) || 1200; const maxHeight = parseInt(container.dataset.maxHeight) || 1200;
// Make the placeholder clickable with a label
if (placeholder && input) {
// Create a unique ID for the input
const inputId = 'photo-input-' + (fieldId || Math.random().toString(36).substr(2, 9));
input.id = inputId;
// Wrap placeholder in a label for better iOS support
const label = document.createElement('label');
label.setAttribute('for', inputId);
label.style.cursor = 'pointer';
label.style.display = 'block';
label.innerHTML = placeholder.innerHTML;
placeholder.innerHTML = '';
placeholder.appendChild(label);
}
// Also handle click on container (for desktop)
container.addEventListener('click', function(e) { container.addEventListener('click', function(e) {
if (e.target.tagName !== 'BUTTON') { // Don't trigger if clicking on buttons or if already handled by label
if (e.target.tagName === 'BUTTON' || e.target.tagName === 'LABEL' || e.target.closest('label')) {
return;
}
if (input) {
input.click(); input.click();
} }
}); });
input.addEventListener('change', function(e) { if (input) {
const file = e.target.files[0]; input.addEventListener('change', function(e) {
if (!file) return; const file = e.target.files[0];
if (!file) return;
processImage(file, maxWidth, maxHeight, function(dataUrl) {
preview.src = dataUrl; processImage(file, maxWidth, maxHeight, function(dataUrl) {
container.classList.add('has-photo'); if (preview) {
hasChanges = true; preview.src = dataUrl;
saveData(); preview.style.display = 'block';
}
container.classList.add('has-photo');
hasChanges = true;
saveData();
});
}); });
}); }
}); });
} }
@ -1550,7 +1577,7 @@ JAVASCRIPT = """
body += '\\n========================\\n'; body += '\\n========================\\n';
// Add photos section if there are any // Add photos section only if there are photos
if (photos.length > 0) { if (photos.length > 0) {
body += '\\nFOTO BIJLAGEN (BASE64)\\n'; body += '\\nFOTO BIJLAGEN (BASE64)\\n';
body += '========================\\n'; body += '========================\\n';
@ -1565,8 +1592,6 @@ JAVASCRIPT = """
body += photo.data + '\\n'; body += photo.data + '\\n';
body += '<<< EINDE BASE64 <<<\\n\\n'; body += '<<< EINDE BASE64 <<<\\n\\n';
}); });
} else {
body += 'Geen foto\\'s toegevoegd aan dit formulier.\\n';
} }
const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) + const mailto = 'mailto:' + encodeURIComponent(CONFIG.export.mailto.to) +

Write Preview
Loading…
Cancel
Save

Powered by TurnKey Linux.