What I'm struggling with: I have a webpage that utilizes the webcam to take a photo. Upon clicking a button, it saves the current webcam image to an HTML canvas object. The issue arises when trying to send this image from the canvas object to a Web API service designed to save the photo on a server. The service is coded in C# and expects a FileStream.
The front end of my project is solely built using HTML and Javascript (employing Angular/JQuery). My goal is to transmit the image to the server in the desired format, but I've encountered obstacles in accomplishing this task.
I've spent the last couple of days troubleshooting without success. It appears that my next step involves creating a FormData object, attaching the image to it, and then dispatching it to the server. However, every time I attempt this process, I receive a 200 error indicating that something is amiss in the way I've structured the data.
Interestingly, when I utilize an input element of type file to upload an image directly from disk, everything functions flawlessly. But when I try to pass along a base64 image string or append it to a FormData object, everything falls apart.
factory.setPhoto = function (id, image) {
var fd = new FormData();
fd.append('file', image);
return $http.post(baseUrl + '/' + id, fd, {
transformRequest: angular.identity,
headers: { 'Content-Type': undefined }
}).then(function (results) {
// whatever
});
};