Harry Theodoulou on web.dev

How to paste files

2022-10-10T00:00:00Z

Pasting files into the browser consists of using the paste event of the HTMLElement.

Using the `HTMLElement`'s `paste` event #

As a first step, you add an event listener for the paste event at the desired element, commonly this is at the document level, so no specific element needs to be focused. Next, you use the Clipboard API, which gives you access to the clipboardData field of the HTMLElement's paste event, whose files list you can then iterate over. Based on the MIME type of each of the files pasted, you can decide whether to render it to the screen, as in the case of an image or video, or to paste the text contents of the file into, for example, a textarea element, in the case of a text file.

Browser support

Chrome 66, Supported 66
Firefox 63, Supported 63
Edge 79, Supported 79
Safari 13.1, Supported 13.1

Source

document.addEventListener('paste', async (e) => {
  // Prevent the default behavior, so you can code your own logic.
  e.preventDefault();
  if (!e.clipboardData.files.length) {
    return;
  }
  // Iterate over all pasted files.
  Array.from(e.clipboardData.files).forEach(async (file) => {
    // Add more checks here for MIME types you're interested in,
    // such as `application/pdf`, `video/mp4`, etc.
    if (file.type.startsWith('image/')) {
      // For images, create an image and append it to the `body`.
      const img = document.createElement('img');
      const blob = URL.createObjectURL(file);
      img.src = blob;
      document.body.append(img);
    } else if (file.type.startsWith('text/')) {
      // For text files, read the contents and output it into a `textarea`.
      const textarea = document.createElement('textarea');
      textarea.value = await file.text();
      document.body.append(textarea);
    }
  });
});

Demo #

How to paste images

2022-10-10T00:00:00Z

The modern way #

Using the Async Clipboard API #

To read images from the user's clipboard programmatically, that is, after a button click, you can use the read() method of the Async Clipboard API. If permission to read from the clipboard have not been granted yet, the call to navigator.clipboard.read() will request it upon the first call of the method.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
  try {
    const clipboardItems = await navigator.clipboard.read();
    for (const clipboardItem of clipboardItems) {
      const imageTypes = clipboardItem.types.find(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        const blob = await clipboardItem.getType(imageType);
        // Do something with the image blob.
      }
    }
  } catch (err) {
    console.error(err.name, err.message);
  }
});

Browser support

Chrome 86, Supported 86
Firefox 90, Behind a flag
Edge 79, Supported 79
Safari 13.1, Supported 13.1

Source

The classic way #

Listen for the `paste` event #

The classic way to paste images is to use the (synchronous) Clipboard API, which gives you access to the clipboardData field inside the Document: paste event. However, this method comes with limitations, for example because it's synchronous, pasting large amounts of data can block the page.

document.addEventListener('paste', async (e) => {
  e.preventDefault();

  for (const clipboardItem of e.clipboardData.files) {
    if (clipboardItem.type.startsWith('image/')) {
      // Do something with the image file.
    }
  }
});

Browser support

Chrome 66, Supported 66
Firefox 63, Supported 63
Edge 79, Supported 79
Safari 13.1, Supported 13.1

Source

Progressive enhancement #

For browsers that do not support the Async Clipboard API, it is impossible to access the user's clipboard programmatically (for example, on a button click). Thus for accessing a user's clipboard on a paste event, you can use the Async Clipboard API and fall back to the (synchronous) Clipboard API.

The ClipboardItem objects coming from navigator.clipboard.read have a types field which is an array, and File objects coming from event.clipboardData.files have a type field which is a string. You can conditionally check each of the type or types fields for images in the clipboard:

document.addEventListener('paste', async (e) => {
  e.preventDefault();
  const clipboardItems = typeof navigator?.clipboard?.read === 'function' ? await navigator.clipboard.read() : e.clipboardData.files;

  for (const clipboardItem of clipboardItems) {
    let blob;
    if (clipboardItem.type?.startsWith('image/')) {
      // For files from `e.clipboardData.files`.
      blob = clipboardItem
      // Do something with the blob.
    } else {
      // For files from `navigator.clipboard.read()`.
      const imageTypes = clipboardItem.types?.filter(type => type.startsWith('image/'))
      for (const imageType of imageTypes) {
        blob = await clipboardItem.getType(imageType);
        // Do something with the blob.
      }
    }
  }
});

