Mobile Safari video upload makes site refresh - node.js

Question

I created a photo uploading server on a raspberry pi using Angular with Node.Js and multer. This is all hosted on an unsecured ad-hoc network created by the pi itself. The reason I am going for ad-hoc here is because I want to be able to take this on road trips and store photos on it wherever I may be. When I use any mobile browser on my iPhone to upload a video longer than 15 seconds or select a large amount of photos it stalls for a second then refreshes the page which stops the upload. As for error messages I could not see any on Desktop or mobile as the page retunrs with "Something went wrong while displaying webpage" Is there a way to increase multers file size limit? Safari iOS refresh
HTML for Upload:
<div class="dropzone">
<input type="file" #fileDropRef id="fileDropRef" multiple (change)="handleDrop($event)">
<img src="../../assets/upload.png">
<p>Drag and drop here</p>
<p>or</p>
<p>browes for file</p>
</div>
<div id="progressBar" #progressBar></div>
<div id="photoAlbum" #photoAlbum></div>
<div id="gallery" #gallery></div>
And to handle the upload
handleDrop(e) {
e.preventDefault()
e.stopPropagation()
console.log(e)
this.handleFiles(e.target.files)
}
initializeProgress(numFiles) {
this.progressBar.nativeElement.value = 0
this.uploadProgress = []
for(let i = numFiles; i > 0; i--) {
this.uploadProgress.push(0)
}
}
handleFiles(files) {
files = [...files]
this.initializeProgress(files.length)
files.forEach(this.uploadFile)
files.forEach(this.previewFile)
}
uploadFile(file, i) {
var formData = new FormData();
formData.append("photos", file);
formData.append("photos", localStorage.getItem('email'));
var content = '<a id="a"><b id="b">hey!</b></a>'; // the body of the new file...
var blob = new Blob([content], { type: "text/xml"});
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == XMLHttpRequest.DONE) {
console.log(request.responseText);
}
}
request.open("POST", 'http://localhost:port/api/mov/uploadmedia');
request.send(formData);

Answer 1

In case anyone comes across this. The problem I was facing was that I was caching a video that surpassed the browser cache limit. To avoid caching I simply used an XMLHttpRequest to upload the file immediately after it is selected. This will stream the file directly to the disk.
counter(e) {
if(this.i != e.target.files.length){
this.i++;
this.handleDrop(e)
}
}
handleDrop(e) {
e.preventDefault()
e.stopPropagation()
console.log(e)
var formData = new FormData();
formData.append("photos", e.target.files[this.i]);
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if(request.readyState == XMLHttpRequest.DONE) {
console.log(request.responseText)
}
}
request.open("POST", 'http://localhost:port/api/mov/uploadmedia')
request.send(formData)
this.counter(e)
}