Using Node Module With React

Question

I think, because I'm so new to Node, I'm not quite understanding how to use an NPM package with my React project running on Node.

Just a quick explanation:

I have a React component that uploads a zip file through Node server scripts. This part is working great, but now the next step I'm working on is getting node to unzip it after upload into a temp folder..

I'm using "axios" to post, and "multer" to save to file system and "adm-zip" for the unzip portion.

Here's a quick look at my on submit post function within my React Component:

onSubmit = (e) => {
    e.preventDefault();
    const { description, selectedFile } = this.state;
    let formData = new FormData();

    formData.append('description', description);
    formData.append('selectedFile', selectedFile);

    console.log('form data ',formData)

    let that = this;

    axios.post('/', formData)
      .then((result, req) => {
        this.setState({imagePath: result.data.path})
        this.setState({fileName: result.data.filename})
        this.setState({fileUploadStatus:"Upload Successful.."})
        Unzip.extract(result.data.filename);
      })
      .catch(function (error) {
        console.log(error);
        //alert('File upload failed. Please ensure you are uploading a .zip file only')
        that.setState({fileUploadStatus:"Upload failed.. Please ensure you are uploading a .zip file only"})
      })
  }

This is what I've put on the top of the React Component :

import React, { Component } from 'react';
import axios from 'axios';
import Unzip from './unzip';

This is my "unzip.js" file:

var AdmZip = require('adm-zip');

// reading archives

module.exports = (function() {

  var extract = function extract(fileName, cb){ 

    zip = new AdmZip("../uploads/"+fileName);
    var zipEntries = zip.getEntries(); // an array of ZipEntry records

    zipEntries.forEach(function(zipEntry) {
      console.log(zipEntry.toString()); // outputs zip entries information
      if (zipEntry.entryName == "my_file.txt") {
           console.log(zipEntry.getData().toString('utf8')); 
      }
    });
    // extracts everything
zip.extractAllTo(/*target path*/"/home/me/zipcontent/", /*overwrite*/true);

  };

});

So the part I'm struggling with is understanding how to write a node script javascript file) with functions/properties (getter, setter, etc) that can be accessed from my React component..

I tried something like this:

var AdmZip = require('adm-zip');

// reading archives

    var extract = function(thePath) { 

        zip = new AdmZip("../uploads/"+thePath);
        var zipEntries = zip.getEntries(); // an array of ZipEntry records

        zipEntries.forEach(function(zipEntry) {
          console.log(zipEntry.toString()); // outputs zip entries information
          if (zipEntry.entryName == "my_file.txt") {
               console.log(zipEntry.getData().toString('utf8')); 
          }
        });
zip.extractAllTo(/*target path*/"/home/me/zipcontent/", /*overwrite*/true);
        // extracts everything

      };

But I got errors saying the function did not exist.. so I realized that I might have to set it up as a Node Module with an export function, but I couldn't figure out how to get that to work either..

Can someone explain to me, the proper way to approach this type of external script (script that runs outside of React and returns or executes some kind of action)?

As I mentioned in some of my other recent questions, I'm a beginner with Node so please go easy on me :)

Thanks!

Answer 1

React is a frontend package. You can use tools like unzip on the backend side. for example with ExpressJS.