Demo #

How to paste text

2022-10-10T00:00:00Z

The modern way #

Using the Async Clipboard API #

To read text from the user's clipboard programmatically, for example, after a button click, you can use the readText() method of the Async Clipboard API. If permissions to read clipboard have not been granted yet, the call to navigator.clipboard.readText() will request it upon the first call to the method.

const pasteButton = document.querySelector('#paste-button');

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard');
   }
});

Browser support

Chrome 66, Supported 66
Firefox, Not supported
Edge 79, Supported 79
Safari 13.1, Supported 13.1

Source

The classic way #

Using `document.execCommand()` #

By using the document.execCommand('paste') you can paste the clipboard content at the insertion point (currently focused HTML element). The execCommand method returns a boolean that indicates whether the paste event was successful. However this method comes with limitations, for example because it's synchronous, pasting large amounts of data can block the page.

pasteButton.addEventListener('click', () => {
  document.querySelector('textarea').focus();
  const result = document.execCommand('paste')
  console.log('document.execCommand result: ', result);
})

Browser support

Chrome 1, Supported 1
Firefox 1, Supported 1
Edge 12, Supported 12
Safari 1.3, Supported 1.3

Source

Progressive enhancement #

pasteButton.addEventListener('click', async () => {
   try {
     const text = await navigator.clipboard.readText()
     document.querySelector('textarea').value += text;
     console.log('Text pasted.');
   } catch (error) {
     console.log('Failed to read clipboard. Using execCommand instead.');
     document.querySelector('textarea').focus();
     const result = document.execCommand('paste')
     console.log('document.execCommand result: ', result);
   }
});

Demo #

Mainline Menswear implements PWA and sees a 55% conversion rate uplift

2021-04-20T00:00:00Z

Mainline is an online clothing retailer that offers the biggest designer brand names in fashion. The UK-based company entrusts its team of in-house experts, blended strategically with key partners, to provide a frictionless shopping experience for all. With market presence in over 100 countries via seven custom-built territorial websites and an app, Mainline will continue to ensure the ecommerce offering is rivalling the competition.

Challenge #

Mainline Menswear's goal was to complement the current mobile optimized website with progressive features that would adhere to their 'mobile first' vision, focusing on mobile-friendly design and functionality with a growing smartphone market in mind.

Solution #

The objective was to build and launch a PWA that complemented the original mobile friendly version of the Mainline Menswear website, and then compare the stats to their hybrid mobile app, which is currently available on Android and iOS.

Once the app launched and was being used by a small section of Mainline Menswear users, they were able to determine the difference in key stats between PWA, app, and Web.

The approach Mainline took when converting their website to a PWA was to make sure that the framework they selected for their website (Nuxt.js, utilizing Vue.js) would be future-proof and enable them to take advantage of fast moving web technology.

Results #

139_%

More pages per session in PWA vs. web.

161_%

Longer session durations in PWA vs. web.

10_%

Lower bounce rate in PWA vs. web

12.5_%

Higher average order value in PWA vs. web

55_%

Higher conversion rate in PWA vs. web.

243_%

Higher revenue per session in PWA vs. web.

Technical deep dive #

Mainline Menswear is using the Nuxt.js framework to bundle and render their site, which is a single page application (SPA).

Generating a service worker file #

For generating the service worker, Mainline Menswear added configuration through a custom implementation of the nuxt/pwa Workbox module.

The reason they forked the nuxt/pwa module was to allow the team to add more customizations to the service worker file that they weren't able to or had issues with when using the standard version. One such optimization was around the offline functionality of the site like, for example, serving a default offline page and gathering analytics while offline.

Anatomy of the web app manifest #

The team generated a manifest with icons for different mobile app icon sizes and other web app details like name, description and theme_color:

