I've been trying to replicate a code i got that uploads images to a server ASP.NET web api but width videos instead, right now im trying to upload a .MOV video recorded from an iOS device but i dont really know how to modify my code to work with videos. This is the code that works and can upload images from the device. I've tried using the same code but instead of getting a image from img element i've gotten the video from video element without any further success.
function upload(){
var img = document.getElementById("insertedImg");
var dataURL = getBase64Image(img);
var blob = dataURItoBlob(dataURL);
var data = new FormData();
data.append("canvasImage", blob);
$.ajax({
type:'POST',
url: 'http://testwebsite.net/api/upload',
data: data,
processData: false,
contentType: false,
success: function(data) {
alert('success');
},
error: function(response){
alert('error');
}
});
}
And the getBase64 function
function getBase64Image(img) {
var canvas = document.createElement("canvas");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);
var dataURL = canvas.toDataURL('image/jpeg');
return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
And dataURItoBlob function
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
return new Blob([ab], { type: 'image/jpeg' });
}
If anyone know how i can modify this code to work with videos i'd highly appreciate your help, thanks!