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
– Ryan M ♦, Commented Apr 27, 2022 at 1:53

Christian Feilert · Accepted Answer · 2022-04-27 04:29:13Z

0

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]);
        };
    };
};```

answered Apr 27, 2022 at 4:29

Christian Feilert

571 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Community Over a year ago

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.

Christian Feilert Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

I'm sorry, posted a loop from an import, i got it fixed, it was a simple comma misplced error. i

|

Christian Feilert · Accepted Answer · 2022-04-27 08:27:32Z

0

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

This block gives no output on audio files.

answered Apr 27, 2022 at 8:27

Christian Feilert

571 silver badge6 bronze badges

1 Comment

Community Over a year ago

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.

Collectives™ on Stack Overflow

File reader API gives no out put on AUDIO files

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related