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?

Lines

1191         var initialURL = 'http://localhost/project/uploads/';
1192        callback('ended', initialURL + fileName);
1193    });
1194        
1195
1196 }

you may see the question i made to uploader of this script here
https://www.webrtc-experiment.com/RecordRTC/

That line doesn't look off on its own.

What does JSLint have to say about your code?

  1. JSLint (you can find that on your own.)
  2. Watch https://www.youtube.com/watch?v=hQVTIJBZook to learn more about this and issues with javascript.

I upset a fellow coder by insisting a clean lint report before we started debugging.

You are right but it didn't come to my head that this could be wrong from the beggining, i thought of it just a few hours ago, and made a post here

i watched the video. Everyone should watch it. Especially on 15:30 about the triple equal operator. I saw a coder using a triple equal operator instead of double and said thats wrong! But it isn't

jshell.png
My takeaway was this picture.

So JavaScript is like Schrödinger's cat and quantum mechanics. That is, if anyone tells you they understand it....

Any suggestion for this issue? Should i abort it and try to make a new one?

If you wish. You could tell the users to use other than Chrome?
In parting, also use caniuse.com to check if your code is tripping over some other items.

Did the current code pass JSLint?

I am getting some errors on JSLint like Use double quotes, not single quotes, or Spaces not tabs.
Basically i am not sure what to Tolerate
bitwise operators
eval
for statement
multiple vars
single quote strings
this
whitespace mess

What do i put on caniuseit.com? RecordRTC returns 0 matches

I see I wrote caniuse.com not caniuseit.com. Computers be like that!

As to JSLint, I'd tolerate nothing. I'll share I made money going halfway around the world just to re-iterate that compiler and lint warnings shall be fixed.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.