want to upload zip folders from react UI and send it to backend node js server from where i can place that folder in a ceratin path on my system

user_11363391 0
Viewed 2281

Frontend Here I am trying to upload a zipped folder containing some csv files from React UI Input

import React, { useState } from "react";
import axios from "axios";

function App() {
  const [uploadFile, setUploadFile] = useState("")

  const handleFileReader = (event) => {
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (e) => {
      setUploadFile(e.target.result)
    };
  }

  const uploadHandler = () => {
      axios.post('https://localhost:5000/uploaded_file', uploadFile)
  };

  return (
    <div className="App">
     <label>Select a Folder</label>
       <input
        onChange={handleFileReader}                
        type="file"
        accept=".zip,.rar,.7zip"
       />
      <button onClick={uploadHandler}>
         Upload Folder
      </button>
    </div>
  );
}

export default App;

Backend Here I want to get that uploaded zip folder unzipped and place that at a certain path/place on my local system.

const express = require("express");
const bodyParser = require('body-parser');
const cors = require('cors');
const PORT = process.env.PORT || 5000;

const app = express();
app.use(cors());

app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }))
app.use(bodyParser.json({ limit: '50mb' }))

app.post("/uploaded_file", (req, res) => {
 console.log(req.body)
});

app.listen(PORT, () => {
  console.log(`Server listening on ${PORT}`);
});

At req.body i am getting data:application/x-zip-compressed;base64,UEsDBBQAA.......... i am stuck here. how to convert this buffered data into the original form ?

I would appreciate your help here.

reactjs node.js zip javascript
1 Answers

Front end

import React, { useState } from "react";
import axios from "axios";

function App() {
  const [uploadFile, setUploadFile] = useState("")

  const handleFileReader = (event) => {
    let reader = new FileReader();
    reader.readAsDataURL(event.target.files[0]);
    reader.onload = (e) => {
      setUploadFile({data:reader.result.split(',').pop(),fileName:event.target.files[0].name})
    };
  }

  const uploadHandler = () => {
      axios.post('https://localhost:5000/uploaded_file', uploadFile)
  };

  return (
    <div className="App">
     <label>Select a Folder</label>
       <input
        onChange={handleFileReader}                
        type="file"
        accept=".zip,.rar,.7zip"
       />
      <button onClick={uploadHandler}>
         Upload Folder
      </button>
    </div>
  );
}

Back End

    const express = require("express");
    const bodyParser = require('body-parser');
    const cors = require('cors');
    const fs = require('fs');

    const PORT = process.env.PORT || 5000;
    
    const app = express();
    app.use(cors());
    
    app.use(bodyParser.urlencoded({ limit: '50mb', extended: true }))
    app.use(bodyParser.json({ limit: '50mb' }))
    
    app.post("/uploaded_file", (req, res) => {
     let files = req.body;
    fs.writeFile(files.fileName, files.data, "base64", function (err) {
       if(err)
          res.send(err);
       else
          res.end("Uploaded");
      });
    });
    
    app.listen(PORT, () => {
      console.log(`Server listening on ${PORT}`);
    });
user_113580330
Related