DEV Community: PQINA

The Trouble with Editing and Uploading Files in the Browser

Rik Schennink — Wed, 11 Sep 2019 11:51:07 +0000

With the introduction of the File API we gained the ability to edit files in the browser. We could finally resize images, unzip files in the browser, and generate new files based on interactions in the browser. One caveat though, you couldn't upload these files.

Well you could, but you had to resort to either XMLHttpRequest or fetch, see, it's not possible to set the value of a file input element. This means you can't submit a custom file along with a classic form submit, you have to asynchronously upload the file. This really put the brakes on any progressive enhancement solutions to file editing. If you decide to modify a file on the client, then you also have to make sure you make changes on the server so you can receive the modified file.

As a product developer building image editing products this really grinds my gears. I'd love to offer my products as client-side only solutions. But that's impossible because asynchronous file uploads require server-side modifications. WordPress, Netlify, Shopify, Bubble.io, they all offer default file input elements, but there's no straightforward way to support them without writing a client-side and server-side plugin. In the case of WordPress this means offering a plugin for each and every form builder out there. Not very realistic.

But something changed a couple months ago.

This article was originally published on my personal blog

Setting a custom file to a file input

It's really quite logical that we can't set the value of the file input element. Doing so would allow us to point it at files on the visitors file system.

<input type="file">

<script>
document.querySelector('input').value = 'some/file/i/want/to/have';
</script>

Obviously this is a huge security risk.

Setting the file input value property is of the table.

What about the file input files property? If we could somehow update the files property or update the files in it, that would solve the issue.

The files property holds a reference to a FileList. Great! Let's create a new FileList() and overwrite the one on the file input. Unfortunately there's no FileList constructor. There is also no "add a file" method exposed on the FileList instance. On top of that the File object doesn't have a method to update the file data in place, so we can't update the individual file objects in the files list.

Well that's it then.

And it was untill a couple months a go Hidde de Vries pointed me to this issue on the WHATWG, Turns out there's a different API we can use to achieve our goal.

Both Firefox and Chrome have recently added support for the DataTransfer constructor. The DataTransfer Class is most commonly used when dragging and dropping files from the user device to the webpage.

It has a files property of type FileList 🎉

It also has an items.add method for adding items to this list 🎉

Oh la la!

<input type="file">

<script>
// Create a DataTransfer instance and add a newly created file
const dataTransfer = new DataTransfer();
dataTransfer.items.add(new File(['hello world'], 'This_Works.txt'))

// Assign the DataTransfer files list to the file input
document.querySelector('input').files = dataTransfer.files;
</script>

Live Demo on CodePend

It just works. Fantastic! We now have a method to send files created on the client to the server without having to make any changes to the server-side API.

However. Sad Trombone. This doesn't work on IE, Edge, and Safari 13.

Alternatives for other browsers

If we want to submit our file data along with the form post, what can we offer users on these other browsers? There are currently two alternate solutions I can think of. One requires changes on the server, the other might be buggy depending on your use case.

Let's take alook.

Encode the file data
Capture the form submit

Encode the file data

We can encode the file data as a base64 string or dataURL, store the resulting string in a hidden input element and then send it on its way when the form is submitted. This will require changes to the server, the server will have to be aware an encoded file might be submitted as well. The server will also have to decode the dataURL and turn it back into a File object.

We can use the FileReader API to turn a File into a dataURL.

<input type="file">
<input type="hidden">

<script>
document.querySelector('input[type="file"]').onchange = e => {
    const reader = new FileReader();
    reader.onloadend = () => {
        document.querySelector('input[type="hidden"]').value = reader.result;
    };
    reader.readAsDataURL(e.target.files[0]);
};
</script>

A couple of issues my clients reported when using this method.

