I have a form where users can record themselves with their webcam using getUserMedia, and I need to send the file they record to another page before saving the file to the server.
My question is how can I achieve this? So far I've generated a blob of the video, how do I send this through my form to the next page so I can access the file and then store it on the server?
Currently I'm generating the blob like so, which works:
let videoURL = window.URL.createObjectURL(blob, {autoRevoke: false});
But I'm not sure how I can send this file as part of the form's POST request without using AJAX and FormData. Is it even possible or am I approaching this incorrectly?
Create a file from your blob add it to a FileList and then overwrite the FileList of a file input in the form.
<form>
...
<input type="file" name="myvideo" id="fileinput">
...
</form>
var input = document.querySelector('#fileinput'); //the file input
var file = new File(blob, 'video_file.mp4'); // create new file
// Need to use a data transfer object to get a new FileList object
var datTran = new ClipboardEvent('').clipboardData || new DataTransfer();
datTran.items.add(file); // Add the file to the DT object
input.files = datTran.files; // overwrite the input file list with ours