(wip) file upload api;

upload new permit
This commit is contained in:
Dobromir Popov
2024-04-19 19:36:10 +03:00
parent e6ee8f3aff
commit fbe82db68c
6 changed files with 50 additions and 24 deletions

0
pages/api/content.ts Normal file
View File

View File

@ -1,41 +1,63 @@
import path from 'path'; import path from 'path';
import { promises as fs } from 'fs'; import { promises as fs } from 'fs';
import express from 'express'; import express from 'express';
import { createUploadMiddleware, processFiles, listFiles, deleteFile } from './fileHandlers';
import type { NextApiRequest, NextApiResponse } from 'next';
import nc from 'next-connect';
const router = express.Router(); const handler = nc({
onError: (err, req, res, next) => {
// Dynamic routing to handle different content types based on the subfolder console.error(err.stack);
router.use('/:subfolder', (req, res, next) => { res.status(500).end('Something broke!');
const { subfolder } = req.params; },
req.subfolder = subfolder; // Pass the subfolder as part of the request for later use onNoMatch: (req, res) => {
next(); res.status(404).end('Page is not found');
}
}); });
// POST: Upload files to a specific subfolder handler.use((req: NextApiRequest, res: NextApiResponse, next) => {
router.post('/:subfolder', createUploadMiddleware(req.subfolder).array('image'), (req, res) => { const subfolder = req.query.subfolder as string;
processFiles(req, res, req.subfolder); const upload = createUploadMiddleware(subfolder).array('image');
upload(req, res, (err) => {
if (err) {
return res.status(500).json({ error: 'Failed to upload files.', details: err.message });
}
next();
});
}); });
// GET: List files from a specific subfolder handler.post((req: NextApiRequest, res: NextApiResponse) => {
router.get('/:subfolder', (req, res) => { // Process uploaded files
listFiles(req, res, req.subfolder); // Example response
res.json({ message: 'Files uploaded successfully', files: req.files });
}); });
// DELETE: Delete a specific file from a subfolder handler.get((req: NextApiRequest, res: NextApiResponse) => {
router.delete('/:subfolder', (req, res) => { // Handle listing files
deleteFile(req, res, req.subfolder); //listFiles(req, res, req.subfolder);
listFiles(req, res, req.query.subfolder as string);
}); });
export default router; handler.delete((req: NextApiRequest, res: NextApiResponse) => {
// Handle deleting files
deleteFile(req, res, req.query.subfolder as string);
});
export const config = {
api: {
bodyParser: false,
},
};
export default handler;
// ------------------------------------------------------------
//handling file uploads //handling file uploads
import multer from 'multer'; import multer from 'multer';
import sharp from 'sharp'; import sharp from 'sharp';
// Generalized Multer configuration // Generalized Multer configuration
export function createUploadMiddleware(folder) { export const createUploadMiddleware = (folder: string) => {
const storage = multer.diskStorage({ const storage = multer.diskStorage({
destination: (req, file, cb) => { destination: (req, file, cb) => {
const uploadPath = path.join(process.cwd(), 'public/content', folder); const uploadPath = path.join(process.cwd(), 'public/content', folder);
@ -49,8 +71,8 @@ export function createUploadMiddleware(folder) {
cb(null, `${prefix}${path.extname(file.originalname)}`); cb(null, `${prefix}${path.extname(file.originalname)}`);
} }
}); });
return multer({ storage: storage }); return multer({ storage });
} };
async function processFiles(req, res, folder) { async function processFiles(req, res, folder) {
if (!req.files || req.files.length === 0) { if (!req.files || req.files.length === 0) {

View File

@ -4,13 +4,16 @@ import fs from 'fs';
import path from 'path'; import path from 'path';
import { url } from 'inspector'; import { url } from 'inspector';
import ProtectedRoute, { serverSideAuth } from "/components/protectedRoute"; import ProtectedRoute, { serverSideAuth } from "/components/protectedRoute";
import axiosInstance from '../src/axiosSecure';
const PDFViewerPage = ({ pdfFiles }) => { const PDFViewerPage = ({ pdfFiles }) => {
const [files, setFiles] = useState(pdfFiles); const [files, setFiles] = useState(pdfFiles);
const handleFileDelete = async (fileName) => { const handleFileDelete = async (fileName) => {
const subfolder = 'permits'; // Change this as needed based on your subfolder structure
try { try {
await axios.delete(`/api/delete-file?name=${fileName}`); await axiosInstance.delete(`/api/content/${subfolder}?file=${fileName}`);
setFiles(files.filter(file => file.name !== fileName)); setFiles(files.filter(file => file.name !== fileName));
} catch (error) { } catch (error) {
console.error('Error deleting file:', error); console.error('Error deleting file:', error);
@ -22,8 +25,9 @@ const PDFViewerPage = ({ pdfFiles }) => {
const formData = new FormData(); const formData = new FormData();
formData.append('file', file); formData.append('file', file);
const subfolder = 'permits'; // Change this as needed based on your subfolder structure
try { try {
const response = await axios.post('/api/upload-file', formData, { const response = await axiosInstance.post(`/api/content/${subfolder}`, formData, {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
} }
@ -34,11 +38,11 @@ const PDFViewerPage = ({ pdfFiles }) => {
} }
}; };
return ( return (
<Layout> <Layout>
<h1 className="text-3xl font-bold p-4 pt-8">Разрешителни</h1> <h1 className="text-3xl font-bold p-4 pt-8">Разрешителни</h1>
<ProtectedRoute> <ProtectedRoute>
<input type="file" onChange={handleFileUpload} className="mb-4" /> <input type="file" onChange={handleFileUpload} className="mb-4" />
{files.map((file, index) => ( {files.map((file, index) => (
<div key={file.name} className="py-2"> <div key={file.name} className="py-2">