Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Emokores's avatar

<FileInput /> component not working - Inertia with React

I have a form that is intended to submit some data, which includes a file input that handles .zip files. When I try to test the file input component, it doesn't open the dialog. Here is the component:


<label htmlFor={name}>
       <span>Upload a compressed file</span>
       <input id={id} name={name} type="file" className="sr-only" onChange={handleChange}
        accept={accept} />
</label>

The component in the frontend looks like so:

const handleFiles = (e) => {
   setData({ ...data, [e.target.name]: e.target.files[0] });
};

<FileInput label="Upload a zip" name="file_url" handleChange={handleFiles} accept=".zip, .rar" />

I can't seem to understand why it is not working.

0 likes
9 replies
fylzero's avatar

@emokores Not sure if the {} code is a placeholder or your actual code. If that is actual code the syntax is incorrect.

If you're using dynamic properties, do something like this...

<input :id="id" :name="name" type="file" className="sr-only" @change="handleChange" :accept="accept" />

Also, your handleChange event in the component should be emitting an event the component reference can pick up.

@change="$emit('doThing')"

@doThing="handleFiles"

Emokores's avatar

@fylzero my code is JSX syntax. I'm using React on my frontend. It is correct.

Sinnbeck's avatar

Does it render correctly with the button and such? Any console errors?

Emokores's avatar

@Sinnbeck Yes it does render. But it can't function and there's no console errors. It's a "dead" component I can say

Sinnbeck's avatar
Sinnbeck
4 years ago
Best Answer
Level 102

@Emokores try adding a simplified version directly to a page and see if that works

<input type="file" className="sr-only" onChange={() => {} } />
Emokores's avatar

@Sinnbeck I have added this:


<FileInput label="Upload a zip" name="file_url" onChange={(e) => setData(e.target.files[0])} accept=".zip, .rar" className="mt-1 block w-full" />

But it still doesn't work. But the simplified version works well.

Please or to participate in this conversation.