File reader API gives no out put on AUDIO files

Question

As a part of a before upload control, I check if added files actually match the filetype that their extension describes.

I do a filecheck using a hidden element. and if it fails, it gets removed after formdata append.

I check the files at the backend too, but I also want to check via File Reader process. All functions like createItems or readItems and so on, are working in all other cases, meaning that they return output of either null, true or false. While I get output from image and video files, audio files not at all. It should work.

The question is:
Does the file reader read audio files differently compared to video and image files?

The following is only a tiny block of the actual code.
Now the question is: Why it doesn't return output on audio files?.

quest0 & quest1 are UI elements. Which is the element that I pull the files from.
reader is "new FileReader".
what.filecount is added while page init as readonly property.
readItems gives output on all kind off files,

However the UI html doesn't get updated if it is the file type is audio/?

for (var oD = 0; oD < what.files.length; oD++) 
{
    var pL = false;
    if (typeof window.dofile === 'undefined' || !window.dofile) { return; }
    
    if (file_s.exec(file) && !what.multiple) { pL = true; }
    else 
    {
        if (what.files.length > what.filecount) 
        {
            alert('too many files added. only ' + what.filecount + ' are allowed.');
            what.value = '';
            
            if (quest0 != null) 
            { quest0.innerHTML = ('too many files added. only ' + what.filecount + ' are allowed.'); }
            
            return;
        }
        
        pL = true;
        if ( !lastform.includes(what.form.id) ) { pL = false; }
    }
    
    if (what.files && what.files[oD] && pL == true) 
    {
        if (file_prev != null) 
        {
            if (file_prev.getAttribute('data-src') == '') 
            {file_prev.setAttribute('data-src', file_prev.src); }
            
            file_prev.src = file_backsrc;
        }
        
        reader.onload = function(e) 
        {
            init();
            
            if (typeof file_prev === 'undefined') 
            {
                if (quest1 != null) { quest1.innerHTML = 'Error occoured'; }
                return;
            }
            
            if (file_p == 'img' || file_p == 'video' || file_p == 'audio') 
            { file_prev.src = e.target.result; }
            
            if (file_p == 'canvas') { /*not yet*/ }
            
            kill.classList.remove('invisible');
            
            if (quest1 != null) { quest1.innerHTML = 'file done'; }
        }
        
        reader.onerror = function(e) 
        {
            e.preventDefault();
            alert('There was an error with one of your file(s). Filename ' + what.files[oD].name + '');
            what.value = '';
        }

        function waitfor(arr) 
        {
            if (arr == null || arr.length == 0) { return; }
           
            var aL = arr.length,
                aL0 = arr.shift();
           
            file_prev = _(aL0.file_prev);
            lastfile = aL0.lastfile;
            file_p = aL0.file_p;

            reader.readAsDataURL(aL0.file);
            aL0.kill.classList.add('invisible');
            setTimeout(() => {
                                init();
                                waitfor(arr)
                             }, 1250);
            
            if (quest1 != null) 
            { quest1.innerHTML = 'processing ' + file_p; }
        }
        
        if (what.multiple) 
        {
            var oA = 0;
            lastfile = what.files[oD].name;
            
            for (oA; oA < dK.children.length; oA++) 
            {
                var oB = what.files[oD], oB0, oB1;
                    
                if (oB.type.includes('im')) { file_p = 'img'; }
                if (oB.type.includes('au')) { file_p = 'audio'; }
                if (oB.type.includes('vi')) { file_p = 'video'; }
                
                if (lastfile != what.files[oD].name || lastfilearr.length <= what.filecount) 
                {
                    oB0 = dK.children[oA];
                    if (oB0.nodeName.toLowerCase() == file_p && what.form.querySelectorAll(file_p)[oD] != null)
                    {
                        if ( /*oB0.getAttribute('data-src')==''&&*/ !lastfilearr.includes(what.files[oD].name)) 
                        {
                            oB0 = what.form.querySelectorAll(file_p)[oD];
                            file_prev = oB0;
                            lastfilearr.push(what.files[oD].name);
                            oB0.setAttribute('data-src', lastfile);
                            
                            oB1 = new Object({
                                                'file_prev': file_prev.id,
                                                'file_p': file_p,
                                                'file': what.files[oD],
                                                'kill': kill
                                            });
                            
                            stoargearr.push(oB1);
                            createtoast(['Filechecker', 'the ' + what.files[oD].name + ' is getting checked.', 3e3, true, true, ['bg-info', 'text-dark', 'rounded', 'px-2', 'mx-1']]);
                            createItems('upload', 's', what.files[oD].name, 'name:' + what.files[oD].name + ';nr:' + oD + ';filesize:' + what.files[oD].size + ';filesizehuman:' + Math.abs(what.files[oD].size / 1024 / 1024).toFixed(2) + ';lastmodified:' + new Date(what.files[oD].lastModified).toUTCString() + ';type:' + what.files[oD].type + ';');
                        }
                    }
                }
            }
            
            if (stoargearr.length == what.files.length) { waitfor(stoargearr); }
            else { reader.readAsDataURL(what.files[oD]); }
        }
    }
}

Does the "File reader API" react different on audio files as it does on video or image files?

Thanks for any help.

You should consider running this code through a formatter before posting it here. Even if you can read it, most programmers cannot. — Ryan M, Apr 27 '22 at 01:53

score 0 · Answer 1 · answered Apr 27 '22 at 04:29

here it goes.

