From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Creating file input component

Creating file input component - Next.js Tutorial

From the course: Master Next.js by Building Scalable Apps with Routing, Databases, and Performance

Start my 1-month free trial Buy for my team

Creating file input component

“

Now, we will work on the file input component, which you can see on the screen. Let me create a custom file input JSX file inside the UI folder of components folder And inside it, I will write const CustomFileInput, return division CustomFileInput and let me also export it. Next I will copy the JSX code of the image input field from the AddProduct component and paste it in place of text. And inside the ad product component, importing custom file input from the components and using it in place of the image input field. Let's save the code and check the browser. And you can see the file input field is rendered from the custom file input component. Alright, now I want to add a custom upload button along with text. So I will go to the custom file input and will add a style for screen rendering only to the input tag by saying class name is equal to Sr. only and will give id file input. Label html for file input. Adding style class name is equal to custom input. the text, choose file and…

Contents