There are several ways to send your image data in a request to the server, but all of them will include calling the send method of the XMLHttpRequest object with the data that you want to send as an argument.
The send method sends a request to a remote server and sets its argument as the body of this request. Since you are expecting Base64 encoded image data on your server, you will first need to convert your image file to Base64 data on the client.
The easiest way to convert an image to Base64 on the client is to upload the image as an image element, draw it onto a canvas element, and then get a Base64 view with canvas images.
It might look something like this (given that the URL of the original image is stored in a variable named imgsrc , and the desired name is stored in name , as indicated):
// This function accepts three arguments, the URL of the image to be // converted, the mime type of the Base64 image to be output, and a // callback function that will be called with the data URL as its argument // once processing is complete var convertToBase64 = function(url, imagetype, callback){ var img = document.createElement('IMG'), canvas = document.createElement('CANVAS'), ctx = canvas.getContext('2d'), data = ''; // Set the crossOrigin property of the image element to 'Anonymous', // allowing us to load images from other domains so long as that domain // has cross-origin headers properly set img.crossOrigin = 'Anonymous' // Because image loading is asynchronous, we define an event listening function that will be called when the image has been loaded img.onLoad = function(){ // When the image is loaded, this function is called with the image object as its context or 'this' value canvas.height = this.height; canvas.width = this.width; ctx.drawImage(this, 0, 0); data = canvas.toDataURL(imagetype); callback(data); }; // We set the source of the image tag to start loading its data. We define // the event listener first, so that if the image has already been loaded // on the page or is cached the event listener will still fire img.src = url; }; // Here we define the function that will send the request to the server. // It will accept the image name, and the base64 data as arguments var sendBase64ToServer = function(name, base64){ var httpPost = new XMLHttpRequest(), path = "http://127.0.0.1:8000/uploadImage/" + name, data = JSON.stringify({image: base64}); httpPost.onreadystatechange = function(err) { if (httpPost.readyState == 4 && httpPost.status == 200){ console.log(httpPost.responseText); } else { console.log(err); } }; // Set the content type of the request to json since that what being sent httpPost.setHeader('Content-Type', 'application/json'); httpPost.open("POST", path, true); httpPost.send(data); }; // This wrapper function will accept the name of the image, the url, and the // image type and perform the request var uploadImage = function(src, name, type){ convertToBase64(src, type, function(data){ sendBase64ToServer(name, data); }); }; // Call the function with the provided values. The mime type could also be png // or webp uploadImage(imgsrc, name, 'image/jpeg')
When the request is received by your server, the request body will contain a JSON string with your Base64 image inside it. Since you did not provide the server infrastructure or database driver that you use for Mongo, I adapted your code assuming that you are using Express and Mongoose with the ImageType model already defined in your application.
Since you can always create the image recording file name from your _id property and the path to the image folder, it is not necessary to save this as a property in the record, but I saved it here you will need to save the record twice in one request.
I also changed the way I handle any errors from a file system call. The “Error” that you get from a file system error is already an “Error” object, and you will need to somehow process your server.
function postNewImageType(req, res, next){ var json = JSON.parse(req.body), newImageTypeData = { name: json.name, image: "placeholder.png" }, imageBuffer = decodeBase64Image(data), newImageType = new ImageType(newImageTypeData); //First we save the image to Mongo to get an id newImageType.save(function(err){ if(err) return next(new restify.InvalidArgumentError(JSON.stringify(err.errors))); var fileName = cfg.imageFolder + newImageType._id + '.jpeg'; fs.writeFile(fileName, imageBuffer.data, function(err){ //Handle error in next middleware function somehow if (err) return next(err); newImageType.set({image: 'filename.png'}); newImageType.save(function(err){ if (err) return next(new restify.InvalidArgumentError(JSON.stringify(err.errors))); res.send(201, imagetype); }); }) }); }