DEV Community: Rik Schennink

Crop Images Before Upload With JavaScript

Rik Schennink — Thu, 24 Mar 2022 10:11:43 +0000

In this 3 minute tutorial we use CropGuide, a JavaScript image cropper, to crop images before they’re uploaded to our server without making any changes to existing file upload code.

We’ll assume that a form with a file upload field has already been set up.

Our goal is to add image editing to this field without having to modify any existing code.

Why help your users Crop Images?

To speed up the image upload. A lower image size results in faster uploads, improved upload stability, and less disk usage;
To receive better user generated content. With some guidance users can crop the important parts of an image;
To lower image upload friction. End users aren’t designers. If an image isn’t in our desired aspect ratio or bigger than the maximum file size they won’t always know how to fix that;

When we optimise images before uploading, we not only get better images, we also get more images because there’s less users that will exit our form out of frustration.

Using CropGuide to Crop Images

In this tutorial we’ll use CropGuide as our JavaScript image cropping solution.

CropGuide helps with:

Enforcing a crop aspect ratio;
Requiring a minimum image size;
Automatically scale images to a maximum size;
Compressing images or converting image formats;
Fixing image orientation issues;

Installation only takes a couple minutes and requires two steps:

We create a CropGuide account
We add the CropGuide <script> to our webpage
Done!

CropGuide now automatically intercepts each file upload and offers an image editor to the user. We can set our image requirements in the CropGuide dashboard.

Important: Images aren’t uploaded to CropGuide, image editing happens in the browser which is great for privacy and performance.

This is what our code looks like.

<!-- The existing file input somewhere in our form -->
<input type="file" />

<!-- The script tag we just added to our page -->
<script defer src="https://cdn.crop.guide/loader/l.js?c=123ABC">
</script>

Try out the image editor here

CropGuide works with basic file input elements but works just as well with advanced JavaScript file upload libraries.

Wrapping up

We’ve added image cropping to our website by inserting a single script tag on our webpage. There was no need to edit any server logic, or adjust any JavaScript, saving us lots of time.

Our users can now more easily upload images, resulting in higher quality images and more images uploaded. We save time correcting image problems on the server and helping users prepare their images.

Edit images before uploading them to your Wordpress media library

Rik Schennink — Fri, 26 Mar 2021 13:15:46 +0000

In this short tutorial we'll use a custom <image-input> element to add image editing and uploading to any WordPress website front-end.

This will be all the code we need on the front-end:

<image-input
  name="my_field"
  store="<?php echo admin_url('wp_ajax.php') ?>"
  post-action="image_upload"
  post-nonce="<?php echo wp_create_nonce('my_field') ?>">
</image-input>

Let's take a look at the demo so we know what we're going to build.

This article was originally published on pqina.nl. The editing functionality and custom field in this article are provided by Doka Image Editor.

Ready? Let's get started!

To help our customers edit and upload images we need to make three small changes to our WordPress website.

Load the image-input stylesheet and script.
Copy a PHP script to handle the image upload.
Add the image-input HTML element on the page we want to upload from.

We'll go over them step by step.

#1 Loading image-input the stylesheet and script

We navigate to our themes functions.php file, we can find it in the admin menu by clicking Appearance -> Theme Editor -> Theme Functions. Alternatively we can open the theme folder and find the functions.php file using an FTP client.

We'll start by adding the following two lines to our themes functions.php file this will load the editor styles and scripts. We can add them to the top.

Note that this assumes that both image-input.css and image-input.js are located in theme-folder-name/image-input/

// This loads the Image Input element styles
wp_enqueue_style(
    'image-input-style',
    get_template_directory_uri() . '/image-input/image-input.css',
    array(), false
);

// This loads the Image Input custom element and Image Editor functionality
wp_enqueue_script(
    'image-input-script',
    get_template_directory_uri() . '/image-input/image-input.js',
    array(), false, true
);

Don't close the file, we'll need it for the next step.

#2 Set up the PHP script that handles the image upload

Below our code that loads the styles and scripts we copy this PHP snippet. It will handle the image upload and move uploaded images to the WordPress media library.

add_action( 'wp_ajax_image_upload', 'handle_input_image' );
add_action( 'wp_ajax_nopriv_image_upload', 'handle_input_image' );

