pqina / filepond

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

Issue with multiple input with same name #237

Closed xerod closed 5 years ago

xerod commented 5 years ago

Summary

Problems when having multiple input with the same name filepond. I have try the filepond[] but still no luck. Is there any problem i miss?

How to reproduce

i'm using laravel 5.7 and this is my setOptions:

FilePond.setOptions({
                server: {
                    url: '/upload',
                    process: {
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    }
                }
            });

the /upload is goes to my route then saved on /tmp.

Expected behaviour

When i call $request->get('filepond'); or other name, it should return the file path of the exact file input.

Additional information

the real problem is: when we use multiple input, filepond always using the same name: filepond and it ruin the request so it's only get the latest upload. Is there any possible solution?

any help appreciated

rikschennink commented 5 years ago

Apparently this should be possible with Laravel, it works fine with the php boilerplate project https://stackoverflow.com/questions/33682266/laravel-5-multiple-form-inputs-with-the-same-name-but-keeping-the-order

xerod commented 5 years ago

another issue is, when i tried to add name="filepond[]" it turns to error "Error during upload"

xerod commented 5 years ago

this is my code:

FilePond.setOptions({
                server: {
                    url: '/upload',
                    process: {
                        headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        }
                    }
                }
            });

            FilePond.registerPlugin(
            FilePondPluginFileEncode,
            FilePondPluginFileValidateType,
            FilePondPluginFileValidateSize,
            FilePondPluginImageExifOrientation,
            FilePondPluginImagePreview,
            FilePondPluginImageCrop,
            FilePondPluginImageResize,
            FilePondPluginImageTransform,
            FilePondPluginImageEdit
            );

            FilePond.create(
                document.getElementById('imgupload'),{
                    maxFileSize : '5MB',

                }
            );

            FilePond.create(
                document.getElementById('uploadktp'),{
                    maxFileSize : '5MB',

                }
            );

            FilePond.create(
                document.getElementById('uploadnpwp'),{
                    maxFileSize : '5MB',
                }
            );

            FilePond.create(
                document.getElementById('avatar'),{
                    labelIdle: `<span class="filepond--label-action">Foto Profile</span>`,
                    imagePreviewHeight: 170,
                    imageCropAspectRatio: '1:1',
                    imageResizeTargetWidth: 200,
                    imageResizeTargetHeight: 200,
                    stylePanelLayout: 'compact circle',
                    styleLoadIndicatorPosition: 'center bottom',
                    styleButtonRemoveItemPosition: 'center bottom'
                }
            );

is there something that i missed?

xerod commented 5 years ago

Closed, there's something wrong with my controller. I make a workaround here:

        $file = array(
            'uploadktp' =>  $request->file('uploadktp'),
            'uploadnpwp' =>  $request->file('uploadnpwp'),
            'avatar' =>  $request->file('avatar'),
            'imgupload' =>  $request->file('imgupload'),
        );

        foreach ($file as $key => $value) {
            if (empty($value)) {
                unset($file[$key]);
            }
        }

        foreach ($file as $key => $value) {
            $files = $request->file($key);
            return Storage::put('public/images', $files);
        }