Upload .zip in Next.js with Docker

24 Views Asked by At

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

0

There are 0 best solutions below