function handle_input_image() {

    // Allow this image to be uploaded?
    if (!wp_verify_nonce( $_POST['nonce'], 'my_field' )) {
        http_response_code(403);
        die();
    }

    // These files need to be included to upload the image
    require_once(ABSPATH . 'wp-admin/includes/image.php');
    require_once(ABSPATH . 'wp-admin/includes/file.php');
    require_once(ABSPATH . 'wp-admin/includes/media.php');

    // Let WordPress handle the upload
    $image_id = media_handle_upload( 'my_field', 0 );

    // Test if upload succeeded
    if (is_wp_error($image_id)) {
        http_response_code(500);
        die();
    }

    // Finished upload, return the image id
    http_response_code(200);
    echo $image_id;
    die();
}

#3 Add the image-input HTML element

We're nearly done, all that is left is adding the image-input HTML element to the page.

We'll open the webpage we want to allow users to upload from and add the following HTML to the page.

<image-input
  name="my_field"
  store="<?php echo admin_url('wp_ajax.php') ?>"
  post-action="image_upload"
  post-nonce="<?php echo wp_create_nonce('my_field') ?>">
</image-input>

Note that the my_field name is also used in the PHP snippet, it is used to find our image file.

The image_upload name in the post-action attribute links our field to the add_action hooks both ending with image_upload.

Finally the post-nonce is used to check if the form post was done in a secure manner.

After refreshing the webpage we're ready to upload our first image!

If you want to change the behaviour of the editor you can find more information on the image-input element here.

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.

or
? Do you know when to choose which?

Rik Schennink — Mon, 17 Jun 2019 10:04:17 +0000

When to mark up information as a list? It seems such an easy task. But if you’ve been at it for a while your brain starts seeing lists everywhere. The next couple of tricks help you decide if information should be marked up as a list, and if so, if that list is unordered or ordered.

Are you looking at a list?

Information should be marked up as a list if it consists of a set of similar items. For instance, search results, or navigation items. Sometimes when converting a visual design to HTML you might notice every single element collection starting to feel like a list. When it feels like you're in that kind of situation, ask yourself:

"Should screenreader software announce the number of items?"

If it should, the information you’re looking at is definitely a list.

Another way would be to ask yourself if it would be weird if the items in the list would be marked with bullets or numbers (trick by @stommepoes). If it’s not weird, we got a list on our hands.

Should the list be ordered?

Now that we've found a list we need to decide if it's an ordered <ol> or if it's an unordered <ul> list.

The w3 spec states the following about about ordered lists:

A list in which the items are intentionally ordered, such that changing the order would change the meaning of the list.

If changing the order of the list causes the list to lose any meaningful data then it should be marked up as an ordered list.

For instance the following lists should be formatted as an <ol>

Search results (assuming they’re returned by relevance). Shuffle the list items and suddenly you can no longer determine the relevance of each item.
Article comments. Shuffling the comments causes comments referencing earlier comments to lose meaning.
IKEA furniture instructions.

If a list does not lose information when shuffling the items it’s safe to go with the <ul> instead of the <ol> element.

That's it, you now possess the super power to determine if if some bit of information should be marked up as a list or not. Let me know if you have any questions, happy to answer them 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.

The Fantastically Magical handleEvent Function

Rik Schennink — Tue, 29 Jan 2019 21:10:22 +0000

Let's take a look!

I remember how I reacted when I found out about this years ago, also I still had a majestic mustache.

That's right, this works, it's weird but it does.

If you set an object as the handler to addEventListener and said object has a property that is named handleEvent and that property is of type function the event is automatically sent there.

The reason this works (and works on all browsers):

The need for compatibility with legacy content required EventListener to accept both a function and an object with a handleEvent() property function.

EventListener on MDN

Another nice thing about this is that this keeps this working.

So, no need for bind(this) to ensure you end up in the right scope. Also, events are easily removed with removeEventListener('click', this)

Instead of having different functions to handle events, you can use a single handleEvent function to route all kinds of events.



class MyClass {

  constructor() {

    // Get a reference to the button node
    const btn = document.querySelector('button');
    const input = document.querySelector('input');

    // Handle clicks by this
    btn.addEventListener('click', this);

    // Handle input by this
    input.addEventListener('input', this);

  }

  handleEvent(event) {
    if (event.type === 'click') {
      // handle button clicks 
    }
    else if (event.type === 'input') {
      // handle text input
    }
  }

}

I hope this sparked some interesting new ideas for you to work with!

Using Smart CSS to Time Your Wonderful Newsletter Popup

Rik Schennink — Tue, 29 Jan 2019 13:58:20 +0000

In the previous article on Smart CSS we used the user's scroll position to trigger a floating navigation header.

