0

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?

2
Contributors
11
Replies
52
Views
6 Months
Discussion Span
Last Post by rproffitt
Featured Replies
  • 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 Read More

  • ![jshell.png](/attachments/small/1/0babe506a38b72b7c45fb097c3c9e9ff.png "align-left") 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.... Read More

0

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

1

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

2

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....

Edited by rproffitt

0

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

0

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?

0

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

Edited by SimonIoa

0

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.

This question has already been answered. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.