{
  "name": "Mainline Menswear",
  "short_name": "MMW",
  "description": "Shop mens designer clothes with Mainline Menswear. Famous brands including Hugo Boss, Adidas, and Emporio Armani.",
  "icons": [
    {
      "src": "/_nuxt/icons/icon_512.c2336e.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#107cbb"
}

The web app, once installed, can be launched from the home screen without the browser getting in the way. This is achieved by adding the display parameter in the web app manifest file:

{
  "display": "standalone"
}

Last but not the least, the company is now able to easily track how many users are visiting their web app from the home screen by simply appending a utm_source parameter in the start_url field of the manifest:

{
  "start_url": "/?utm_source=pwa"
}

Runtime caching for faster navigations #

Caching for web apps is a must for page speed optimization and for providing a better user experience for returning users.

For caching on the web, there are quite a few different approaches. The team is using a mix of the HTTP cache and the Cache API for caching assets on the client side.

The Cache API gives Mainline Menswear finer control over the cached assets, allowing them to apply complex strategies to each file type. While all this sounds complicated and hard to set up and maintain, Workbox provides them with an easy way of declaring such complex strategies and eases the pain of maintenance.

Caching CSS and JS #

For CSS and JS files, the team chose to cache them and serve them over the cache using the StaleWhileRevalidate Workbox strategy. This strategy allows them to serve all Nuxt CSS and JS files fast, which significantly increases their site's performance. At the same time, the files are being updated in the background to the latest version for the next visit:

/* sw.js */
workbox.routing.registerRoute(
  /\/_nuxt\/.*(?:js|css)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'css_js',
  }),
  'GET',
);

Caching Google fonts #

The strategy for caching Google Fonts depends on two file types:

The stylesheet that contains the @font-face declarations.
The underlying font files (requested within the stylesheet mentioned above).

// Cache the Google Fonts stylesheets with a stale-while-revalidate strategy.
workbox.routing.registerRoute(
  /https:\/\/fonts\.googleapis\.com\/*/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'google_fonts_stylesheets',
  }),
  'GET',
);

// Cache the underlying font files with a cache-first strategy for 1 year.
workbox.routing.registerRoute(
  /https:\/\/fonts\.gstatic\.com\/*/,
  new workbox.strategies.CacheFirst({
    cacheName: 'google_fonts_webfonts',
    plugins: [
      new workbox.cacheableResponse.CacheableResponsePlugin({
        statuses: [0, 200],
      }),
      new workbox.expiration.ExpirationPlugin({
        maxAgeSeconds: 60 * 60 * 24 * 365, // 1 year
        maxEntries: 30,
      }),
    ],
  }),
  'GET',
);

Caching images #

For images, Mainline Menswear decided to go with two strategies. The first strategy applies to all images coming from their CDN, which are usually product images. Their pages are image-heavy so they are conscious of not taking too much of their users' device storage. So through Workbox, they added a strategy that is caching images coming only from their CDN with a maximum of 60 images using the ExpirationPlugin.

The 61st (newest) image requested, replaces the 1st (oldest) image so that no more than 60 product images are cached at any point in time.

workbox.routing.registerRoute(
  ({ url, request }) =>
    url.origin === 'https://mainline-menswear-res.cloudinary.com' &&
    request.destination === 'image',
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'product_images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        // Only cache 60 images.
        maxEntries: 60,
        purgeOnQuotaError: true,
      }),
    ],
  }),
);

The second image strategy handles the rest of the images being requested by the origin. These images tend to be very few and small across the whole origin, but to be on the safe side, the number of these cached images is also limited to 60.

workbox.routing.registerRoute(
  /\.(?:png|gif|jpg|jpeg|svg|webp)$/,
  new workbox.strategies.StaleWhileRevalidate({
    cacheName: 'images',
    plugins: [
      new workbox.expiration.ExpirationPlugin({
        // Only cache 60 images.
        maxEntries: 60,
        purgeOnQuotaError: true,
      }),
    ],
  }),
);

Providing offline functionality #