Security related scripts running on the server that monitor traffic might flag the form post as suspicious as it contains a lot of string based data.
When submitting large files, that means files above 1MB, it's highly likely the browser will crash with a "ran out of memory" error. This differs per browser, but I've seen it happen on both mobile and desktop browsers.
You don't see a change in the file input. So it's a good idea to reset, disable, or hide it when submitting the form.

Encoding files is a fine solution if you're dealing with small images, anything bigger than 1MB and I'd steer clear.

Capture the form submit

We can add custom files when submitting a form asynchronously. So another solution is capturing the entire form submit and asynchronously submitting the form to the same end point (action attribute) using XMLHttpRequest or fetch.

This is what I've tried to do with Poost (this is very much a prototype, also I'm bad at naming things on the spot). Poost captures the form submit, and then posts the form asynchronously instead. This allows us to build a custom FormData object, adding our custom file (stored in the _value property) instead of the files in the files property.

<input type="file">

<script>
// Create a new File object
const myFile = new File(['Hello World!'], 'myFile.txt', { type: 'text/plain', lastModified: new Date() });

// Assign File to _value property
const target = document.querySelector('input[type="file"]');
target._value = [myFile];
</script>

This actually works quite well. We post the same data to the same end point. Things start to get tricky when you realise that the returned page also needs to be rendered to the screen (normally the browser navigates to it). Where are we going to render it, what to do with the navigator history, how to deal with script tags on the page, what about IE (no surprise there).

Again, when setting _value you don't see a change in the file input. So it's a good idea to reset, disable, or hide it when submitting the form.
We're taking over a lot of default browser behavior, that is always a recipe for disaster.

Still, for very basic forms this works nicely. You don't have to modify the server and it could even be loaded conditionally as a fallback for when a browser doesn't support new DataTransfer().

The state of things

So our file upload situation, while it has improved, is still all but fantastic.

We're still stuck with these bandaid solutions because of IE, Edge, and Safari. If you have the luxury it's probably easier to make changes on the server to facilitate async transfers. If you're in a situation where that's impossible I hope the solutions offered above might just fit your situation perfectly and help you out.

If you have anything to add, do share below.

Generating Image Thumbnails in the Browser using JavaScript and FilePond

Rik Schennink — Fri, 14 Jun 2019 07:54:23 +0000

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 plugins. We'll combine a handful of these plugins to generate image thumbnails on the client.

If you want to code along, open an empty HTML file in your favourite text editor.

Let's get started.

In a hurry? View the end result here

Setting up FilePond

We'll start with a basic HTML outline and add an <input type="file"/>.

Please note that you can also import and use FilePond as an ES6 module, but for this tutorial we'll stick to plain HTML as it requires less project setup

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <input type="file">
  </body>
</html>

Let's add the required FilePond scripts and styles.

<!doctype html>
<html>
  <head>
    <title>Hello World</title>

    <!-- FilePond styles -->
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

  </head>
  <body>
    <input type="file">

    <!-- FilePond scripts -->
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

  </body>
</html>

And now we extend it with the FilePond initialisation logic.

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
  </head>
  <body>
    <input type="file">
    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>

    <!-- FilePond initialisation logic -->
    <script>
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);
    </script>

  </body>
</html>

This will tell FilePond to create a FilePond instance at the location of our file input.

If you run this in your browser the FilePond drop area will appear. It can handle a single file. We can add the multiple attribute to the input element to allow multiple files to be added.

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
  </head>
  <body>

    <!-- Add 'multiple' attribute -->
    <input type="file" multiple>

    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script>
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);
    </script>
  </body>
</html>

Okay, this is nice. Let's add some plugins.

Adding Plugins

Let's add the Image Preview, Image Resize, and Image Transform plugins.

The Image Preview plugin will show a preview of a dropped image. The Image Resize plugin will add resize information to the FileItem metadata, and lastly the Image Transform plugin, it will use the resize information to resize the actual image.

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

    <!-- Add plugin styles -->
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">


  </head>
  <body>
    <input type="file" multiple>

    <!-- Add plugin scripts -->
    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>

    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script>
    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement);
    </script>
  </body>
