1

I am making a web application in JavaScript to store icalendar files (.ics) on a server and organize the data nicely.

I had the functionality to upload files from my computer onto my server's '/uploads' directory. This was working perfectly fine until today when I was tinkering with some database stuff and the functionality all stopped. Now when I go to do my ajax call, after I upload a file, I keep getting the error 400 (bad request). On the client side (index.js) I do formData.append('uploadFile', e.target.files[0].name); which is the name of the ICS file I uploaded. but when I console log

  console.log(req.files);

it gives me null. what is going on. I tried to do var busboy = require('connect-busboy'); but that just gave me an error.

here is my server side code (app.js):

app.post('/upload', function(req, res) {

  if(!req.files) {
    return res.status(400).send('No files were uploaded.');
  }

  let uploadFile = req.files.uploadFile;

  // Use the mv() method to place the file somewhere on your server
  uploadFile.mv('uploads/' + uploadFile.name, function(err) {
    if(err) {
      return res.status(500).send(err);
    }

    res.redirect('/');
  });
});

//Respond to GET requests for files in the uploads/ directory
app.get('/uploads/:name', function(req , res){

  fs.stat('uploads/' + req.params.name, function(err, stat) {
    console.log(err);
    if(err == null) {
      res.sendFile(path.join(__dirname+'/uploads/' + req.params.name));
    } else {
      res.send('');
    }
  });
});

and here is the client side (it won't go into either success or failure, like it did before):

 $('#upload-file').on('change', function (e) {
        let uploadname = e.target.files[0].name;
        let icsFlag = false;
        let formData = new FormData();
        formData.append('uploadFile', e.target.files[0].name);
            if (checkICS(e.target.files[0].name) == true) {
                $.ajax({
                    type: 'POST',            //Request type
                    url: '/upload',   //The server endpoint we are connecting to
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        /*  Do something with returned object
                            Note that what we get is an object, not a string, 
                            so we do not need to parse it on the server.
                            JavaScript really does handle JSONs seamlessly
                        */

                        //We write the object to the console to show that the request was successful

                        //changes the style of the myInput input bo depending on if upload was successful or not
                        //and make it display that
                        document.getElementById("statusLabel").value = "File Uploaded Successfully";
                        document.getElementById("statusLabel").style.color = "#00FA00";
                        document.getElementById("statusLabel").style.textShadow = "1px 1px 1px #000000";

                        $('#statusLabel').html("File Uploaded Successfully");
                        populateIcsTable();



                    },
                    fail: function (error) {

                        document.getElementById("statusLabel").style.textShadow = "1px 1px 1px #F00000";
                        document.getElementById("statusLabel").style.color = "#00FF00";

                        $("#statusLabel").html("FILE UPLOAD ERROR!");


                        // Non-200 return, do something with error
                    }
                });
            }
            else {
                document.getElementById("statusLabel").style.color = "#FF0000";
                document.getElementById("statusLabel").style.textShadow = "1px 1px 1px #F00000";
                $("#statusLabel").html("FILE UPLOAD ERROR!");

            }


    });

I've tried messening around with this for a few hours and I am stumped.

any help is greatly appreciated, if you need any more context or if I left anything vague I apologize, please let me know and I will try to clear everything up

Dan L
  • 11
  • 4
  • Check your browser's _Network_ console. Is the request sent with `Content-type: multipart/form-data`? Have you installed any middleware to handle file-uploads? FYI, `body-parser` is not sufficient – Phil Apr 05 '19 at 04:16
  • No, I haven't installed any middleware. In the network console, it just says 'Content-Type: text/html; charset=utf-8' – Dan L Apr 05 '19 at 04:24

0 Answers0