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/

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay