JS error when trying to load the field through a tool

[jaymeh]

I'm working on a tool page that accepts a dynamic set of field items (much like how Nova does it on resource pages) however when trying to load the FilePond field I am met with the field not rendering and an error message as shown in the screenshot.

Not sure if it is related but when looking at the issue through the inspector, the instance variable is undefined.

I can see that loading this using a resource is working as expected. I'll try to put together an example repository with my tool to assist in the debugging process.

Thanks

[milewski]

Does your tool use the detail or form version of this component?

https://github.com/dcasia/nova-filepond/blob/41fa1004de9074a7ebc63909e220e53d55b12161/resources/js/field.js#L5-L6

One thing to keep in mind is that this field requires a Resource to work properly because it makes a request to temporarily store the file and also validates/checks if you have permission to perform this operation, among other things. To do this, it fetches the resource associated with the field to figure that out:

https://github.com/dcasia/nova-filepond/blob/41fa1004de9074a7ebc63909e220e53d55b12161/resources/js/components/FilePondWrapper.vue#L74-L85

https://github.com/dcasia/nova-filepond/blob/41fa1004de9074a7ebc63909e220e53d55b12161/src/Http/Controllers/ProcessController.php#L43-L50

So, even though you may be able to fix the frontend error, it may still not work correctly on the backend side because it could fail to store the file, unless you can figure out a way to mock the controllers / override the logic currently present on the backend.

[jaymeh]

Thanks for coming back to me on this, so I dug a little deeper and found the issue is due to the fact that when a resource is not bound, the resolveAttribute function never runs, specifically this part:

I managed to sort of resolve it by adding this to the FormField.vue file but I'm happy to admit that this is a bit of a hack and I'm interested to see what other field types do to allow this to type of thing to work.

Then I encountered the issue you described above in the ProcessController. I did however discover that I can override the ProcessController in my ToolServiceProvider like this:

That might get me to where I want to be. I'm trying to give a developer the ability to create a new module and add fields to my tool so that we can keep our dependency structure separated and linear. Though it has felt like a bit of an uphill battle to get this working and makes me feel like this isn't the way 😅 .

[milewski]

You could manually resolve the field before returning it from your tool. You need to resolve it from the backend to ensure that a value is set on it during the page load so it can remember what you uploaded previously. Otherwise, the field resets to null every time you submit the form. You don't need a real resource to resolve the field; you can do something similar to what I've done with this other package:

https://github.com/dcasia/table-widget/blob/630b78e006bb4927261f7afd79fecdf655c7eafc/src/TableWidget.php#L31-L33

[jaymeh]

Good call, that makes sense. So what I'm tempted to do is in my tool extend the Filepond field, then add a resolveValue function onto it and ensure it applies an empty array. My tool doesn't need to retrieve data back out again as it just serves as a way of creating models in bulk based on the file uploads. I have a resource and model to pull the data back out and handle edits.

I'll give that a go, thanks for your help!

[jaymeh]

Turns out I've overcomplicated this, only been using Nova for a week. Turns out what I want to achieve can easily be done via an action 🤦 .

I'm closing this for now but thank you again for all your help.