fix uploads encoding (cyrilic)

pages/api/content/[subfolder].ts

@@ -9,12 +9,17 @@ import { createRouter } from 'next-connect';
 // Generalized Multer configuration
 const storage = multer.diskStorage({
     destination: (req, file, cb) => {
-        const uploadPath = path.join(process.cwd(), 'public/content', req.query.subfolder as string);
+        const subfolder = req.query.subfolder ? decodeURIComponent(req.query.subfolder as string) : 'default';
-        fs.mkdir(uploadPath, { recursive: true }).then(() => cb(null, uploadPath)).catch(cb);
+        const uploadPath = path.join(process.cwd(), 'public/content', subfolder);
+
+        fs.mkdir(uploadPath, { recursive: true })
+            .then(() => cb(null, uploadPath))
+            .catch(cb);
     },
     filename: (req, file, cb) => {
-        const prefix = req.body.prefix || path.parse(file.originalname).name;
+        const filename = decodeURIComponent(file.originalname);  // Ensure the filename is correctly decoded
-        cb(null, `${prefix}${path.extname(file.originalname)}`);
+        const prefix = req.body.prefix ? decodeURIComponent(req.body.prefix) : path.parse(filename).name;
+        cb(null, `${prefix}${path.extname(filename)}`);
     }
 });
 

pages/permits.tsx

@@ -23,17 +23,23 @@ const PDFViewerPage = ({ pdfFiles }) => {
 
     const handleFileUpload = async (event) => {
         const file = event.target.files[0];
+        //utf-8 encoding
+        // const formData = new FormData();
         const formData = new FormData();
-        formData.append('file', file);
+        // formData.append('file', file);
+        const newFile = new File([file], encodeURI(file.name), { type: file.type });
+        formData.append('file', newFile);
 
         const subfolder = 'permits';  // Change this as needed based on your subfolder structure
         try {
             const response = await axiosInstance.post(`/api/content/${subfolder}`, formData, {
                 headers: {
-                    'Content-Type': 'multipart/form-data'
+                    'Content-Type': 'multipart/form-data',
+                    // 'Content-Encoding': 'utf-8'
                 }
             });
-            setFiles([...files, response.data]);
+            const newFiles = response.data.files.map(file => ({ name: decodeURIComponent(file.originalname), url: file.path }));
+            setFiles([...files, ...newFiles]);
         } catch (error) {
             console.error('Error uploading file:', error);
         }
@@ -44,25 +50,35 @@ const PDFViewerPage = ({ pdfFiles }) => {
         <Layout>
             <h1 className="text-3xl font-bold p-4 pt-8">Разрешителни</h1>
             <ProtectedRoute allowedRoles={[UserRole.ADMIN]} deniedMessage="">
-                <div className="border border-blue-500 border-solid p-2">
+                <div className="border border-blue-500 p-4 rounded shadow-md">
-                    <div className="mb-4">
+                    <div className="mb-6">
-                        За да качите файл кликнете на бутона по-долу и изберете файл от вашия компютър.
+                        <p className="text-lg mb-2">За да качите файл кликнете на бутона по-долу и изберете файл от вашия компютър.</p>
+                        <input type="file" onChange={handleFileUpload} className="block w-full text-sm text-gray-600
+          file:mr-4 file:py-2 file:px-4
+          file:border-0
+          file:text-sm file:font-semibold
+          file:bg-blue-500 file:text-white
+          hover:file:bg-blue-600"/>
                     </div>
-                    <input type="file" onChange={handleFileUpload} className="mb-4" />
+                    <div>
-                    <div className="mb-4">
+                        <h3 className="text-lg font-semibold mb-2">Съществуващи файлове:</h3>
-                        Съществуващи файлове:
+                        {files.length > 0 ? (
+                            files.map((file, index) => (
+                                <div key={index} className="flex items-center justify-between mb-2 p-2 hover:bg-blue-50 rounded">
+                                    <a href={file.url} className="text-blue-600 hover:text-blue-800 visited:text-purple-600 underline" target="_blank" rel="noopener noreferrer">
+                                        {file.name}
+                                    </a>
+                                    <button onClick={() => handleFileDelete(file.name)} className="ml-4 bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+                                        изтрий
+                                    </button>
+                                </div>
+                            ))
+                        ) : (
+                            <p className="text-gray-500">Няма качени файлове.</p>
+                        )}
                     </div>
-                    {files.map((file, index) => (
-                        <div key={file.name} className="py-2">
-                            <a href={file.url} className="text-blue-600 hover:text-blue-800 visited:text-purple-600 underline" target='_blank'>
-                                {file.name}
-                            </a>
-                            <button onClick={() => handleFileDelete(file.name)} className="ml-4 bg-red-500 hover:bg-red-700 text-white font-bold py-1 px-2 rounded">
-                                изтрий
-                            </button>
-                        </div>
-                    ))}
                 </div>
+
             </ProtectedRoute>
 
             <div style={{ width: '100%', height: 'calc(100vh - 100px)' }}> {/* Adjust the 100px based on your header/footer size */}
@@ -111,5 +127,4 @@ export const getServerSideProps = async (context) => {
         }
     };
 }
-// export const getServerSideProps = async (context) => {
 

src/axiosSecure.js

@@ -5,9 +5,10 @@ import { applyAuthTokenInterceptor } from 'axios-jwt';
 const axiosInstance = axios.create({
   baseURL: common.getBaseUrl(),
   withCredentials: true,
-  // headers: {
+  headers: {
-  //   "Content-Type": "application/json",
+    // "Content-Type": "application/json",
-  // },
+    "Content-Encoding": "utf-8"
+  },
 });
 
 // 2. Define token refresh function.