const optimizeImage = (file, maxWidth = 960) =>
    new Promise(resolve => {
        const filesize = file.size / 1024;

        let reader = new FileReader();
        reader.onload = e => {
            let imageDataUrl = e.target.result;

            if (filesize <= 500) {
                return resolve(imageDataUrl);
            }

            // Create a temporary image so that we can compute the height of the downscaled image.
            const image = new Image();
            image.onload = () => {
                const oldWidth = image.width;
                const oldHeight = image.height;
                const newHeight = Math.floor(oldHeight / oldWidth * maxWidth);

                // Create a temporary canvas to draw the downscaled image on.
                const canvas = document.createElement('canvas');
                canvas.width = maxWidth;
                canvas.height = newHeight;

                // Draw the downscaled image on the canvas and return the new data URL.
                const ctx = canvas.getContext('2d');
                ctx.drawImage(image, 0, 0, maxWidth, newHeight);
                resolve(canvas.toDataURL('image/jpeg', 0.7));
            };

            image.src = imageDataUrl;
        };
        reader.readAsDataURL(file);
    });