'Formidable doesn't work outside localhost

I've made a basic file uploader website using formidable. The file uploader works on my localhost, however when other devices use my website to upload files it doesn't work and I get an error from await fs.writeFile(newPath, rawData);. I checked formidable's files object and the files.name property was set to '' (it's set to the name of the file when I upload, but when other devices upload it's set to ''). Additionally when other devices upload, the file at the path files.path is always empty.

import express from "express";
import path from "path";
import fs from "fs/promises";
import { Fields, Files, IncomingForm } from "formidable";
const formidable = require("formidable");
const PORT = 8000;
const app = express();
const resourcePath = path.resolve(__dirname, "..", "..", "resources");

app.get("/", async (req, res) => {
    res.sendFile(path.resolve(__dirname, "..", "public", "index.html"));
});

app.post("/api/upload", (req, res, next) => {
    console.log("/api/ hit");

    const form: IncomingForm = new formidable.IncomingForm();
    // let form: IncomingForm = formidable({ multiples: true });
    form.parse(req, async (err: any, fields: Fields, files: Files) => {
        if (err) {
            console.log("THERE WAS ERROR!");
            next(err);
            return;
        }

        const oldPath: string = files.someExpressFiles.path;
        const newPath: string = path.join(
            __dirname,
            files.someExpressFiles.name
        );

        // raw data
        let rawData: any;
        try {
            rawData = await fs.readFile(oldPath);
        } catch (err) {
            console.log("1", err);
        }

        try {
            await fs.writeFile(newPath, rawData);
            res.send("Successfully uploaded");
        } catch (err) {
            console.log("2", err);
        }
    });
});

This is formidable's files object when a computer other than my laptop uploads:

files {
  someExpressFiles: File {
    _events: [Object: null prototype] {},
    _eventsCount: 0,
    _maxListeners: undefined,
    size: 0,
    path: 'C:\\Users\\myName\\AppData\\Local\\Temp\\upload_75928c3230dd986d613067faeb3df9ff',
    name: '',
    type: 'application/octet-stream',
    hash: null,
    lastModifiedDate: null,
    _writeStream: WriteStream {
      _writableState: [WritableState],
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      path: 'C:\\Users\\myName\\AppData\\Local\\Temp\\upload_75928c3230dd986d613067faeb3df9ff',
      fd: 3,
      flags: 'w',
      mode: 438,
      start: undefined,
      autoClose: true,
      pos: undefined,
      bytesWritten: 0,
      closed: false,
      [Symbol(kFs)]: [Object],
      [Symbol(kCapture)]: false,
      [Symbol(kIsPerformingIO)]: false
    },
    [Symbol(kCapture)]: false
  }
}

My html file:

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <h1>Hello World!</h1>
        <form action="/api/upload/" enctype="multipart/form-data" method="post">
            <!-- <input type="file" multiple /> -->
            <input type="file" name="someExpressFiles" multiple="multiple" />
            <input type="submit" value="UPLOAD" />
        </form>

    </body>
</html>

Does anyone know why this happens and a solution to it such that file uploading will work from another device?

node.jstypescriptfile-uploadformidable


Solution 1:[1]

There are actually no errors. The error I got was caused by user error due to bad design in the original code base which looked slightly different from the code posted here. The code posted here actually works completely fine.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 user8380672

Related Questions