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/

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read full post →

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more