jeet/grateful-journal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

image bg upload limit

Browse Source
This commit is contained in:
Jeet Debnath
2026-04-14 14:48:51 +05:30
parent 19dcd73b29
commit d183cf2fd6
4 changed files with 53 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
nginx/default.conf
View File

@@ -41,6 +41,7 @@ server {
}
location /api/ {
client_max_body_size 5m;
proxy_pass http://backend:8001/api/;
proxy_http_version 1.1;
proxy_set_header Host $host;

5
src/App.css
View File

@@ -19,7 +19,7 @@
display: flex;
align-items: center;
justify-content: center;
background: var(--color-bg-soft, #eef6ee);
background: transparent;
}
.page-loader__tree {
@@ -2612,9 +2612,6 @@
}
/* -- Page loader -- */
[data-theme="dark"] .page-loader {
background: #0f0f0f;
}
/* -- Alert messages -- */
[data-theme="dark"] .alert-msg--error {

24
src/components/BgImageCropper.tsx
View File

@@ -135,16 +135,28 @@ export function BgImageCropper({ imageSrc, aspectRatio, onCrop, onCancel }: Prop
const srcH = cb.h / scale
// Output resolution: screen size × device pixel ratio, capped at 1440px wide
// Then scale down resolution until the result is under 3MB (keeping quality at 0.92)
const MAX_BYTES = 1 * 1024 * 1024
const dpr = Math.min(window.devicePixelRatio || 1, 2)
const outW = Math.min(Math.round(window.innerWidth * dpr), 1440)
const outH = Math.round(outW / aspectRatio)
let w = Math.min(Math.round(window.innerWidth * dpr), 1440)
const canvas = document.createElement('canvas')
canvas.width = outW
canvas.height = outH
const ctx = canvas.getContext('2d')!
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, outW, outH)
onCrop(canvas.toDataURL('image/jpeg', 0.92))
let dataUrl: string
do {
const h = Math.round(w / aspectRatio)
canvas.width = w
canvas.height = h
ctx.drawImage(img, srcX, srcY, srcW, srcH, 0, 0, w, h)
dataUrl = canvas.toDataURL('image/jpeg', 0.92)
// base64 → approx byte size
const bytes = (dataUrl.length - dataUrl.indexOf(',') - 1) * 0.75
if (bytes <= MAX_BYTES) break
w = Math.round(w * 0.8)
} while (w > 200)
onCrop(dataUrl!)
}, [aspectRatio, onCrop])
return (

53
src/pages/SettingsPage.tsx
View File

@@ -16,6 +16,14 @@ import ClockTimePicker from '../components/ClockTimePicker'
const MAX_PHOTO_SIZE = 200 // px — resize to 200x200
const MAX_BG_HISTORY = 3
const MAX_BG_IMAGE_BYTES = 1 * 1024 * 1024 // 1 MB per image
const MAX_BG_PAYLOAD_BYTES = MAX_BG_HISTORY * MAX_BG_IMAGE_BYTES // 9 MB total
/** Approximate decoded byte size of a base64 data URL */
function dataUrlBytes(dataUrl: string): number {
const base64 = dataUrl.slice(dataUrl.indexOf(',') + 1)
return Math.round(base64.length * 0.75)
}
function resizeImage(file: File): Promise<string> {
return new Promise((resolve, reject) => {
@@ -196,8 +204,22 @@ export default function SettingsPage() {
const handleCropDone = async (dataUrl: string) => {
if (cropperSrc) URL.revokeObjectURL(cropperSrc)
setCropperSrc(null)
// Guard: individual image must be within limit (cropper already enforces this,
// but double-check in case of future code paths)
if (dataUrlBytes(dataUrl) > MAX_BG_IMAGE_BYTES) {
setMessage({ type: 'error', text: 'Image is too large. Please try a smaller photo.' })
return
}
// Prepend to history, deduplicate, cap at MAX_BG_HISTORY
const newHistory = [dataUrl, ...bgImages.filter(i => i !== dataUrl)].slice(0, MAX_BG_HISTORY)
let newHistory = [dataUrl, ...bgImages.filter(i => i !== dataUrl)].slice(0, MAX_BG_HISTORY)
// Guard: total payload must stay within limit — drop oldest images until it fits
while (newHistory.reduce((sum, img) => sum + dataUrlBytes(img), 0) > MAX_BG_PAYLOAD_BYTES) {
newHistory = newHistory.slice(0, -1)
}
await bgUpdate({ backgroundImage: dataUrl, backgroundImages: newHistory })
}
@@ -453,35 +475,26 @@ export default function SettingsPage() {
<div className="settings-divider"></div>
{/* Daily Reminder */}
<div className="settings-item">
{/* Daily Reminder — disabled for now, logic preserved */}
<div className="settings-item" style={{ opacity: 0.5 }}>
<div className="settings-item-icon settings-item-icon-orange">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" />
<path d="M13.73 21a2 2 0 0 1-3.46 0" />
</svg>
</div>
<button
type="button"
className="settings-item-content"
onClick={handleOpenReminderModal}
style={{ background: 'none', border: 'none', cursor: 'pointer', textAlign: 'left', padding: 0 }}
>
<div className="settings-item-content">
<h4 className="settings-item-title">Daily Reminder</h4>
<p className="settings-item-subtitle">
{reminderTime
? (reminderEnabled ? `Reminds you at ${reminderTime}` : `Set to ${reminderTime} — paused`)
: 'Tap to set a daily reminder'}
</p>
</button>
<label className="settings-toggle" title={reminderEnabled ? 'Disable reminder' : 'Enable reminder'}>
<p className="settings-item-subtitle">Coming soon</p>
</div>
<label className="settings-toggle">
<input
type="checkbox"
checked={reminderEnabled}
onChange={handleReminderToggle}
disabled={reminderSaving}
checked={false}
disabled
readOnly
/>
<span className="settings-toggle-slider"></span>
<span className="settings-toggle-slider" style={{ cursor: 'not-allowed' }}></span>
</label>
</div>
</div>