Leveraging JS File Uploader Libraries in PHP Forms: Example Using FilePond

Jim Dee
Jim Dee
Jul 8, 2019 · 10 min read

I ran into a situation recently where a client wanted a web page similar to an AirBnb-type page where they wanted to show numerous slideshows on a single web page (both integrated into a Google Maps map and also on other parts of the page).

One major consideration whenever you’re loading, say, 100 photos on a single page is bandwidth. You certainly don’t want someone going out on their new phone and snapping 100 photos at 4 or 5 megs each, and then uploading them and expecting the page to load quickly (if at all — and not to mention mobile performance).

Further complicating things, some of the slideshows needed to be small for this page, but others (using the same photos) needed to be different sizes. So, I needed various specific-sized versions of each photo as well, all optimized for filesize and quality.

Even further complicating the issue was the fact that they’re on shared hosting and I didn’t want to use that kind of a server for a lot of CPU-intensive graphics work. Nor did I like the idea of requiring the client to do a bunch of Photoshopping and FTP-ing files around.

Clearly, this meant considering some client-side Javascript solutions, of which there are a good number available. A few I saw were:

Please note: I’m not affiliated with any of them, and I expect there are other solutions available as well. But, for the purposes here, I’ll share my experiences with FilePond, authored by a guy named Rik Schennink from The Netherlands. My rationale for selecting FilePond to work with over the others was simply a few items:

  • I saw that it can optimize the images and create the transformed versions I wanted;
  • The time in between (a) throwing some demo code on a server and (b) actually getting some usable results to build from … was the best out of the above. (Your results may vary. And, full disclosure: I’m not the best JS guy in the world, as I spend about 90% of my time on server-side PHP and database applications!)

Anyway, while FilePond does indeed do all that it claims, there weren’t a ton of examples online showing how one might integrate this into a normal PHP form, which is what I needed to do. So, below, I’ll paste the code of an entire web page — very simplified — that shows the basics of this type of integration, and then I’ll talk about it a bit more below.

What’s Going On

Let’s start with the HTML part of the script. As you can see, in the <head>, I’m’ loading some CSS from FilePond’s CDN. You can also of course save those files locally and serve them locally. That’s what I wound up doing on my production project. The <style> is there simply for some prettifying so the below screenshots will look good as I talk about this.

In the <form> itself, note that the <input> is written like so:

That “filepond[]” part is important and took me a while to get right. I’d originally named the field just “filepond,” which wasn’t cutting it for multiple submissions (as then the multiples would not come through in the $_POST). So, if you’re allowing multiple file uploads (or even if you’re not), this works well.

You can then see all of the various scripts needed for the FilePond plugins I’ve elected to leverage. Again, I wound up serving them locally, but this also works. I believe the ordering also is maybe not *critical*, but the above does work well.

After that comes the custom <script> areas where you do stuff and create the FilePond. In the first one, we’re registering the needed plugins. I recommend their documentation for in-depth explanations of the functionality and methods available.

Down in the “FilePond.create” section, things get a little more tricky. This is the part that gave me the most trouble — not that it’ll give you trouble necessarily. But, I did find some sensitivity in this area. Most notably, for me, was the image transform areas. Some of the sample code floating around out there didn’t work well for me without some tweaking — sometimes just little things fairly-obvious like the image transform names needing quotes.

Other items weren’t as clear. For example, I found that, once I set the “imageResizeTargetWidth” param, I couldn’t get any transformed photos to come out smaller. If I set “imageResizeTargetWidth” to 500 (as in px), then my other two transforms would also come out as 500px, even if I’d set them to 100 and 200. But, they *would* upscale to, say, 1000px.

I managed to talk to the developer, Rik, about this. He told me that this relates to the “imageResizeMode” param going to “cover” by default, and recommended that I set it to “contain” instead. (It’s in my sample code, above, as a reminder, though it’s commented out.) That still didn’t quite solve it for me, but I probably did something wrong. And, besides, I actually got it working to my needs by simply reversing the order of things — setting “imageResizeTargetWidth” to the smallest size I needed and then having my two transforms get larger each time.

For example, using the exact code I posted… When I drop some cat pics on there, you see the 3 generated pics below, properly sized at 50, 100, and 200px, for each one. (My production model uses 100, 300, and 1000px — and also works great!)

