новый образ никогда не исполняется - уменьшая размер изображений base64 в реакции

Question

Я пытаюсь реализовать функцию для уменьшения размера изображений base64.Он находится в реагировании, поэтому я не могу использовать jquery.

Мой jsx:

<React.Fragment>
    <canvas id="canvas" width={64} height={64}></canvas>
    <input style={{display: 'none'}}  ref={fileInput => this.fileInput = fileInput} onChange={this.uploadImage} className="file" type='file' id="imgAdd" />
    <div className="matrice-image">
        <img onClick={() => this.fileInput.click()} ref={image => this.image = image} id="image" className={this.props.correctAnswer ? 'image-correct' : null} src={this.props.src !== '' ? this.props.src : defaultImg} alt="Image"/>
    </div>
</React.Fragment>

В основном при выборе изображения вызывается функция uploadImage:

uploadImage = (e) => {

    var canvas=document.getElementById("canvas");
    console.log(canvas)
    var ctx=canvas.getContext("2d");
    var cw=canvas.width;
    var ch=canvas.height;
    var maxW=64;
    var maxH=64;

    var img = new Image;
    img.onload = function() {
        var iw=img.width;
        var ih=img.height;
        var scale=Math.min((maxW/iw),(maxH/ih));
        var iwScaled=iw*scale;
        var ihScaled=ih*scale;
        canvas.width=iwScaled;
        canvas.height=ihScaled;
        ctx.drawImage(img,0,0,iwScaled,ihScaled);
    console.log(canvas.toDataURL("image/jpeg",0.5));
    }
    img.src = URL.createObjectURL(e.target.files[0]);
}

Но внутреннийФункция img.onload никогда не выполняется.Я не понимаю, почему.

Заранее спасибо