Skip to content

Feat 162 local storage #553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
krokosik merged 4 commits into from
Feb 3, 2026
Merged

Feat 162 local storage #553

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
6f0bd6b
Add sharp and formidable for image handling
krokosik Feb 3, 2026
af5eb44
Add local storage upload options
krokosik Feb 3, 2026
5eb31ee
Remove old R2 functionality
krokosik Feb 3, 2026
1fd1558
Fix errors
krokosik Feb 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@
/prisma/db.sqlite
/prisma/db.sqlite-journal

# uploads
/uploads

# next.js
/.next/
/out/
Expand Down
16 changes: 1 addition & 15 deletions docker/dev/compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,20 +20,6 @@ services:
ports:
- '${POSTGRES_PORT:-5432}:${POSTGRES_PORT:-5432}'

minio:
image: minio/minio:RELEASE.2025-04-22T22-12-26Z
container_name: splitpro-storage-dev
ports:
- 9002:9002
- 9001:9001
volumes:
- minio:/data
environment:
MINIO_ROOT_USER: splitpro
MINIO_ROOT_PASSWORD: password
entrypoint: sh
command: -c 'mkdir -p /data/splitpro && minio server /data --console-address ":9001" --address ":9002"'

volumes:
database:
minio:
uploads:
3 changes: 3 additions & 0 deletions docker/prod/compose.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ services:
depends_on:
postgres:
condition: service_healthy
volumes:
- uploads:/app/uploads

volumes:
database:
uploads:
3 changes: 3 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"cron-parser": "^4.9.0",
"cronstrue": "^3.3.0",
"date-fns": "^3.3.1",
"formidable": "^3.5.4",
"i18next": "^25.2.1",
"i18next-browser-languagedetector": "^8.2.0",
"i18next-http-backend": "^3.0.2",
Expand All @@ -68,6 +69,7 @@
"react-hook-form": "^7.50.1",
"react-i18next": "^15.5.3",
"react-plaid-link": "4.1.1",
"sharp": "^0.34.5",
"sonner": "^1.4.0",
"superjson": "^2.2.1",
"vaul": "^1.1.2",
Expand All @@ -78,6 +80,7 @@
"devDependencies": {
"@faker-js/faker": "10.1.0",
"@tailwindcss/postcss": "^4.1.10",
"@types/formidable": "^3.4.6",
"@types/jest": "^29.5.14",
"@types/node": "^22.15.21",
"@types/nodemailer": "^6.4.15",
Expand Down
56 changes: 53 additions & 3 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 2 additions & 3 deletions src/components/AddExpense/AddExpensePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,11 +29,10 @@ import { currencyConversion } from '~/utils/numbers';
import { CURRENCY_CONVERSION_ICON } from '../ui/categoryIcons';

export const AddOrEditExpensePage: React.FC<{
isStorageConfigured: boolean;
enableSendingInvites: boolean;
expenseId?: string;
bankConnectionEnabled: boolean;
}> = ({ isStorageConfigured, enableSendingInvites, expenseId, bankConnectionEnabled }) => {
}> = ({ enableSendingInvites, expenseId, bankConnectionEnabled }) => {
const showFriends = useAddExpenseStore((s) => s.showFriends);
const amount = useAddExpenseStore((s) => s.amount);
const isNegative = useAddExpenseStore((s) => s.isNegative);
Expand Down Expand Up @@ -349,7 +348,7 @@ export const AddOrEditExpensePage: React.FC<{
onSelect={setExpenseDate}
/>
<div className="flex items-center gap-4">
{isStorageConfigured ? <UploadFile /> : null}
<UploadFile />
<Button
className="min-w-[100px]"
size="sm"
Expand Down
49 changes: 13 additions & 36 deletions src/components/AddExpense/UploadFile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,36 +5,19 @@ import { useTranslation } from 'next-i18next';

import { FILE_SIZE_LIMIT } from '~/lib/constants';
import { useAddExpenseStore } from '~/store/addStore';
import { api } from '~/utils/api';

import { Input } from '../ui/input';
import { Label } from '../ui/label';

const getImgHeightAndWidth = (file: File) =>
new Promise<{ width: number; height: number }>((resolve, reject) => {
const img = new Image();
img.src = URL.createObjectURL(file);
img.onload = () => {
resolve({ width: img.width, height: img.height });
URL.revokeObjectURL(img.src);
};
img.onerror = (error) => {
reject(error);
};
});

export const UploadFile: React.FC = () => {
const { t } = useTranslation();
const [file, setFile] = useState<File | null>(null);
const fileKey = useAddExpenseStore((s) => s.fileKey);
const { setFileUploading, setFileKey } = useAddExpenseStore((s) => s.actions);

const getUploadUrl = api.expense.getUploadUrl.useMutation();

const handleFileChange = React.useCallback(
async (event: React.ChangeEvent<HTMLInputElement>) => {
const { files } = event.target;

const file = files?.[0];

if (!file) {
Expand All @@ -47,40 +30,34 @@ export const UploadFile: React.FC = () => {
}

setFile(file);
setFileUploading(true);

await getImgHeightAndWidth(file);
const formData = new FormData();
formData.append('file', file);

setFileUploading(true);
try {
const { fileUrl, key } = await getUploadUrl.mutateAsync({
fileName: file.name,
fileType: file.type,
fileSize: file.size,
});

const response = await fetch(fileUrl, {
method: 'PUT',
body: file,
const response = await fetch('/api/upload', {
method: 'POST',
body: formData,
});

if (!response.ok) {
toast.error(t('errors.upload_failed'));
console.error('Failed to upload file:', response.statusText);
setFile(null);
return;
throw new Error(response.statusText);
}

toast.success(t('expense_details.add_expense_details.upload_file.messages.upload_success'));
const data = await response.json();

setFileKey(key);
toast.success(t('expense_details.add_expense_details.upload_file.messages.upload_success'));
setFileKey(data.key);
} catch (error) {
console.error('Error getting upload url:', error);
console.error('Upload error:', error);
toast.error(t('errors.uploading_error'));
setFile(null);
} finally {
setFileUploading(false);
}
},
[getUploadUrl, setFileUploading, setFileKey, t],
[setFileUploading, setFileKey, t],
);

return (
Expand Down
9 changes: 2 additions & 7 deletions src/components/Expense/ExpenseDetails.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,9 @@ type ExpenseDetailsOutput = NonNullable<inferRouterOutputs<ExpenseRouter>['getEx
interface ExpenseDetailsProps {
user: NextUser;
expense: ExpenseDetailsOutput;
storagePublicUrl?: string;
}

const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense, storagePublicUrl }) => {
const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense }) => {
const { displayName, toUIDate, t, getCurrencyHelpersCached } = useTranslationWithUtils();

const { cronParser, i18nReady } = useIntlCronParser();
Expand Down Expand Up @@ -101,11 +100,7 @@ const ExpenseDetails: React.FC<ExpenseDetailsProps> = ({ user, expense, storageP
) : null}
</div>
</div>
<div>
{expense.fileKey ? (
<Receipt fileKey={expense.fileKey} url={storagePublicUrl ?? ''} />
) : null}
</div>
<div>{expense.fileKey ? <Receipt fileKey={expense.fileKey} /> : null}</div>
</div>
<Separator />
<div className="mt-10 flex items-center gap-2">
Expand Down
Loading