Image for post
Image for post

BTW, you can remove this whole part (below), which I’d put in for troubleshooting purposes, based on the FilePond author’s recommendations in an article he wrote (recommended reading). It simply logs some info into the console and also posts the pre-sized previews onto the DOM as you’re working — both not necessary for production, but handy for dev work.

Image for post
Image for post

Anyway, what happens for PHP forms (using the code supplied) is that when you upload the photos, FilePond creates base64 encoded data for each one and passes that data along in the $_POST. (Note: You do not need to have FilePond base64 encode the files. That is total optional as a plugin, but this works very well when you’re integrating FilePond into a PHP form and simply want the pics sent as files in a $_POST.)

So, if I send those two photos, my $_POST will get back two objects in the “filepond” item.

Image for post
Image for post

Or, to show that more clearly… Let’s say I had an input field named “yourname”, and then the FilePond input with it’s two photos. The $_POST would look like this:

Image for post
Image for post

So, once you get your $_POST back, it’s simply a matter of validating your submissions, parsing the data as needed (your pics now residing in that “filepond” item, in two JSON wads), base64 decoding the photos (or other types of data you’re working with), and saving them somewhere (e.g., with PHP’s file_put_contents()). The sample code shows a very basic example of this, but you’ll find your production code probably gets much more complicated to fit your needs.

Results:

It took some work, but I have success on all of the following:

  • Accepts multiple files (photos in my case);
  • Crops them all to the size aspect ratio desired (the imageCropAspectRatio: ‘1:1’ setting in my code);
  • Generates two variants (and you can generate more or less if you need to) at the sizes I need;
  • All created files are at the quality setting I desire (mine is set to 50 to help keep file sizes reasonable / optimized for fast loading);
  • Also saves all of its files as JPGs. So, I can throw any source files at it (PNG etc.), but they all come back as JPG, in this case.

Notes: Improvements / Customizations, etc.

Working with these libraries, post-upload, you’ll need to be able to programmatically take the ball and run with it a good bit, as these uploaders are solely focused on getting files uploaded. After that, you of course need to do any additional coding yourself related to your uploaded files. File naming and other file management best practices come to mind, of course.

In my own production model, after upload & saving, I also do a quick redirect to the same page to clear out the $_POST so that people can’t inadvertently reload the page and re-upload the same photo data. (An old PRG trick, actually.)

NEW: Easily Add Image Editing Capabilities to Your FilePond Implementation!

Image for post
Image for post

Sometimes, in addition to providing image upload capability, as described herein, you may also want to let users do some photo editing as well.

Sometime soon, I plan to write up a standalone article on implementing this but, in the meantime, I wanted to at least mention this developer’s other product called Doka, which integrates directly with FilePond.

Doka is a premium product (not free). But, it’s also really powerful and slick. So, you may want to consider it, if you think providing such additional client-side image-editing functionality makes sense for your product.

Full-disclosure: I’ve been in touch w/ the developer about this, and would get a commission if you purchase it. But either way, if this sounds good to you, have a look at Doka via this link.

🤖 ✍🏻 Jim Dee maintains his personal blog, “Hawthorne Crow,” and a web design blog, “Web Designer | Web Developer Magazine.” He also contributes to various Medium.com publications. Find him at JPDbooks.com, his Amazon Author page, Facebook, Twitter, Instagram, LinkedIn, Medium, or via email at Jim [at] ArrayWebDevelopment.com. His latest novel, CHROO, is available on Amazon.com. If you enjoy humorous literary tales, please grab a copy!

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design /…

Sign up for Array Observations

By Web Designer / Web Developer Magazine

Sign up for alerts when new web design / web development (and related) articles appear on this site. Take a look

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Thanks to codernoon

Jim Dee

Written by

Jim Dee

Web guy at ArrayWebDevelopment.com; author of books & blogs. See: JPDbooks.com.

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development — jim@arraywebdevelopment.com.

Jim Dee

Written by

Jim Dee

Web guy at ArrayWebDevelopment.com; author of books & blogs. See: JPDbooks.com.

Web Designer / Web Developer Magazine

WDWD Magazine features articles on web site design / development, internet marketing, social media, SEO, and topics like marketing, communications, business development, etc. Editor: Jim Dee of Array Web Development — jim@arraywebdevelopment.com.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store