Diminuir tamanho imagem antes de fazer upload pro servidor

[CriandoBits]

Olá, pessoal!

Preciso diminuir o tamanho em bytes e em pixels de imagens antes de upar pro servidor. No entanto, só estou conseguindo exibir as imagens já alteradas mas, ao enviar para o servidor, a imagem que vai é a original, do computador, não alterada. Veja:

HTML:

<input type="file" name="file" id="file" accept="image/*">
<img class="img-responsive" id="image-preview" src="" alt="foto">

JAVASCRIPT:

const compress = new Compress()
const preview = document.getElementById('image-preview')
const upload = document.getElementById('file')

upload.addEventListener('change', (evt) => {
  const files = [...evt.target.files]
  compress.compress(files, {
    size: 4,
    quality: 0.75, 
    maxWidth: 1280, // the max width of the output image
    maxHeight: 720, // the max height of the output image
    resize: true 
  }).then((images) => {

    const img = images[0]
    // returns an array of compressed images
    preview.src = `${img.prefix}${img.data}`    
  })
}, false)

No Javascript acima as imagens são convertidas para 1280x720 com até 2MB. O preview mostra a imagem já convertida (ao "salvar como" o tamanho em byte e dimensões estão ok). Somente quando envio pro servidor é que a imagem vai "crua", ou seja, sem a conversão.

Preciso muito resolver esse problema.