I'm currently working on a project that involves NodeJS, Express, JQuery, and Typescript. The issue I'm facing is related to uploading a file from the front end, which is successful. However, I'm encountering difficulties in returning a JSON object from the server to the client, specifically containing the location of the uploaded file on the server.
Instead of being received by the "success: function (response)" function on the client side, the JSON data is rendering on the screen.
Below is the client-side code snippet:
function sendFile() {
$(new ID().setAsRoot().selectId()).append(
"<form id=\"fileUploadForm\" accept-charset=\"utf-8\" method=\"post\" action=\"/upload\" enctype=\"multipart/form-data\">" +
"<input id = \"filename\" type=\"file\" name=\"userfile\" multiple=\"multiple\" />" +
"<button type=\"submit\"> Upload </button></form>");
var $form = $("#fileUploadForm");
$form.submit(function (e) {
alert("Upload Started");
// perform client side validations if any
this.ajaxSubmit({
error: function () {
alert("Error");
},
success: function (response) {
alert("Success " + JSON.parse(response));
}
});
// Important: stop event propagation
return false;
});
}
And here is the server-side code snippet:
app.post('/upload', function(request, response){
var upload = new uploadModule.Upload();
upload.upload(request, response);
});
public upload(req:express.Request, res) {
var form = new formidable.IncomingForm();
var originalFileName:String;
var filePath:String;
form.uploadDir = this.directory;
form.keepExtensions = true;
form.type = 'multipart';
var fields = [];
form
.on("error", function (err) {
//res.writeHead(200, {'content-type': 'text/plain'});
//res.end('error:\n\n' + util.inspect(err));
})
.on("field", function (field, value) {
//console.log(field, value);
//fields.push([field, value]);
})
.on("end", function () {
//console.log('-> post done');
//res.writeHead(200, {'content-type': 'text/plain'});
//res.end('received fields:\n\n ' + util.inspect(fields));
res.send({
path : filePath,
name : originalFileName
});
})
.on("file", function(name, file:formidable.File){
originalFileName = file.name;
filePath = file.path;
});
form.parse(req);
return;
}
--- Update ---
I've come across some errors in the Chrome console:
Uncaught SyntaxError: Unexpected token : shortcut_manager.js:123
(anonymous function) shortcut_manager.js:123
(anonymous function) extensions::messaging:327
Event.dispatchToListener extensions::event_bindings:386
Event.dispatch_ extensions::event_bindings:371
Event.dispatch extensions::event_bindings:392
dispatchOnMessage extensions::messaging:294
Uncaught SyntaxError: Unexpected token o Server.ts:21
$.ajax.success Server.ts:21
c jquery.js:3048
p.fireWith jquery.js:3160
k jquery.js:8235
r jquery.js:8778
I am utilizing the JQuery form plugin for file uploads, and it seems that the plugin's js file is not being downloaded in Chrome. Additionally, I am using require JS, where the form plugin has been included.
require(["//malsup.github.io/min/jquery.form.min.js"]);