How to accept multiple image files but only one video file with input html tag

Question

I am currently trying to implement a way for users to add images or 1 video to their post on this social media website i am working on, however, I cannot seem to add the logic for a user to only add multiple images to their post OR 1 video to their post. Would anyone have any examples of this logic by chance?

Answer 1

I would probably do something along the lines of

if (str_contains(userInputFilename, '.mp4')) {
    return;
} else {
    allowMultipleImages
}

I would personally lean more towards using php for this because I find it easier to do things like str_contains() in php vs javascript

Answer 2

A two button solution appears to be the correct approach, an Upload Video button to upload just one video and an Upload Images button to upload multiple images.

But what happens when the user changes their mind?

In this situation, we might expect that after choosing a video ( .mp4 ) for uploading and then choosing an image or images ( .jpg ) for uploading that the chosen video file is unselected.

To do this, we can add an onchange event to the input and reset the chosen file in a resetChosenFiles function.

Here is my code for this:

 function resetChosenFiles(id) { document.getElementById(id).value = ""; }

 <form action="/upload_files.php"> <label for="videofile">Video:</label> <input type="file" id="videofile" name="videofile" accept="video/mp4" onchange="resetChosenFiles('imagefiles')"> <hr> <label for="imagefiles">Images:</label> <input type="file" id="imagefiles" name="imagefiles" multiple accept="image/png, image/jpeg" onchange="resetChosenFiles('videofile')"> </form>