Uploading files to Express Server Inconsistency TypeError NetworkError only on videos

19 views Asked by At

I've been trying to get a simple upload/download web application working for images and videos.

I have a simple form in my index.html file.

<form>
    <input id="upload", type="file", multiple="multiple" />
</form>

And a just-as-simple upload function in my index.js.

document.getElementById("upload").onchange = function() {
    let photo = document.getElementById("upload").files[0];
    let formData = new FormData();
             
    formData.append("photo", photo);
    fetch("/upload", {method: "POST", body: formData});
}

My Express server looks like this:

var app = express(); // var express = require("express");
app.use(busboy());   // var busboy = require('connect-busboy');
app.use(cors());     // var cors = require('cors');
app.use(express.static(path.join(__dirname, 'public')));

app.route('/upload')
    .post(function (req, res, next) {
        var fstream;
        req.pipe(req.busboy);
        req.busboy.on('file', function (fieldname, file, filename) {
            if (fs.existsSync(__dirname + '/public/uploaded/' + filename.filename)) {
                res.sendStatus(409);
            } else {
                console.log("Uploading: " + filename.filename);

                //Path where image will be uploaded
                fstream = fs.createWriteStream(__dirname + '/public/uploaded/' + filename.filename, {flags: "w+"});
                file.pipe(fstream);
                fstream.on('close', function () {    
                    console.log("Upload Finished of " + filename.filename);              
                    res.redirect('back');
                });
            }
            
        });
    });

var server = app.listen(4200, function() {
    console.log('Listening on port %d', server.address().port);
});

Heirarchy is this:

project folder
- server.js
- public
--- index.html
--- index.js
--- uploaded (destination for file upload)
----- conflicting.mov

I run npm server.js and go to http://127.0.0.1:4200 and this works! Mostly. For images. Not videos. Basically, if the file to be uploaded is already being hosted by the server, then I want the server to reject the POST request with a 409 status.

But, if the file does not exist on the server, then yep, the server should upload the file successfully.

I can upload files fine if it doesn't conflict with an already existing file. But when I attempt to reupload a .mov (or .mp4) file, then it never uploads and I get a Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. It works fine for conflicting images and the 409 error is sent correctly, but not videos.

I've tried all sorts of answers from this site, including Formidable, BodyParser, etc. to parse the request, to no avail. I have no idea why .jpg and other common file extentions work, but video files do not.

Any help would be greatly appreciated, and I am willing to answer more questions if the information I provided was not detailed enough.

0

There are 0 answers