Include restrictions on uploaded media content-CodePudding

I wrote these javascript snippets and I'm kinda stuck here.

Okay, so there are two snippets: one for video upload; the other for audio upload.

I am trying to implement a functionality where:

for the video upload snippet:

If the video size is more than 100MB (hundred megabytes), it should alert the user telling them the size is beyond the required limit. And also, if the file format is not .webm or .mp4 it should alert the user that these are not acceptable file formats

for the audio upload snippet:

If the audio size is more than 10MB (ten megabytes), it should alert the user telling them the size is beyond the required limit. And also, if the file format is not .wav or .mp3 it should alert the user that these are not acceptable file formats

I will be so grateful if everyone can join in sharing their knowledge on how I can implement this feature.

HTML :

<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <link rel="stylesheet" href="./style.css" />
    <title>media preview before upload</title>
</head>

<body>
    <main>
        <!-- ==========start========== VIDEO UPLOAD ==========start========== -->
        <div id="video">
            <div id="header">preview video with file name before upload</div>
            <input type="file" id="video_input" />
            <div id="video_box">
                <video id="video_file" controls></video>
            </div>
            <div id="video_caption"></div>
        </div>
        <!-- ==========finish========== VIDEO UPLOAD ==========finish========== -->

        <!-- ==========start========== AUDIO UPLOAD ==========start========== -->
        <div id="audio">
            <div id="header">preview audio with file name before upload</div>
            <input type="file" id="audio_input" />
            <div id="audio_box">
                <audio id="audio_file" controls></audio>
            </div>
            <div id="audio_caption"></div>
        </div>
        <!-- ==========finish========== AUDIO UPLOAD ==========finish========== -->
    </main>
</body>

</html>
<script src="./script.js"></script>

CSS :

body{
    background-color: #eaeaea;
}

/* ==========start========== Main Container Styling ==========start========== */
main{
    width: 800px;
    padding: 10px;
    border: 2px solid #d0d0d0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: space-between;
    font-family: "Segoe UI";
}
/* ==========finish========== Main Container Styling ==========finish========== */

/* ==========start========== Video Upload Styling ==========start========== */

#video{
    /*position: relative;*/
    width: 350px;
}

#video #header{
    color: #a05c5e;
    font-size: 16px;
    width: 100%;    
    text-align: center;
    margin-bottom: 10px;
}

#video #header:first-letter{
    text-transform: uppercase;
}

#video #video_input{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #d0d0d0;
}

#video #video_box{
    height: 250px;
    width: 100%;
    margin: 10px 0;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
}

#video #video_box #video_file{
    /*height: 100%;*/
    width: 100%;
}

#video #video_caption{
    border: 1px solid #d0d0d0;
    /*width: 100%;*/
    padding: 5px;
}

/* ==========finish========== Video Upload Styling ==========finish========== */

/* ------------------------------------------------------------------------------------- */

/* ==========start========== Audio Upload Styling ==========start========== */

#audio{
    /*position: relative;*/
    width: 350px;
}

#audio #header{
    color: #a05c5e;
    font-size: 16px;
    width: 100%;    
    text-align: center;
    margin-bottom: 10px;
}

#audio #header:first-letter{
    text-transform: uppercase;
}

#audio #audio_input{
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid #d0d0d0;
}

#audio #audio_box{
    height: 250px;
    width: 100%;
    margin: 10px 0;
    display: flex;
    /*justify-content: center;*/
    align-items: center;
}

#audio #audio_box #audio_file{
    width: 100%;
    /*height: 60%;*/
}

#audio #audio_caption{
    border: 1px solid #d0d0d0;
    /*width: 100%;*/
    padding: 5px;
}

/* ==========finish========== Audio Upload Styling ==========finish========== */

JS :

// Video input tag
var video_input = document.getElementById('video_input');

// Audio input tag
var audio_input = document.getElementById('audio_input');

// Video input tag event trigger function
video_input.addEventListener('change', (e) => {
    var video_file = document.getElementById('video_file');
    var video_caption = document.getElementById('video_caption');

    /* IMAGE SECTION Start */
    var reader = new FileReader();
    reader.onload = ()=>{
        video_file.src = reader.result;
    };
    reader.readAsDataURL(e.target.files[0]);
    /* IMAGE SECTION Finish */

    /* CAPTION SECTION Start */
    var fileName = e.target.files[0].name;
    video_caption.textContent = fileName;
    /* CAPTION SECTION Finish */
})

// Audio input tag event trigger function
audio_input.addEventListener('change', (e) => {
    var audio_file = document.getElementById('audio_file');
    var audio_caption = document.getElementById('audio_caption');
    
    /* IMAGE SECTION Start */
    var reader = new FileReader();
    reader.onload = ()=>{
        audio_file.src = reader.result;
    };
    reader.readAsDataURL(e.target.files[0]);
    /* IMAGE SECTION Finish */

    /* CAPTION SECTION Start */
    var fileName = e.target.files[0].name;
    audio_caption.textContent = fileName;
    /* CAPTION SECTION Finish */
})

Thank you all!

CodePudding user response：