</html>

Refresh the page, nothing changed. Weird. For FilePond to use the plugins we need to register them with the library, this is not done automatically.

Let's extend our bottom initialisation <script> like shown below.

// register the plugins with FilePond
FilePond.registerPlugin(
  FilePondPluginImagePreview,
  FilePondPluginImageResize,
  FilePondPluginImageTransform
);

const inputElement = document.querySelector('input[type="file"]');
const pond = FilePond.create(inputElement);

To see this working, drop an image on the FilePond drop area, it now shows a preview of the image.

Showing a Resized Preview

It's now time to tell FilePond of our intentions. We can do this by passing a configuration object to the FilePond.create method.

const pond = FilePond.create(inputElement, {
  imageResizeTargetWidth: 256
});

This will instruct the resize plugin to add a resize entry to the FileItem metadata. We can view this metadata by adding the onaddfile callback.

const pond = FilePond.create(inputElement, {
  imageResizeTargetWidth: 256,

  // add onaddfile callback
  onaddfile: (err, fileItem) => {
    console.log(err, fileItem.getMetadata('resize'));
  }

});

The following will be logged to the developer console.

null, { mode: "cover", upscale: true, size: { width: 256, height: 256 } }

null means that there was no error when adding the file, and the rest of the data is related to the resize information added by the Image Resize plugin.

Let's now show the output of the Image Transform plugin. We can do this by adding the onpreparefile callback, it's called when the Image Transform plugin has "prepared" a file. It receives both the fileItem and the output Blob object of the Image Transform process.

const pond = FilePond.create(inputElement, {
  imageResizeTargetWidth: 256,
  onaddfile: (err, fileItem) => {
    console.log(err, fileItem.getMetadata('resize'));
  },

  // add onpreparefile callback
  onpreparefile: (fileItem, output) => {
    // create a new image object
    const img = new Image();

    // set the image source to the output of the Image Transform plugin
    img.src = URL.createObjectURL(output);

    // add it to the DOM so we can see the result
    document.body.appendChild(img);
  }

});

The resized image now appears on the page below the FilePond drop area.

It should be 256 pixels wide, and depending on the aspect ratio of the image its height might exceed 256 pixels. That's because imageResizeMode is set to 'cover', setting it to 'contain' will make sure that the output image is always contained inside the resize target dimensions.

Let's set imageResizeMode to 'contain' now.

const pond = FilePond.create(inputElement, {
  imageResizeTargetWidth: 256,

  // set contain resize mode
  imageResizeMode: 'contain',

  onaddfile: (err, fileItem) => {
    console.log(err, fileItem.getMetadata('resize'));
  },
  onpreparefile: (fileItem, output) => {
    const img = new Image();
    img.src = URL.createObjectURL(output);
    document.body.appendChild(img);
  }

});

Alright, we've accomplished generating a single thumbnail, now let's generate multiple.

Generating Multiple Thumbnails

The Image Transform plugin has a couple configuration values of its own.

By setting the imageTransformOutputQuality property we can control the image output quality and we can convert images to JPEGs by setting the imageTransformOutputMimeType to 'image/jpeg'

The property we need now is imageTransformVariants, it's there to create additional versions of a file. We'll generate two additional versions of the image, one 512 pixels wide, and one 64 pixels wide.

const pond = FilePond.create(inputElement, {
  imageResizeTargetWidth: 256,
  imageResizeMode: 'contain',

  // add imageTransformVariant settings
  imageTransformVariants: {
    thumb_medium_: transforms => {
      transforms.resize.size.width = 512;
      return transforms;
    },
    thumb_small_: transforms => {
      transforms.resize.size.width = 64;
      return transforms;
    }
  },

  onaddfile: (err, fileItem) => {
    console.log(err, fileItem.getMetadata('resize'));
  },
  onpreparefile: (fileItem, output) => {
    const img = new Image();
    img.src = URL.createObjectURL(output);
    document.body.appendChild(img);
  }
});

