How not to display Invalidate File name in File Tag in React?

Question

The file tag where I have declared that only PNG/JPEG files are allowed.

And according to React Dev Tools it is just working fine meant that the file get added successfully.

But when I tried to add file with other extensions other than PNG/JPEG the files are not get added but in the frontend I can see the name of the file.

According to React Dev Tools, File is not get added.

I just wanted, not display the name of the invalidate files like (.pdf, .mp3, etc).

In the Frontend I just wanted to see No File Chosen in place of the Invalidate File name.

Does this answer your question? How to reset ReactJS file input — Konrad
– Konrad, Commented Feb 2, 2023 at 15:16
That's not what he's asking. What he wants to achieve is that, when a file is not actually selected, because it's wrong format, the name should not appear in the "Choose file" field. — Jake
– Jake, Commented Feb 2, 2023 at 15:18
Does this answer your question? Limit file format when using <input type="file">? — matthiasgiger
– matthiasgiger, Commented Feb 2, 2023 at 15:24
@matthiasgiger, even you use this, files with other extensions will be get displayed in the frontend — Souvik Pal
– Souvik Pal, Commented Feb 2, 2023 at 15:50

matthiasgiger · Accepted Answer · 2023-02-02 16:13:28Z

1

Browser built-in options to manage this are somewhat limited, but you can achieve this by doing it manually like this:

export default function App() {
  return (
    <input
      type="file"
      onChange={(event) => {
        if (!event.target.value.endsWith(".png")) {
          event.target.value = null;
        }
      }}
    />
  );
}

This will reset the input unless the file is a PNG.

answered Feb 2, 2023 at 16:13

matthiasgiger

1,27412 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

How not to display Invalidate File name in File Tag in React?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related