DEV Community

Cover image for Generating Image Thumbnails in the Browser using JavaScript and FilePond

Generating Image Thumbnails in the Browser using JavaScript and FilePond

Rik Schennink on June 14, 2019

FilePond is a free JavaScript File Upload Library. In this article we'll explore the functionality of FilePond and how it can be extended with plug...
Collapse
 
msoutopico profile image
Manuel Souto Pico

Thanks for this tutorial. Not really interested in uploading images, but it's useful for uploading files in general. This all works fine on my page, my problem is that I don't see where the uploaded files are stored in the server. Can you help with that?

Collapse
 
rikschennink profile image
Rik Schennink PQINA

The FilePond server property defines where the files are uploaded.

If you setup a server end point at the same location it’ll push the data to that server end point as multiparty FormData

Collapse
 
msoutopico profile image
Manuel Souto Pico

THanks Rik. Yes, I'm using setOptions({ server: './api' }) and the <file-pond/> component has attribute server="./api". I undertand that points to the "api" folder at the root of my vue application. That should be fine, so the error must be somewhere else. I'll keep investigating, thanks!

Collapse
 
dkohno profile image
DKohno

Rik, nice work..well done.

I notice that metadata tags are also supported, but I can't seem to find a live example. Is there an example available? My goal is to use FilePond, for uploading and tagging files to a document library.

Many thanks...Dave

Collapse
 
rikschennink profile image
Rik Schennink PQINA

Hi Dave! File metadata is sent along with the post and is available on the server under the same name as the file input field. So, for example, in PHP that would be something like this:

$_POST['field_name'] // file metadata
$_FILES['field_name'] // file object
Collapse
 
alignsoft profile image
Stephen R. Smith

This looks absolutely fantastic! I've spent the last few hours trying to find some insight into how to use this with PreSigned URLs and S3, and while I have found other people looking for the same thing, I can't find any solutions.

It sounds like it should be possible, but I can't see a clear place to start.

Right now I have a set or array of files I iterate over, sending each to a Node backend to get a PreSigned S3 URL, then I POST the file to that URL directly from the front end. I don't see any way to hook into FilePond to leverage that mechanism.

Collapse
 
rikschennink profile image
Rik Schennink PQINA

Glad to hear that! You can probably use this implementation as a starting point: github.com/pqina/filepond/issues/58

Collapse
 
michael_saul_360e757ae013 profile image
Michael Saul

This may be a simpleton question, and may have been asked, but is there an example where the generated thumbnail, and the original image, can be saved to a folder within the site path, and with full filenames ("/imageUploads/testimage1.jpg" and "/imageThumbs/testimage1_thumb.jpg", for example)?

Collapse
 
zymawy profile image
Ironside

Thank You For Such Article!! 💯