Nuts! Our script throws an error.

Failed to execute 'createObjectURL' on 'URL': No function was found that matched the signature provided.

It's telling us that whatever we're trying to create a URL to, it's not working.

This is because we're now generating multiple files. Our output parameter in the onpreparefile callback has changed to an array. Let's alter the code so it can deal with a list of files.

const pond = FilePond.create(inputElement, {
  imageResizeTargetWidth: 256,
  imageResizeMode: 'contain',
  imageTransformVariants: {
    thumb_medium_: transforms => {
      transforms.resize.size.width = 512;
      return transforms;
    },
    thumb_small_: transforms => {
      transforms.resize.size.width = 64;
      return transforms;
    }
  },
  onaddfile: (err, fileItem) => {
    console.log(err, fileItem.getMetadata('resize'));
  },

  // alter the output property
  onpreparefile: (fileItem, outputFiles) => {
    // loop over the outputFiles array
    outputFiles.forEach(output => {
      const img = new Image();

      // output now is an object containing a `name` and a `file` property, we only need the `file`
      img.src = URL.createObjectURL(output.file);

      document.body.appendChild(img);
    })
  }

});

Dropping a file now result in three images being added to the DOM, all matching the widths provided.

We can take this further by adding the Image Crop plugin, we can then tell FilePond to automatically crop the output images in certain aspect ratios.

Let's do this quickly and then call it a day.

<!doctype html>
<html>
  <head>
    <title>Hello World</title>
    <link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">

    <!-- Add plugin styles -->
    <link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">


  </head>
  <body>
    <input type="file" multiple>

    <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-resize/dist/filepond-plugin-image-resize.js"></script>
    <script src="https://unpkg.com/filepond-plugin-image-transform/dist/filepond-plugin-image-transform.js"></script>

    <!-- add the Image Crop plugin script -->
    <script src="https://unpkg.com/filepond-plugin-image-crop/dist/filepond-plugin-image-crop.js"></script>


    <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script>
    FilePond.registerPlugin(
      // register the Image Crop plugin with FilePond
      FilePondPluginImageCrop,
      FilePondPluginImagePreview,
      FilePondPluginImageResize,
      FilePondPluginImageTransform
    );

    const inputElement = document.querySelector('input[type="file"]');
    const pond = FilePond.create(inputElement, {
      // add the Image Crop default aspect ratio
      imageCropAspectRatio: 1,
      imageResizeTargetWidth: 256,
      imageResizeMode: 'contain',
      imageTransformVariants: {
        thumb_medium_: transforms => {
          transforms.resize.size.width = 512;

          // this will be a landscape crop
          transforms.crop.aspectRatio = .5;

          return transforms;
        },
        thumb_small_: transforms => {
          transforms.resize.size.width = 64;
          return transforms;
        }
      },
      onaddfile: (err, fileItem) => {
        console.log(err, fileItem.getMetadata('resize'));
      },
      onpreparefile: (fileItem, outputFiles) => {
        outputFiles.forEach(output => {
          const img = new Image();
          img.src = URL.createObjectURL(output.file);
          document.body.appendChild(img);
        })
      }
    });
    </script>
  </body>
</html>

You can view a live demo below. Drop an image file and you'll see three different output files.

A big square measuring 256 x 256 pixels.
A landscape rectangle with a width of 512 pixels and a height of 256 pixels.
A tiny 64x64 pixel square.

Images are resized on a separate thread so the image generation process is fairly quick and doesn't block the user interface.

We could now use the Image Filter plugin to also generate a grayscale version of the image by applying a CoorMatrix to each pixel, but I think we've got our bases covered for now. We've learned how to generate thumbnails on the client and how to leverage FilePond to do so.

I hope this has been useful to you, do let me know if you have any questions, I'm happy to answer them below.