for (var oD = 0; oD < what.files.length; oD++) {
    var pL = false;
    if (typeof window.dofile === 'undefined' || !window.dofile) {
        return;
    };
    if (file_s.exec(file) && !what.multiple) {
        pL = true;
    } else {
        if (what.files.length > what.filecount) {
            alert('too many files added. only ' + what.filecount + ' are allowed.');
            what.value = '';
            if (quest0 != null) {
                quest0.innerHTML = 'too many files added. only ' + what.filecount + ' are allowed.';
            };
            return;
        };
        pL = true;
        if (!lastform.includes(what.form.id)) {
            pL = false;
        };
    };
    if (what.files && what.files[oD] && pL == true) {
        if (file_prev != null) {
            if (file_prev.getAttribute('data-src') == '') {
                file_prev.setAttribute('data-src', file_prev.src);
            };
            file_prev.src = file_backsrc;
        };
        reader.onload = function(e) {
            init();
            if (typeof file_prev === 'undefined') {
                if (quest1 != null) {
                    quest1.innerHTML = 'Error occoured';
                };
                return;
            };
            if (file_p == 'img' || file_p == 'video' || file_p == 'audio') {
                file_prev.src = e.target.result;
            };
            if (file_p == 'canvas') { /*not yet*/ };
            kill.classList.remove('invisible');
            if (quest1 != null) {
                quest1.innerHTML = 'file done';
            };
        };
        reader.onerror = function(e) {
            e.preventDefault();
            alert('There was an error with one of your file(s). Filename ' + what.files[oD].name + '');
            what.value = '';
        };

        function waitfor(arr) {
            if (arr == null || arr.length == 0) {
                return;
            };
            var aL = arr.length,
                aL0 = arr.shift();
            file_prev = _(aL0.file_prev);
            lastfile = aL0.lastfile;
            file_p = aL0.file_p;
            reader.readAsDataURL(aL0.file);
            aL0.kill.classList.add('invisible');
            setTimeout(() => {
                init();
                waitfor(arr)
            }, 1250);
            if (quest1 != null) {
                quest1.innerHTML = 'processing ' + file_p;
            };
        };
        if (what.multiple) {
            var oA = 0;
            lastfile = what.files[oD].name;
            for (oA; oA < dK.children.length; oA++) {
                var oB = what.files[oD],
                    oB0, oB1;
                if (oB.type.includes('im')) {
                    file_p = 'img';
                };
                if (oB.type.includes('au')) {
                    file_p = 'audio';
                };
                if (oB.type.includes('vi')) {
                    file_p = 'video';
                };
                if (lastfile != what.files[oD].name || lastfilearr.length <= what.filecount) {
                    oB0 = dK.children[oA];
                    if (oB0.nodeName.toLowerCase() == file_p && what.form.querySelectorAll(file_p)[oD] != null) {
                        if ( /*oB0.getAttribute('data-src')==''&&*/ !lastfilearr.includes(what.files[oD].name)) {
                            oB0 = what.form.querySelectorAll(file_p)[oD];
                            file_prev = oB0;
                            lastfilearr.push(what.files[oD].name);
                            oB0.setAttribute('data-src', lastfile);
                            oB1 = new Object({
                                'file_prev': file_prev.id,
                                'file_p': file_p,
                                'file': what.files[oD],
                                'kill': kill
                            });
                            stoargearr.push(oB1);
                            createtoast(['Filechecker', 'the ' + what.files[oD].name + ' is getting checked.', 3e3, true, true, ['bg-info', 'text-dark', 'rounded', 'px-2', 'mx-1']]);
                            createItems('upload', 's', what.files[oD].name, 'name:' + what.files[oD].name + ';nr:' + oD + ';filesize:' + what.files[oD].size + ';filesizehuman:' + Math.abs(what.files[oD].size / 1024 / 1024).toFixed(2) + ';lastmodified:' + new Date(what.files[oD].lastModified).toUTCString() + ';type:' + what.files[oD].type + ';');
                        };
                    };
                };
            };
            if (stoargearr.length == what.files.length) {
                waitfor(stoargearr);
            };
        } else {
            reader.readAsDataURL(what.files[oD]);
        };
    };
};```

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Apr 27 '22 at 07:01
I'll try with what.dataset.src instead, and see if it helps. I come back later and share this answer. But I'm not sure if it actually matters. — Christian Feilert, Apr 27 '22 at 08:19
I like to keep the as informative for the user as possible. The question is, does the file reader read files different the video and image files. — Christian Feilert, Apr 27 '22 at 08:25
why do i don't get any statements back for this loop , when audio files are added? in this form u may add up 5 video's , image's ('even mixed) and some music, for a kind f collage prensentation. for image and video files i get a feedback, nt for not the audio files added. Why? it's the same form — Christian Feilert, Apr 27 '22 at 18:40
I'm sorry, posted a loop from an import, i got it fixed, it was a simple comma misplced error. i — Christian Feilert, Apr 27 '22 at 19:10
sorry, my fault. i try to investigate a little bit more nest time i post stuff. — Christian Feilert, Apr 27 '22 at 19:11

score 0 · Answer 2 · answered Apr 27 '22 at 08:27

0

if (quest1 != null) {
                quest1.innerHTML = 'processing ' + file_p;
            };

This block gives no output on audio files.

answered Apr 27 '22 at 08:27

Christian Feilert

61
1
5

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 27 '22 at 09:16

File reader API gives no out put on AUDIO files

2 Answers2