The Rsuite Uploader is refusing to transfer the file to the Express server

Question

The Rsuite Uploader is refusing to transfer the file to the Express server

For my project, I am utilizing an Uploader component from RSuite to upload images to the Express server:

<Uploader action={process.env.REACT_APP_API_URL + '/loadMap'} draggable headers={{Authorization: 'Bearer ' + localStorage.getItem('token')}} name="map">
    <div style={{ width: '100%', height: 300, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
        <span>Click or Drag map image to this area to upload</span>
    </div>
</Uploader>

Although the request reaches the Express server when I upload an image, I am unable to locate the content of the uploaded image. In the IncomingMessage Request, I cannot find attributes like 'files', 'file', or any other containing the picture's content:

exports.loadMap = async (req, res, next) => {
    let mapContent = req.body.map;
    let mapFile = req.file;
}

Could someone guide me on how to retrieve and save this content on the server? Your help is greatly appreciated. Thank you.

javascript express rsuite

Answer 1

Answer №1

After much searching, I finally discovered the solution to my problem. It turns out that the issue was in NodeJS rather than RSUITE like I initially thought. I needed a package to read data from a form, so I ended up using the formidable package from npm:

exports.loadMap = async (req, res, next) => {
    const formidable = require('formidable');
    const uploadFolderTemp = path.join(__dirname, "..", "images", 'temp');

    var form = new formidable.IncomingForm({uploadDir: uploadFolderTemp});
    form.parse(req, async (err, fields, files) => {
        const fileExtension = '.' + files.file.originalFilename.split('.')[1];
        fs.rename(files.file.filepath, UPLOAD_FOLDER + '/' + FILENAME + fileExtension, async (err) => {
            next();
        });
    });
}

Answer 2

After much searching, I finally discovered the solution to my problem. It turns out that the issue was in NodeJS rather than RSUITE like I initially thought. I needed a package to read data from a form, so I ended up using the formidable package from npm:

exports.loadMap = async (req, res, next) => {
    const formidable = require('formidable');
    const uploadFolderTemp = path.join(__dirname, "..", "images", 'temp');

    var form = new formidable.IncomingForm({uploadDir: uploadFolderTemp});
    form.parse(req, async (err, fields, files) => {
        const fileExtension = '.' + files.file.originalFilename.split('.')[1];
        fs.rename(files.file.filepath, UPLOAD_FOLDER + '/' + FILENAME + fileExtension, async (err) => {
            next();
        });
    });
}

The Rsuite Uploader is refusing to transfer the file to the Express server

Answer №1

Similar questions

There are no documents found with the specified UUID in MongoDB

Having difficulty retrieving information from Redux store

Issue in CakePHP after modifying the directory of Index

Including v-menu in a button causes it to vanish in Vuetify

Trouble arises with kids when trying to adjust the display to block mode

Sending data as a string in an AJAX request

Challenges faced with dividing a string in JavaScript

Real-time Dropdown Updating in PHP

Is there a way to utilize jQuery for parsing the XML file?

Is it better to conceal modals or completely eliminate them from the DOM when working with React?

Telegram: verification key mismatch detected

Swap out a particular component during the testing phase

Converting array elements to strings when extracting in JSON with JavaScript

Updating user's password securely with bcrypt encryption using the PUT request method in an application utilizing mysql2, sequelize, and express framework

Steps for displaying a particular slide from a thumbnail in a modal with Slick Carousel

Execute functions upon the completion of jQuery ajax requests

Issue with the close button on ngb-alert not functioning properly

How can I use jQuery to set up form validation for an input textfield?

Issue: Unable to assign type 'FormDataEntryValue' to type 'string'. Type 'File' cannot be assigned to type 'string'

Ways to have a list component smoothly descend when a dropdown menu is activated