Using Snippy to Upload Images to the WordPress Media Library

Rik Schennink — Tue, 28 May 2019 14:21:56 +0000

This quick guide shows you how to set up a form to upload images to your media library using the free WordPress plugin Snippy.

Creating a File Upload Handler

First step, let's open your themes functions.php file, and add the code snippet below. This will create a location for us to send our files to.

function handle_my_file_upload() {

    // will return the attachment id of the image in the media library
    $attachment_id = media_handle_upload('my_file_field', 0);

    // test if upload succeeded
    if (is_wp_error($attachment_id)) {
        http_response_code(400);
        echo 'Failed to upload file.';
    }
    else {
        http_response_code(200);
        echo $attachment_id;
    }

    // done!
    die();
}

// allow uploads from users that are logged in
add_action('wp_ajax_my_file_upload', 'handle_my_file_upload');

// allow uploads from guests
add_action('wp_ajax_nopriv_my_file_upload', 'handle_my_file_upload');

There are a couple things to take note of:

handle_my_file_upload is the name of the function that will deal with the upload, both add_action calls reference it.
wp_ajax_ and wp_ajax_noprive_ are default hooks, we add my_file_upload to them to allow communication with our form which we'll set up next.
Comment out the nopriv call to prevent file uploads from guests.

Creating the Form

Alright now we need to add a <form> to give the user a location to select the images they want to upload.

We'll use the free WordPress plugin Snippy to create a shortcode that we can use everywhere on our WordPress website.

With Snippy installed we'll start by creating an HTML bit. Click on the "Snippy/Add Bit" menu item. Name your HTML bit "file-form". Set type to "HTML". And paste the code below in the textfield.

<form action="{{admin_url}}" method="POST" enctype="multipart/form-data">
    <input type="hidden" name="action" value="my_file_upload"/>
    <label for="image">Select file:</label>
    <input type="file" id="image" name="my_file_field" accept="image/*"/>
    <button type="submit">Upload</button>
</form>

my_file_upload corresponds to the value used in the add_action calls.
my_file_field corresponds to the value used in the media_handle_upload call.

Now we'll create our custom shortcode.

Click "Snippy/Add Shortcode" and use "file-upload" as the name. In the "Available bits" list we select our "file-form". Click Save.

That's it! We now have a form shortcode at our disposal.

[file-upload/]

Add it to a page (using the page editor), refresh the page, your file upload form should now appear.

Bonus: Editing the Image

Let's upgrade our form to allow our users to edit dropped images using Doka

We can use Snippy to add the Doka files to the page.

Create a new local resource bit and select the Doka CSS file (doka.min.css).
Create another local resource bit and select the Doka JavaScript file (doka.min.js).
Create a JavaScript bit and add the following code.

