Help with jQuery and encode

[nam-co]

Hi, thanks for the excellent script, I was wondering if you could help mee, Im trying to send the images as base64 on submit, but Im always getting a filepond = null on post submit, what am I doing wrong?

Appreciate any help, thanks

plugins used: encode, resize and preview

<input type="file" class="comment_photos" name="filepond[]" multiple data-max-file-size="8MB" data-max-files="5" accept="image/jpg, image/jpeg, image/tif">

<script>

$.fn.filepond.registerPlugin(FilePondPluginImagePreview, FilePondPluginFileEncode);

$(function(){

  $('.comment_photos').filepond({
    allowMultiple: true,
    labelIdle: `Drag or <span class="filepond--label-action">Browse</span>`,
    allowImagePreview: true,
    allowFileEncode: true
  });

  $('.comment_photos').on('FilePond:addfile', function(e) {
      console.log(e);
  });

});

</script>

[rikschennink]

Is the filepond = null a server error?

Can you see the base64 encoded data in the hidden input fields created by FilePond?

Please note that big files might cause a browser to crash, in this case, a single 8MB file is probably enough to bring a mobile browser to its knees.

[nam-co]

thanks @rikschennink , null is the post request output

"filepond" => array:1 [▼
    0 => null
  ]

I see this being generated with each image:

[nam-co]

the file is just 1MB, but question: how do we handle uploads from phones for example, where every image is big on megapixels

[rikschennink]

Then I think it’s either too much data (try with a really small file), or you’re server function is expecting file objects?

[rikschennink]

Either resize the image on the client using the image transform plugin or upload the data async (set server property).

Unfortunately this is a browser limitation so there’s no work-around.

[nam-co]

yes, the server (Laravel) is expended to just var_dump all request info and files

I also tried with a 6k image, same thing I haven't install yet the "transform" or "resize" plugins, but I was expecting that the "encode" plugin will send the image data

[rikschennink]

It sends text data (base64 encoded files), so I think that might be the problem.

If you’re going to be sending big files I would go the async route. Set the server property to the location of your backend and it should automatically post actual file objects to your server, the server should then return a unique file Id (this then gets posted to the server along with the rest of the form so you know what files were uploaded).

[nam-co]

It sends text data (base64 encoded files), so I think that might be the problem. yes, but is not sending the code for small images, so Im definitely doing something wrong on the code

[rikschennink]

Alright, will try to setup a quick jQuery example when my laptop is done installing the latest version of MacOS 🙃

[nam-co]

Thanks a lot @rikschennink , your very helpful :)

[rikschennink]

This snippet correctly populates the hidden input fields generated by FilePond, when the parent form is submitted the data is correctly sent to the server.

<input type="file" class="my-pond" name="filepond" />

<script src="/github/filepond/dist/filepond.js"></script>
<script src="/github/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.js"></script>
<script src="/github/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>

<script src="/github/jquery-filepond/filepond.jquery.js"></script>

<script>
    $(function () {

        $.fn.filepond.registerPlugin(
            FilePondPluginImagePreview,
            FilePondPluginFileEncode
        );

        $('.my-pond').filepond();

    });
</script>

This is the Chrome network tab showing the POST:

[nam-co]

Thanks a lot @rikschennink , I will try it

[nam-co]

Hi @rikschennink sorry to be a pain in the ..., but I could not get it working, I really don't know what's wrong, I put the file online, maybe you have some time and know the answer

https://taxifacil.co/barranquilla/Bistro-51

sorry to bother you so much, really

[rikschennink]

Hey no worries! Will see if I can find out what’s up tomorrow morning.

[nam-co]

Thanks @rikschennink , if you press submit you can see the request data

[rikschennink]

@nam-co Found the problem, the 2.x version of the FileEncode plugin is only compatible with the latest version of FilePond (3.x). So you either have to update FilePond and the Image Preview plugin or you have to downgrade the FileEncode plugin and install the latest 1.x version.

[nam-co]

thanks a lot

[BuddhiAbeyratne]

also for future reference by other people googling with this issue filepond and laravel validation is a no go unless you are using the async approach. i hope i help someone not loos their head