https://discord.umbraco.com
Join Discord
[Solved] Dropzone.js with BeginUmbracoForm
# help-with-other
c
V13.5.3 Has anyone managed to get Dropzone.js working with a form built with BeginUmbracoForm? I have a form that has 3 text inputs and a file input to upload a photo. If I just use a file input type and don't attach Dropzone it all works swimmingly. When I attach Dropzone, the UI part looks great, but the IFormFile doesn't get populated in the controller. All the other fields do, so it's getting the right route, but there's something amiss in the Dropzone config I just can't get to the bottom of. If anyone's used it and got it working, I'd love a chat 😉 Meanwhile I'm having to show an ugly "Choose file" button. Thanks.
If anyone else comes across this, the answer was to revert back to a standard HTML form with an action of {controllerName}/{method} and a standard controller (not a Surface Controller) with the approriate method annotated with a Route. In my case, this was just to get a photo uploaded to a Member's account. The downside of not using a Surface Controller was that I've had to implement a page refresh to show the newly uploaded image. When it was just a File field to a Surface Controller then that wasn't an issue. I wouldn't be surprised if it doesn't need a refresh by some means or other, but I don't have infinite time available. If anyone knows how to architect it "properly" I'd love to hear it. But for now, it's working.
m
You might try Filepond (https://pqina.nl/filepond/), which had some success as a drop-in replacement for the file upload field for an Umbraco Form. It's supposed to allow your form to work as usual but provide a nice-looking UI layered on top. I think we modified the razor template just for the file upload field to include a script at the bottom:
Copy code
<script>
    try {
        window.addEventListener("DOMContentLoaded", (e) => {
            FilePond.registerPlugin(FilePondPluginImagePreview);
            FilePond.registerPlugin(FilePondPluginFileEncode);
            const inputElement = document.querySelector('input[name="4aa15d65-5ee9-453b-b20a-7f424fcd7e03"]');
            const pond = FilePond.create(inputElement, { storeAsFile: true });
        });
    } catch (error) {}
</script>
This is a quasi-private form for the org to ask for & collect photos and videos from employees. https://hearthavens.org/lp/media-submissions/
c
Thanks but I got it working in the end. It wasn't an Umbraco Form anyway. Good to know though 🙂
30 Views
PreviousNext
Powered by

Umbraco

A hub and casual space for you to interact with fellow community members and learn more about Umbraco!

Powered by