File Upload with Spatie Media Library

Getting error from the resources/js/pages/tasks/create.tsx and the edit.tsx The files both work and I am getting the info on to the web page. When looking over the pages the only thang I can see that is being marked as ban are the <Input id="media" onChange={(e) => setData('media', e.target.files[0])} className="mt-1 block w-full" type="file" /> This is on both pages On the Edit.tsx you mentioned the put problem I am getting this as well.

PS. I am using PhpStorm as my editor.

Not able to see File or Categories on the index.tsx page but can see both on the edit.tsx page and in the database; any suggestions?

I get error Add fillable property [media] to allow mass assignment on [App\Models\Task]. and if i remove media in form request, it will work. is there anyone like me ?

in the index and edit pages I do not see any image, I see a box and a small icon, when I click on this I get taken to a fresh web page with "The requested URL was not found on this server." I think it maybe looking at the wrong directory how do I change that ?

When sending a request via router.post, the errors object will be empty. Therefore, it is recommended to use post and transform

let { data, setData, errors, reset, post, transform, processing, progress } = useForm<Required<EditTaskForm>>({
        // ...
});
 
transform((data) => ({
    ...data,
    _method: 'PUT'
}));
 
const editTask: FormEventHandler = (e) => {
    e.preventDefault();
 
    post(
        // ...

I made 2 changes to my code because they are using string in media and thats give me TypeScript error you can only omit it but i prefer to change the Type of Props

type EditTaskForm = {
    name: string
    is_completed: boolean
    due_date: string
    media?: File | null;
    categories: string[];
};
 
 const { data, setData, errors, put, reset, processing, progress } = useForm<Required<EditTaskForm>>({
        name: task.name,
        is_completed: task.is_completed,
        due_date: task.due_date,
        media: null,
        categories: task.task_categories.map((category) => category.id.toString()),
 });

And in the Input

<Input
 id="media"
 onChange={(e) => setData('media', e.target.files?.[0] ?? null)}
 className="mt-1 block w-full"
 type="file"
 />