The offline page is precached right after the service worker is installed and activated. They do this by creating a list of all offline dependencies: the offline HTML file and an offline SVG icon.

const OFFLINE_HTML = '/offline/offline.html';
const PRECACHE = [
  { url: OFFLINE_HTML, revision: '70f044fda3e9647a98f084763ae2c32a' },
  { url: '/offline/offline.svg', revision: 'efe016c546d7ba9f20aefc0afa9fc74a' },
];

The precache list is then fed into Workbox which takes care of all the heavy lifting of adding the URLs to the cache, checking for any revision mismatch, updating, and serving the precached files with a CacheFirst strategy.

workbox.precaching.precacheAndRoute(PRECACHE);

Handling offline navigations #

Once the service worker activates and the offline page is precached, it is then used to respond to offline navigation requests by the user. While Mainline Menswear's web app is an SPA, the offline page shows only after the page reloads, the user closes and reopens the browser tab, or when the web app is launched from the home screen while offline.

To achieve this, Mainline Menswear provided a fallback to failed NavigationRoute requests with the precached offline page:

const htmlHandler = new workbox.strategies.NetworkOnly();
const navigationRoute = new workbox.routing.NavigationRoute(({ event }) => {
    const request = event.request;
    // A NavigationRoute matches navigation requests in the browser, i.e. requests for HTML
    return htmlHandler.handle({ event, request }).catch(() => caches.match(OFFLINE_HTML, {
        ignoreSearch: true
    }));
});
workbox.routing.registerRoute(navigationRoute);

Demo #

Offline page example as seen on www.mainlinemenswear.co.uk.

Reporting successful installs #

Apart from the home screen launch tracking (with "start_url": "/?utm_source=pwa" in the web application manifest), the web app also reports successful app installs by listening to the appinstalled event on window:

window.addEventListener('appinstalled', (evt) => {
  ga('send', 'event', 'Install', 'Success');
});

Adding PWA capabilities to your website will further enhance your customers experience of shopping with you, and will be quicker to market than a [platform-specific] app. Andy Hoyle, Head of Development

Conclusion #

To learn more about progressive web apps and how to build them, head to the Progressive Web Apps section on web.dev.

To read more Progressive Web Apps case studies, browse to the case studies section.

Harry Theodoulou on web.dev

How to paste files

Using the `HTMLElement`'s `paste` event #

Further reading #

Demo #

How to paste images

The modern way #

Using the Async Clipboard API #

The classic way #

Listen for the `paste` event #

Progressive enhancement #

Further reading #

Demo #

How to paste text

The modern way #

Using the Async Clipboard API #

The classic way #

Using `document.execCommand()` #

Progressive enhancement #

Further reading #

Demo #

Mainline Menswear implements PWA and sees a 55% conversion rate uplift

Challenge #

Solution #

Results #

Technical deep dive #

Generating a service worker file #

Anatomy of the web app manifest #

Runtime caching for faster navigations #

Caching CSS and JS #

Caching Google fonts #

Caching images #

Providing offline functionality #

Handling offline navigations #

Demo #

Reporting successful installs #

Conclusion #

Harry Theodoulou on web.dev

How to paste files

Using the HTMLElement's paste event #

Further reading #

Demo #

How to paste images

The modern way #

Using the Async Clipboard API #

The classic way #

Listen for the paste event #

Progressive enhancement #

Further reading #

Demo #

How to paste text

The modern way #

Using the Async Clipboard API #

The classic way #

Using document.execCommand() #

Progressive enhancement #

Further reading #

Demo #

Mainline Menswear implements PWA and sees a 55% conversion rate uplift

Challenge #

Solution #

Results #

Technical deep dive #

Generating a service worker file #

Anatomy of the web app manifest #

Runtime caching for faster navigations #

Caching CSS and JS #

Caching Google fonts #

Caching images #

Providing offline functionality #

Handling offline navigations #

Demo #

Reporting successful installs #

Conclusion #

Using the `HTMLElement`'s `paste` event #

Listen for the `paste` event #

Using `document.execCommand()` #