yellowadmin/pp-tcms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: cannot upload attachment files in docker (#241)

Browse Source
This commit is contained in:
kimatata
2025-07-12 16:48:56 +09:00
committed by GitHub
parent a42c3e3c5c
commit ed1e90c714
13 changed files with 50 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
backend/.gitignore vendored
View File

@@ -1,3 +1,4 @@
node_modules/
.env
public/uploads/
public/uploads/*
!public/uploads/dummy.txt

13
backend/migrations/20250712000000-rename-path-to-filename-in-attachments.js Normal file
View File

@@ -0,0 +1,13 @@
'use strict';
module.exports = {
up: async (queryInterface) => {
// Rename column 'path' to 'filename' in 'Attachments' table
await queryInterface.renameColumn('Attachments', 'path', 'filename');
},
down: async (queryInterface) => {
// Revert column name from 'filename' back to 'path'
await queryInterface.renameColumn('Attachments', 'filename', 'path');
},
};

2
backend/models/attachments.js
View File

@@ -8,7 +8,7 @@ function defineAttachment(sequelize, DataTypes) {
type: DataTypes.STRING,
allowNull: true,
},
path: {
filename: {
type: DataTypes.STRING,
allowNull: false,
},

0
backend/public/uploads/dummy.txt Normal file
View File

10
backend/routes/attachments/delete.js
View File

@@ -1,9 +1,9 @@
const fs = require('fs');
const path = require('path');
const express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs');
const defineAttachment = require('../../models/attachments');
const { DataTypes } = require('sequelize');
const defineAttachment = require('../../models/attachments');
module.exports = function (sequelize) {
const Attachment = defineAttachment(sequelize, DataTypes);
@@ -21,9 +21,7 @@ module.exports = function (sequelize) {
// delete file from folder
const uploadDir = path.join(__dirname, '../../public/uploads');
const url = attachment.path;
const fileName = url.substring(url.lastIndexOf('/') + 1);
const filePath = path.join(uploadDir, fileName);
const filePath = path.join(uploadDir, attachment.filename);
fs.unlink(filePath, (err) => {
if (err) {
console.error('Error deleting file:', err);

9
backend/routes/attachments/download.js
View File

@@ -1,9 +1,9 @@
const fs = require('fs');
const path = require('path');
const express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs');
const defineAttachment = require('../../models/attachments');
const { DataTypes } = require('sequelize');
const defineAttachment = require('../../models/attachments');
module.exports = function (sequelize) {
const Attachment = defineAttachment(sequelize, DataTypes);
@@ -16,8 +16,7 @@ module.exports = function (sequelize) {
return res.status(404).send('Attachment not found');
}
const filename = attachment.path.split('/').pop();
const filePath = path.join(__dirname, `../../public/uploads/${filename}`);
const filePath = path.join(__dirname, `../../public/uploads/${attachment.filename}`);
if (!fs.existsSync(filePath)) {
return res.status(404).json({ error: 'File not found' });

11
backend/routes/attachments/new.js
View File

@@ -1,11 +1,11 @@
const fs = require('fs');
const path = require('path');
const express = require('express');
const router = express.Router();
const path = require('path');
const fs = require('fs');
const multer = require('multer');
const { DataTypes } = require('sequelize');
const defineAttachment = require('../../models/attachments');
const defineCaseAttachment = require('../../models/caseAttachments');
const { DataTypes } = require('sequelize');
module.exports = function (sequelize) {
const Attachment = defineAttachment(sequelize, DataTypes);
@@ -55,11 +55,9 @@ module.exports = function (sequelize) {
return res.status(400).json({ error: 'No files uploaded' });
}
const host = req.get('host');
const protocol = req.protocol;
const attachmentsData = files.map((file) => ({
title: file.originalname,
path: `${protocol}://${host}/uploads/${file.filename}`,
filename: file.filename,
}));
const newAttachments = await Attachment.bulkCreate(attachmentsData, {
@@ -74,6 +72,7 @@ module.exports = function (sequelize) {
await t.commit();
res.json(newAttachments);
} catch (error) {
console.error(error);
await t.rollback();
res.status(500).json({ error: 'Internal server error' });
}

5
backend/seeders/seed.js
View File

@@ -550,19 +550,18 @@ module.exports = {
},
]);
const backendOrigin = process.env.BACKEND_ORIGIN || 'http://localhost:8001';
await queryInterface.bulkInsert('attachments', [
{
title: 'Selenium logo',
detail: '',
path: `${backendOrigin}/uploads/861px-Selenium_Logo.png`,
filename: '861px-Selenium_Logo.png',
createdAt: new Date(),
updatedAt: new Date(),
},
{
title: 'vitest logo',
detail: '',
path: `${backendOrigin}/uploads/logo-shadow.svg`,
filename: 'logo-shadow.svg',
createdAt: new Date(),
updatedAt: new Date(),
},

1
docker-compose.yaml
View File

@@ -10,6 +10,7 @@ services:
- IS_DEMO=false # set to true to seed the database
volumes:
- db-data:/app/backend/database
- ./backend/public/uploads:/app/backend/public/uploads
volumes:
db-data:

17
frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/CaseAttachmentsEditor.tsx
View File

@@ -1,8 +1,11 @@
import { Image, Button, Tooltip, Card, CardBody } from '@heroui/react';
import { AttachmentType, CaseMessages } from '@/types/case';
import { Trash, ArrowDownToLine, ArrowUpFromLine } from 'lucide-react';
import { isImage } from './isImage';
import { ChangeEvent, DragEvent } from 'react';
import { isImage } from './isImage';
import { AttachmentType, CaseMessages } from '@/types/case';
import Config from '@/config/config';
const apiServer = Config.apiServer;
type Props = {
isDisabled: boolean;
@@ -23,8 +26,8 @@ export default function CaseAttachmentsEditor({
onFilesInput,
messages,
}: Props) {
let images: AttachmentType[] = [];
let others: AttachmentType[] = [];
const images: AttachmentType[] = [];
const others: AttachmentType[] = [];
attachments.forEach((attachment) => {
if (isImage(attachment)) {
@@ -39,7 +42,11 @@ export default function CaseAttachmentsEditor({
{images.map((image, index) => (
<Card key={index} radius="sm" className="mt-2 me-2 max-w-md">
<CardBody>
<Image alt={image.title} src={image.path} className="object-cover h-40 w-40" />
<Image
alt={image.title}
src={`${apiServer}/uploads/${image.filename}`}
className="object-cover h-40 w-40"
/>
<div className="flex items-center justify-between">
<p>{image.title}</p>
<Tooltip content={messages.delete}>

6
frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/attachmentControl.test.ts
View File

@@ -22,16 +22,16 @@ describe('attachment control', () => {
id: 1,
title: '',
detail: '',
path: '',
filename: '',
createdAt: new Date(),
updatedAt: new Date(),
caseAttachments: sampleCaseAttachment,
};
sampleAttachment.path = 'public/uploads/abc.png';
sampleAttachment.filename = 'abc.png';
expect(isImage(sampleAttachment)).toBe(true);
sampleAttachment.path = 'public/uploads/abc.mp3';
sampleAttachment.filename = 'abc.mp3';
expect(isImage(sampleAttachment)).toBe(false);
});
});

4
frontend/src/app/[locale]/projects/[projectId]/folders/[folderId]/cases/[caseId]/isImage.ts
View File

@@ -1,8 +1,8 @@
import { AttachmentType } from '@/types/case';
function isImage(attachmentFile: AttachmentType) {
let path = attachmentFile.path;
let extension = path.substring(path.lastIndexOf('.') + 1).toLowerCase();
const filename = attachmentFile.filename;
const extension = filename.substring(filename.lastIndexOf('.') + 1).toLowerCase();
if (
extension === 'png' ||
extension === 'jpg' ||

2
frontend/types/case.ts
View File

@@ -53,7 +53,7 @@ type AttachmentType = {
id: number;
title: string;
detail: string;
path: string;
filename: string;
createdAt: Date;
updatedAt: Date;
caseAttachments: CaseAttachmentType;