I created a Docker container with a Next.js instance, the main idea is to upload a .zip with the UI and store this file in a folder inside de container, in the path /tmp/compreseed/${name_file}. But when I tried it response with a 200 OK but I don't see any file stored.
This is the UI /pages/uploadData.js:
import { useState } from 'react';
import axios from 'axios';
import { useRouter } from 'next/router';
require('dotenv').config();
export default function UploadData() {
const [selectedFile, setSelectedFile] = useState(null);
const router = useRouter();
const handleBack = () => {
router.push('/');
};
const handleFileSelect = (event) => {
setSelectedFile(event.target.files[0]);
};
const handleUpload = async () => {
if (!selectedFile) {
alert('Please select a file first.');
return;
}
const formData = new FormData();
formData.append('file', selectedFile);
try {
await axios.post('/api/uploadFolder', formData);
alert('File uploaded successfully');
} catch (error) {
console.error('Error uploading file UPLOAD DATA:', error);
alert('An error occurred while uploading the file.');
}
// try {
// await axios.get('/api/upload');
// alert('Successful Operation');
// } catch (error) {
// console.error('Error uploading shapefile:', error);
// alert('An error occurred while uploading the shapefile');
// }
};
return (
<div>
<h1>Upload Zip File</h1>
<div>
<button onClick={handleBack}>Back</button>
</div>
<input type="file" onChange={handleFileSelect} />
<button onClick={handleUpload} disabled={!selectedFile}>Upload</button>
</div>
);
}
This is the /pages/api/uploadFolder.js:
import multer from "multer";
const storage = multer.diskStorage({
destination: "/tmp/compressed",
filename: (req, file, cb) => {
cb(null, file.originalname);
},
});
const upload = multer({ storage });
export default async function handler(req, res) {
if (req.method === "POST") {
const uploadedFile = await upload.single("file");
if (uploadedFile) {
res.status(200).json({ message: "Archivo cargado correctamente" });
} else {
res.status(400).json({ error: "Error al cargar el archivo" });
}
} else {
res.status(405).json({ error: "Método no permitido" });
}
}
I tried with multer, formidable, with an API using fs and it doesn´t works