document.addEventListener('change', function(e) {

    // Store reference to the field to make later code easier to read
    var field = e.target;

    // Only intercept fields of type file that accept images
    if ((field.type !== 'file') || (!/image\/*/.test(field.accept))) return;

    // Get reference to parent form
    var form = field.form;

    // Edit dropped image with Doka
    Doka.create({

        // The file the user selected
        src: field.files[0],

        // We allow the user to crop and filter the image
        utils: ['crop', 'filter'],

        // Called when the user is done editing
        onconfirm: function(output) {

            // Create a new FormData object based on the information in the form
            var formData = new FormData(form);

            // Overwrite the file data with the modified file
            formData.set(field.name, output.file, output.file.name);

            // Post async to the server
            fetch(form.getAttribute('action'), {
                    method: form.getAttribute('method'),
                    body: formData
                })
                .then(function(id) {
                    alert('done!') // Or redirect to another page
                });
        }
    });

});

Now we can link these newly created bits to our "file-upload" shortcode by clicking the "Snippy/Shortcodes" menu item and editing our "file-upload" shortcode. Select the bits we just created and click "Save".

Refresh the page and select an image, Doka should open the image and when clicking done the edited image should appear in the WordPress Media Library.

Security

To make this solution a little bit more secure we can add a WordPress nonce field.

Edit the HTML form like this:

<form action="{{admin_url}}" method="POST" enctype="multipart/form-data">

    {{nonce_field:my_file_upload, my_nonce_field}}

    <!-- ...This part of the form remains untouched -->

</form>

And add the following if statements to the functions.php file so it checks if the form post is valid and came from your own site.

<?php
function handle_my_file_upload() {

    if (empty($_POST)) {
        http_response_code(400);
        echo 'Nothing data received.';
        die();
    }

    if (!wp_verify_nonce($_POST['my_nonce_field'], 'my_file_upload')) {
        http_response_code(400);
        echo 'Unknown error.';
        die();
    }

    /* ...The rest of the function stays the same */

}

Conclusion

That's it! We're done. These code snippets should give you a good idea of what is required for uploading files with WordPress and how to build uppon it. If you were not familiar with Snippy this should've been a nice introduction on how it can help you manage small parts of your WordPress site.

That said. This is still a bare bone solution that can be further build uppon with redirects, upload progress indicators, sending additional form data, and more. I'll leave that for a future article.

Poor Man's Dark Mode Using CSS Filter

Rik Schennink — Mon, 15 Apr 2019 12:15:15 +0000

Tap the "dark mode" checkbox in the top right corner.

The checkbox only toggles the dark-mode class on the <html> element.

What does the dark-mode class do?

html.dark-mode {
    filter: invert(100%);
}

html.dark-mode img {
    filter: invert(100%);
}

The filter property set to invert(100%) will invert all colours on the page. Because it's been assigned to img as well (and all images will be in the subtree of the <html> element) it will invert the colours again on each <img> element preventing the images from looking like photo negatives.

Voila! 🚀

How to upload files with Vue and FilePond

Rik Schennink — Fri, 12 Apr 2019 14:02:39 +0000

The FilePond file upload library has been around for a year, let's explore how we can integrate it with Vue. In this article we'll set up a new Vue app and link up the app with the Vue FilePond adapter. When that's done we'll set up a connection to a backend that will receive our uploaded files.

We’ll use Vue CLI to quickly create our base Vue application. If you’re familiar with this process you can probably skip to the Integrating with FilePond section.

Creating a Vue app

Assuming you've already installed Node and Vue CLI (if you don't have them installed, this would be a good time), run the following command from your terminal. It will create a folder "my-app" which will contain our Vue app.



vue create my-app

We'll be presented with one or more questions, we'll go with the default choices.

When the installation has completed, navigate to the project with the following command.



cd my-app

Now start the development server with the following command.



npm run serve

We can now navigate to http://localhost:8080/ to view our Vue app.

You can stop the Vue app from the command line by pressing both the CTRL and C key at the same time.

Integrating with FilePond

With our Vue app ready we can now add the FilePond Vue adapter.

Let’s stop the app (press CTRL + C) and install the adapter.



npm install filepond vue-filepond --save

Now that the adapter files have installed, let’s fire up the app again so we can start making changes.

We’ll add the FilePond component to the app landing page, in reality you’ll probably move it somewhere else, but for the purpose of this article this will suffice.

We first need to import the FilePond component and its CSS file.

Open the "src/App.vue" file and add the following lines to the top of the <script> block.



import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';

Now we need to register our FilePond component. We do this by adding it to the components list like shown below.



export default {
  name: 'app',
  components: {
    FilePond: vueFilePond()
  }
}

Next step is to add the component to the HTML. Let’s edit the HTML in the <template> tag and replace the contents of the <div> with the <FilePond/> tag.



<template>
  <div id="app">
    <FilePond/>
  </div>
</template>

The FilePond drag n' drop area should now render to the screen 🚀

Now we can start configuring FilePond to our wishes.

By default FilePond only accepts one file, this is because underwater it enhances the default file input element and copies its standard behaviour.

To enable multiple file mode lets add the allowMultiple attribute.



<FilePond allowMultiple="true"/>

Let's drop a folder or select multiple files to see it in action.

Just like the classic file input, files are loaded to FilePond but don’t do anything else, they just sit there. We most likely want to send them to our backend. We’ll do this by supplying FilePond with the server attribute.

If you’ve got a server ready, and it is set up to handle file objects you can probably use that, if not, we can set up the FilePond PHP Boilerplate (download the repository and run vagrant up).



<FilePond allowMultiple="true" server="http://192.168.33.10"/>

With the server location configured, FilePond will automatically POST dropped and selected files to the supplied URL.

The default FilePond server calls are described in the server configuration docs. The server attribute can be fine-tuned to a high degree, this allows FilePond to be integrate with basically any remote or local file storage solution.

Let's register the FilePond image preview plugin to make dropped images look a bit nicer.



npm install filepond-plugin-image-preview --save

Now we need to import and register the plugin with the FilePond core. We’ll have to alter the vueFilePond call to use the image preview plugin.



import vueFilePond from 'vue-filepond';
import 'filepond/dist/filepond.min.css';

import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';

export default {
  name: 'app',
  components: {
    FilePond: vueFilePond(FilePondPluginImagePreview)
  }
}

Done! Let’s restart the app and drop our first image.

And that’s it, the basics of file uploading with Vue and FilePond.

You can further enhance the component with features like automatic EXIF orientation correction, image cropping, resizing, client-side image transforms, image editing, and various other plugins.

There’s a whole list of properties and events you can configure to make FilePond fit your needs.

If you have any questions, find me on Twitter or drop a comment below.

CSS Smooth Scrolling

Rik Schennink — Thu, 14 Feb 2019 08:31:18 +0000

Last year, while building the FilePond product page I stumbled upon the scrollIntoView API. It's a handy method to instruct the browser to scroll an element into the viewport.

This article was originally published on my personal blog

The scrollIntoView API can be instructed to animate the scrolling part by adding the behavior property on the scrollIntoViewOption object.



element.scrollIntoView({ behavior: 'smooth' });

I quickly jumped on my JavaScript horse and wrote a tiny script to automatically detect clicks on anchors so the browser would animate the jump towards the anchor target. This jump can be really disorienting, so animating this process would improve the user experience quite a bit.

scrollIntoViewOption currently only works on Firefox and Chrome.

I posted it on Twitter and called it a day.

Then, Hans Spieß points out that this can also be done with CSS, WHAT!?

Turns out there's a scroll-behavior CSS property that we can set to smooth, it's literally that literal. It's almost like awesome: yes-please. We can set the scroll-behavior property to the container we want to exhibit smooth scroll behavior and we're done.

I created a new demo using only CSS.

Before we go nuts and apply this to all our sites, there are a couple of things we need to keep in mind.

Scroll distance matters

If there is a lot of distance to travel, Firefox will skip content to keep the scroll time-limited, while Chrome has a max velocity and will just take its time to get to the target.

We could use Smart CSS to detect long pages and conditionally apply the smooth scroll style.

Accessibility

People might get motion sickness when watching the animation. To circumvent this you can wrap the CSS property in a prefers-reduced-motion media query. Unfortunately, Chrome does not support this. Safari supports it, but Safari doesn't support smooth scrolling.



.my-smooth-container {

  scroll-behavior: smooth;

}

@media (prefers-reduced-motion: reduce) {

  .my-smooth-container {

    scroll-behavior: auto;

  }

}

Conclusion

When deciding on a new functionality we shouldn't reach out to JavaScript immediately. We should do a quick search first to find out if it can be done with CSS as well. The scroll-behavior property can be a nice UX improvement, do make sure you disable it on very long pages and offer an option to disable it to keep your pages accessible.