pqina / filepond

🌊 A flexible and fun JavaScript file upload library
https://pqina.nl/filepond
MIT License
15.25k stars 828 forks source link

File Pond is not creating the hidden fields using this code [Bug] #871

Open joshmanhuwa opened 2 years ago

joshmanhuwa commented 2 years ago

Is there an existing issue for this?

Have you updated FilePond and its plugins?

Describe the bug

The following code is expected to create a hidden field with the base64String but nothing is happening, i am not getting the base64String in the request neither as a hidden field. I am in Laravel Blade

Reproduction

    <input type="file" multiple name="image" />

    <!-- Get FilePond JavaScript and its plugins from the CDN -->
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
    <script src="https://unpkg.com/filepond-plugin-file-validate-size/dist/filepond-plugin-file-validate-size.js"></script>

    <!-- FilePond init script -->
    <script>

    // Register plugins
    FilePond.registerPlugin(
        FilePondPluginFileEncode,
        FilePondPluginFileValidateSize,
    );

    // Set default FilePond options
    FilePond.setOptions({

        // allow multiple files
        allowMultiple: true,

        // allow file encoding
        allowFileEncode: true,

        // maximum allowed file size
        maxFileSize: '255KB',

        // upload to this server end point
        server:{
            process: '/image-upload',
            revert: '/image-delete',
            headers: {
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                }
            }
    });

    // Turn a file input into a file pond
    var pond = FilePond.create(document.querySelector('input[type="file"]'));

        pond.onaddfile = (err, item) => {

        if (err) {
            console.warn(err);
            return;
        }

        const dataURL = item.getFileEncodeDataURL();

        const base64String = item.getFileEncodeBase64String();

        }

    </script>

Environment

- Device:
- OS:
- Browser:
rikschennink commented 2 years ago

You need to remove server property.