Hello i have a problem uploading a file in the local server on Chrome. Works fine on Firefox, it uploads as requested, saves to localserver and puts the values on the database as wanted. But it doesn't on Chrome.
On the inspector i am getting this error index.php:1 Uncaught (in promise) DOMException: Failed to load because no supported source was found.
On Firefox i am getting what i am supposed to on XKR but on Chrome i am getting This Request has no response data available
I know it means that the file isn't on the server and it isn't.
When trying to download the file again i am getting
The requested URL /demo/uploads/RecordRTC-2017-04-04T01-03-29-501Z.webm was not found on this server.
Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Finally on this part of code i am getting an error
index.php:1194 Uncaught ReferenceError: progress is not defined
at uploadToPHPServer (index.php:1194)
at HTMLButtonElement.recordingDIV.querySelector.onclick (index.php:1151)Progress is a button that shows the the fate of the upload
function saveToDiskOrOpenNewTab(recordRTC) {
var fileName = 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.' + fileExtension;
recordingDIV.querySelector('#upload-to-php').parentNode.style.display = 'block';
// upload to PHP server
recordingDIV.querySelector('#upload-to-php').disabled = false;
recordingDIV.querySelector('#upload-to-php').onclick = function() {
if(!recordRTC) return alert('No recording found.');
this.disabled = true;
var button = this;
uploadToPHPServer(fileName, recordRTC, function(progress, fileURL) {
if(progress === 'ended') {
button.disabled = false;
button.innerHTML = 'Click to download from server';
button.onclick = function() {
SaveFileURLToDisk(fileURL, fileName);
};
setVideoURL(fileURL);
return;
}
button.innerHTML = progress;
});
};
}
function uploadToPHPServer(fileName, recordRTC, callback) {
var blob = recordRTC instanceof Blob ? recordRTC : recordRTC.getBlob();
blob = new File([blob], 'RecordRTC-' + (new Date).toISOString().replace(/:|\./g, '-') + '.' + fileExtension, {
type: mimeType
});
// create FormData
var formData = new FormData();
formData.append('video-filename', fileName);
formData.append('video-blob', blob);
callback('Uploading recorded-file to server.');
makeXMLHttpRequest('http://localhost/project/api/audioRecording', formData, function(progress) {
if (progress !== 'upload-ended') {
callback(progress);
return;
}
var initialURL = 'http://localhost/project/uploads/';
callback('ended', initialURL + fileName);
});
}When trying to upload the progres button says progress-ended
function makeXMLHttpRequest(url, data, callback) {
var request = new XMLHttpRequest();
request.onreadystatechange = function() {
if (request.readyState == 4 && request.status == 200) {
callback('upload-ended');
}
};
request.upload.onloadstart = function() {
callback('Upload started...');
};
request.upload.onprogress = function(event) {
callback('Upload Progress ' + Math.round(event.loaded / event.total * 100) + "%");
};
request.upload.onload = function() {
callback('progress-about-to-end');
};
request.upload.onload = function() {
callback('progress-ended');
};
request.upload.onerror = function(error) {
callback('Failed to upload to server');
};
request.upload.onabort = function(error) {
callback('Upload aborted.');
};Any guess?
