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