how to validate all this point uploading file when the file is selected: the file is actually jpeg. If not, show a red message below the field saying : "Error: Please upload only a jpeg file." in red.
file size is less than 10Mb. If size is between 10 and 15 Mb, show a warning message in orange saying "Warning: File size should ideally be less than 10Mb. Try reducing the file size?".
If file size is greater than 15 Mb, show a red error message saying "Error: Please upload a file less than 15 Mb in size and ideally less than 10 Mb in size."
If more than 1 error or warning is found, show them one below the other as shown below. Maintain the order of jpeg check the file size check.
If the file passes both checks, show a green message saying "Success!". Also show the file's name and a red cross icon to its right. Clicking on the red icon reverts the field to its original Select file button state.
for refrence image https://ibb.co/j64FTf2
https://ibb.co/0MFwtQs
<input type="file">
tried here https://jsfiddle.net/soniii/k1z8onsd/1/
