2

I have an input element with type set to file which I am using to upload files. The problem is it also accepts images but I don't want that. I only want videos to be accepted. Is there a way to go about it?

 <input
   type="file"
   id="file"
   ref={inputFile}
   onChange={(event) => handleVideoUpload(event.target.files[0])}
      }
Heretic Monkey
  • 11,687
  • 7
  • 53
  • 122
H.b
  • 239
  • 2
  • 13
  • 1
    Does this answer your question? [HTML file input field with limited file types?](https://stackoverflow.com/questions/1240934/html-file-input-field-with-limited-file-types) – Heretic Monkey Oct 10 '22 at 18:36

2 Answers2

2

Just use accept prop

If required an extra step to validate - you can check the condition before submitting / posting by using File type - MIME of video

a sample e.g.

const { useRef } = React;

const App = () => {
  const fileRef = useRef(null);
  
  const handleVideoUpload = (file) => {
    if(!file.type.includes("video")){
      alert("not a video and don't submit, just return")
      return
    }else{
      alert("It's a video ... proceed submitting")
    }
  }

  return (
    <div>
      <input
        type="file"
        id="file"
        accept="video/*"
        ref={fileRef}
        onChange={(event) => handleVideoUpload(event.target.files[0])}
      />
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<App />);
<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>
KcH
  • 3,302
  • 3
  • 21
  • 46
2

The accept attribute on the input should do the job:

https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept

Ivan Kohut
  • 51
  • 5