Failed to execute 'drawImage' on 'CanvasRenderingContext2D' after upgrade to 4.0.x

[Stan]

Hello,

After upgrading to 4.0.0(1) version of this plugin I started getting the following error on image select:

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
    at cloneCanvas (webpack:///./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js?:25:9)
    at create (webpack:///./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js?:155:9)
    at eval (webpack:///./node_modules/filepond/dist/filepond.js?:1428:9)
    at Object.eval [as createChildView] (webpack:///./node_modules/filepond/dist/filepond.js?:1170:20)
    at create (webpack:///./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js?:194:16)
    at eval (webpack:///./node_modules/filepond/dist/filepond.js?:1428:9)
    at Object.eval [as createChildView] (webpack:///./node_modules/filepond/dist/filepond.js?:1170:20)
    at create (webpack:///./node_modules/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js?:227:16)
    at eval (webpack:///./node_modules/filepond/dist/filepond.js?:1428:9)
    at Object.eval [as createChildView] (webpack:///./node_modules/filepond/dist/filepond.js?:1170:20)

I am using official adapter for React. Downgrading the version of react-filepond or filepond itself doesn't work. Downgrading the version of filepond-plugin-image-preview works. I mean that this configuration:

    "filepond": "^4.1.0",
    "filepond-plugin-image-preview": "^4.0.1",
    "react-filepond": "^7.0.1",

leads to error above, while this one:

    "filepond": "^4.1.0",
    "filepond-plugin-image-preview": "^3.1.6",
    "react-filepond": "^7.0.1",

works well.

P.S. Thanks for perfect product!

[Rik]

Hey, that's weird! Can you share your FilePond configuration, that makes it easier to reproduce the issue.

[Rik]

A public test-case would be even more useful. :-)

[Stan]

Hey, that's weird! Can you share your FilePond configuration, that makes it easier to reproduce the issue.

Hi, thanks for quick response!

Just checked. I get this error with as simple app as

import 'react-app-polyfill/ie9'
import React from 'react'
import ReactDOM from 'react-dom'
import { FilePond } from 'react-filepond'
import { registerPlugin } from 'react-filepond'
import FilePondPluginImagePreview from 'filepond-plugin-image-preview'

registerPlugin(FilePondPluginImagePreview);

ReactDOM.render(
  <FilePond/>,
  document.getElementById('app-root')
);

Every dependency is upgraded to the latest stable version.

[Stan]

A public test-case would be even more useful. :-)

Of course, I will try to create one :)

[Rik]

Is this based on create-react-app?

[Stan]

Is this based on create-react-app?

No, just custom configuration, webpack + babel, quite simple. Here is webpack.config, but it's really quite simple:

const path = require('path');
const webpack = require('webpack');

let environment = process.env.NODE_ENV || 'production';
module.exports = {
  entry: {
    ar: './src/js/index.js'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': JSON.stringify(environment)
    }),
    new webpack.optimize.AggressiveMergingPlugin()
  ],
  output: {
    filename: '[name].min.js',
    path: path.resolve(__dirname, 'dist/js')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        loader: 'babel-loader'
      }
    ]
  },
  resolve: {
    alias: {
      'ar': path.resolve(__dirname, "./src/js"),
    }
  },
  devServer: {
    historyApiFallback: {
      index: 'index.html'
    },
    contentBase: './dist'
  },
}

[Rik]

Have you included the CSS? (can't reproduce it with create-react-app btw)

[Stan]

Have you included the CSS? (can't reproduce it with create-react-app btw)

You are completely right, sorry. Everything works when I remove our custom styles. Something wrong with them. Sorry for taking your time, everything is great with Filepond! :)

(But I wonder why version 3.6.1 worked? Well, nevermind :) )

[Rik]

No problem! To be honest, I'm not sure why it makes a difference, there's a couple changes in how it calculates the height of the panel.