How to upload an image in NodeJS?
Good afternoon,
I want to make a POST request from the client in JAVASCRIPT with DATA Send (file .jpg) in date URL for server in NODEJS.
[Client] - JavaScript
finalImg.onload = function(event){
var request = new XMLHttpRequest();
request.onload = function (event) {
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
};
request.open('post', '/setimageprofile', true);
request.setRequestHeader('Content-type', 'image/JPEG;charset=UTF-8');
request.send(finalImg);
}
[Server] - NodeJs
app.post('/setimageprofile', function(req, res) {
//var request_data = '';
var writable = fs.createWriteStream('./client_imgs/getusername.jpg');
req.on('data', function(data){
writable.write(data);
});
req.on('end', function() {
writable.end();
});
});
[problem] When I open file ./ client_imgs / getusername.jpg with the image viewer I have the error "we do not support this file format". Apparently I should make a cast of the date that it's being sent to me, Am I right? If so, how to do?
[Note] On the server I have,
const bodyParser = require("body-parser");
var express = require('express');
var fs = require('fs');
var url = require('url');
var app = express();
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
2
Author: Pedro Correia, 2019-02-20
1 answers
[UPDATE] found solution
[server]
app.post('/setimageprofile', function(req, res) {
var request_data = '';
var writable = fs.createWriteStream('./client_imgs/getusername.png', 'base64');
req.on('data', function(data){
request_data += data;
});
req.on('end', function() {
request_data = JSON.parse(request_data).data;
var base64Data = request_data.replace(/^data:image\/png;base64,/, "");
console.log(base64Data);
writable.write(base64Data);
writable.end();
});
});
[client]
var data = { data : finalImgURL};
console.log('type: ' + dataTypeFromParent);
// post - send image to server
finalImg.onload = function(event){
var request = new XMLHttpRequest();
request.onload = function (event) {
if (request.readyState == 4 && request.status == 200) {
console.log(request.responseText);
}
};
request.open('post', '/setimageprofile', true);
request.setRequestHeader('Content-type', 'plain/text;charset=UTF-8');
request.send(JSON.stringify(data));
}
2
Author: Pedro Correia, 2019-02-20 17:09:12