I am creating an application [hosted at Server1] where I am recording a video and uploading it to a server [Server2]. I am using Ajax to upload the file. Once the recording finishes, I get the URL of the file [videoSrc] as 'blob:https://server1/a0080679-caaf-41b0-b6a0-ce41d1283476'. I am using the following code to upload the video using Ajax:
function uploadFile()
{
var data = new FormData();
data.append('video', videoSrc);
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "https://server2/upload.php",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
console.log(data);
},
error: function (e) {
console.log("ERROR : ", e);
}
});
}
On the server-side (PHP), I am getting just the URL in the post parameter. I am not getting the file in the $_FILES directive. Code:
print_r($_POST);
print_r($_FILES);
Output:
Array
(
[video] => blob:https://server1/a0080679-caaf-41b0-b6a0-ce41d1283476
)
Array
(
)
How can I upload the recorded video? Please help.
I found the fix through trial and error. I was sending the URL of the blob (output of recording) created using createObjectURL(). I sent the blob directly using Ajax and PHP $_FILES received it.
Earlier Code:
var blob = new Blob(recordedChunks, {
type: 'video/mp4'
});
//Creating blob url which is only valid for the browser
//where the application is running
var videoSrc = URL.createObjectURL(blob);
var data = new FormData();
data.append('video', videoSrc); //Incorrect: sending the Blob URL
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "https://server2/upload.php",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
console.log(data);
},
error: function (e) {
console.log("ERROR : ", e);
}
});
Corrected Code:
var blob = new Blob(recordedChunks, {
type: 'video/mp4'
});
var data = new FormData();
data.append('video', blob); //Correct: sending the Blob itself
$.ajax({
type: "POST",
enctype: 'multipart/form-data',
url: "https://server2/upload.php",
data: data,
processData: false,
contentType: false,
cache: false,
timeout: 600000,
success: function (data) {
console.log(data);
},
error: function (e) {
console.log("ERROR : ", e);
}
});