This article was originally published on my personal blog

Let's take it a step further and see if we can use this technique to determine if a user is interested in subscribing to our newsletter. Imagine this is a newsletter on a website that presents the user with an article like the one you're reading now. The goal is to trigger the user into subscribing so we can send a notification if a new article is published in the future.

We'll assume the marketing department has us at gunpoint and is ordering us to show a popup with a subscription form. Personally, I would rather show the form beneath the article, inlined in the page, but you probably know how these things go.

How to determine the best moment to show this popup?

Imagine you're shopping in real life, you wander into a random shop, you haven't even crossed the doorstep and the shop keeper jumps in your face and asks you if you want to receive their monthly newsletter. This would be weird, right?

On the internet, the above behavior is somehow the norm.

Maybe it would be a good start to gauge the user's interest in our newsletter before we ask. How do we determine this potential interest? Let's go back to our random shop.

Suppose the following:

I've visited the shop before
I've spent some time wandering the shop
I've actually purchased something
I've had a positive interaction with the shop keeper

If a couple of these had a green light, I would still not welcome the shop keeper jumping in front of me, but I certainly would not mind them asking me at the counter, and if that would happen, I might even subscribe.

Are there equivalents to this in our online environment? I can think of a couple of data points, but do let me know in the comments if you have any other suggestions.

The user spent some time on the site
The user has been reading the page
The user has spent some time on the current page
The user has made a purchase

Translating these data points to variables

To determine if the user has visited the site before we can store the time she spent on our site in a session variable using localStorage. By calculating the time spent on each page and saving it to localStorage at a certain interval we can know how long the user has been browsing the site. And thus, we can determine how familiar the user is with our platform, are we a random shopkeeper? Or have we met before?

By measuring how far the user has scrolled down on the page we can determine if he is interacting with the site. If the page presents an article this might give us some information on how far along the article the user has read. Combine this with the time user has spent on the page and we could guestimate the user has read the article or is nearly done reading it. If the user has taken the time to read the article, then that might mean he's interested in our content, he's "purchased" our content so to speak. Of course, if you run a webshop you could keep track of actual purchases as well.

The techniques used in the demo below are mostly the same as in the earlier article. I've introduced a function that serves as an updater for the data attributes. And another addition is the stack function.

const stack = (value, step) => {
  // round the value to the nearest value divisible by step
  // if value is 37 and step is 10 the result is 30
  value = Math.floor(value / step) * step;

  // 30 will be our first value
  const parts = [value];

  // now we subtract 10 each iteration till we reach 0
  while (value > 0) {
    value -= step;
    parts.push(value);
  }

  // reverse the array so it goes from 0 to 30 insted of 30 to 0
  return parts.reverse();
}

This function receives a value and a step parameter. Suppose the value is set to 50 and the step is set to 10, the function will return this array: [0, 10, 20, 30, 40, 50]. We use this array to store multiple values in our data attributes.

For example, suppose the user has scrolled 50% of the page. The data-vertical-scroll-progress attribute is then set to "0 10 20 30 40 50". This allows us to use CSS attribute selectors to determine if the user has scrolled at least 30 percent of the page. The ~= comparison checks if the set value contains in a white space separated list of items.

<html data-vertical-scroll-progress="0 10 20 30 40 50">
    <!-- Your website here -->
</html>

html[data-vertical-scroll-progress~='30'] {
   /* user has scrolled down 30% */
}

Let's combine all our tests and make this a reality. The below demo will show the popup when you've scrolled down 50% and have been on the page for 30 seconds.

I'm super interested in other ways we can use these techniques, so if you have any ideas, share them below!

Applying Styles Based on the User Scroll Position with Smart CSS

Rik Schennink — Fri, 25 Jan 2019 08:53:57 +0000

By mapping the current scroll offset to an attribute on the html element we can style elements on the page based on the current scroll position. We can use this to build, for example, a floating navigation component.

This article was originally published on my personal blog

This is the HTML we'll work with, a nice <header> component that we want to float on top of the content when we scroll down.

<header>I'm the page header</header>
<p>Lot's of content here...</p>
<p>More beautiful content...</p>
<p>Content...</p>

As a start, we'll listen for the 'scroll' event on the document and we'll request the current scrollY position each time the user scrolls.

document.addEventListener('scroll', () => {
  document.documentElement.dataset.scroll = window.scrollY;
});

We have the scroll position stored in a data attribute on the html element. If you view the DOM using your dev tools it would look like this <html data-scroll="0">.

