DEV Community

Michellebuchiokonicha
Michellebuchiokonicha

Posted on • Edited on

How to use @change/onChange event listener when file is picked

As a developer, you come across different challenges and issues and hence, apart from researching on ways to solving, your problem solving skills should always be on top gear.
First of all, after adding your upload file function, you may still need some rules.

In my case, I added a rule that returns false if the file is more than 1mb. However, since every file is changed from the file structure(e.g: png, jpg, docs, pdf) to the database format like aws-s3 format. This means that the when you return to that step, the input field will be empty again and will return false as it assumes there is no file even though there is a file but it has been converted into a different format.

To make this work, you can write a program in your handleChange function that checks if the file is more than 1mb. if it is, it returns a string.

Then in your submit function, you add the model or id and if the size is more than 1mb, it should return false.

My Twitter Handle: https://twitter.com/mchelleOkonicha

My LinkedIn Handle: https://www.linkedin.com/in/buchi-michelle-okonicha-0a3b2b194/

Top comments (0)