Jacek Wojcik Jacek Wojcik - 5 months ago 95
Node.js Question

Croppie, base64 image, transfer to node.js via $http, multipartyMiddleware

I am using

croppie
to alow user to crop image.

Croppie
returns base64 encoded image (in my understanding a string with encoded image data).

Since I am using
Angular 1
I want to transfer such an image using
$http
component.

This is my approach:

Controller:

$scope.croppieRun = function () {
croppieObject.croppie('result', {
type: 'canvas',
format: 'png',
size: { width: '300', height: '300' }
}).then(function (resp) {
var imgData = resp.replace(/^data:image\/(png|jpg);base64,/, "");

factory.sendImage(imgData);

});
}


Factory:

function sendImage(imgData) {
var deferred = $q.defer();

$http({
method: "POST",
url: prefix + "/album/photoAdd",
headers: {
data: imgData
}
}).then(function (result) {
deferred.resolve(result);
}, function (error) {
deferred.reject(error);
}
);

return deferred.promise;
}


node.js server

router.post('/album/photoAdd', requiresUserAuthentication, multipartyMiddleware, function (req, res) {
var file = req.files.data;


I can see some reasons why it is not working myself:


  • server is not prepared to get
    POST
    headers of this size, I would need to change some settings there and I would prefer not doing it

  • I guess
    multipart/form-data
    encoding should be used not
    base64
    to allow usage of
    multipartyMiddleware
    on server side



What is the best approach to this problem?

Thank you :-)

Answer

The solution was to post image data as data in POST not as one of headers

Comments