Now we can use this attribute to style elements on the page.

/* Make sure the header is always at least 3em high */
header {
  min-height: 3em;
  width: 100%;
  background-color: #fff;
}

/* Reserve the same height at the top of the page as the header min-height */
html:not([data-scroll='0']) body {
  padding-top: 3em;
}

/* Switch to fixed positioning, and stick the header to the top of the page */
html:not([data-scroll='0']) header {
  position: fixed;
  top: 0;
  z-index: 1;

  /* This box-shadow will help sell the floating effect */
  box-shadow: 0 0 .5em rgba(0, 0, 0, .5);
}

This is basically it, the header will now automatically detach from the page and float on top of the content when scrolling down. The JavaScript code doesn't care about this, it's task is simply putting the scroll offset in the data attribute. This is nice as there is no tight coupling between the JavaScript and the CSS.

There are still some improvements to make, mostly in the performance area.

But first, we have to fix our script for situations where the scroll position is not at the top when the page loads. In those situations, the header will render incorrectly.

When the page loads we'll have to quickly get the current scroll offset. This ensures we're always in sync with the current state of affairs.

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events
document.addEventListener('scroll', storeScroll);

// Update scroll position for first time
storeScroll();

Next we're going to look at some performance improvements. If we request the scrollY position the browser will have to calculate the positions of each and every element on the page to make sure it returns the correct position. It's best if we not force it to do this each and every scroll interaction.

To do this, we'll need a debounce method, this method will queue our request till the browser is ready to paint the next frame, at that point it has already calculate the positions of all the elements on the page so it won't do it again.

// The debounce function receives our function as a parameter
const debounce = (fn) => {

  // This holds the requestAnimationFrame reference, so we can cancel it if we wish
  let frame;

  // The debounce function returns a new function that can receive a variable number of arguments
  return (...params) => {

    // If the frame variable has been defined, clear it now, and queue for next frame
    if (frame) { 
      cancelAnimationFrame(frame);
    }

    // Queue our function call for the next frame
    frame = requestAnimationFrame(() => {

      // Call our function and pass any params we received
      fn(...params);
    });

  } 
};

// Reads out the scroll position and stores it in the data attribute
// so we can use it in our stylesheets
const storeScroll = () => {
  document.documentElement.dataset.scroll = window.scrollY;
}

// Listen for new scroll events, here we debounce our `storeScroll` function
document.addEventListener('scroll', debounce(storeScroll));

// Update scroll position for first time
storeScroll();

By marking the event as passive we can tell the browser that our scroll event is not going to be canceled by a touch interaction (for instance when interacting with a plugin like Google Maps). This allows the browser to scroll the page immediately as it now knows that the event won't be canceled.

document.addEventListener('scroll', debounce(storeScroll), { passive: true });

With the performance issues resolved we now have a stable way to feed data obtained with JavaScript to our CSS. I've set up a demo below so you can take a look at the working code.

I'm very interested in other ways we can use this technique so if you have any ideas, share them below.

DEV Community: Rik Schennink

Crop Images Before Upload With JavaScript

Why help your users Crop Images?

Using CropGuide to Crop Images

Wrapping up

Edit images before uploading them to your Wordpress media library

Ready? Let's get started!

#1 Loading image-input the stylesheet and script

#2 Set up the PHP script that handles the image upload

#3 Add the image-input HTML element

The Trouble with Editing and Uploading Files in the Browser

Setting a custom file to a file input

Alternatives for other browsers

Encode the file data

Capture the form submit

The state of things

or ? Do you know when to choose which?

Are you looking at a list?

Should the list be ordered?

Generating Image Thumbnails in the Browser using JavaScript and FilePond

Setting up FilePond

Adding Plugins

Showing a Resized Preview

Generating Multiple Thumbnails

Using Snippy to Upload Images to the WordPress Media Library

Creating a File Upload Handler

Creating the Form

Bonus: Editing the Image

Security

Conclusion

Poor Man's Dark Mode Using CSS Filter

How to upload files with Vue and FilePond

Creating a Vue app

Integrating with FilePond

CSS Smooth Scrolling

Scroll distance matters

Accessibility

Conclusion

The Fantastically Magical handleEvent Function

Using Smart CSS to Time Your Wonderful Newsletter Popup

How to determine the best moment to show this popup?

Translating these data points to variables

Applying Styles Based on the User Scroll Position with Smart CSS

or
? Do you know when to choose which?