JavaScript: serializzare un'immagine come URL di dati e inviarla con un form

In JavaScript possiamo serializzare un'immagine come URL di dati ed inviarla con un form.

Possiamo creare la seguente classe che accetta come parametri l'input di tipo file ed il campo in cui inserire l'URL di dati.

'use strict';

class ImageUpload {
                    constructor({ input, target }) {
                        this.input = document.querySelector(input);
                        this.target = document.querySelector(target);

                        if(this.input !== null && this.target !== null) {
                            this.init();
                        }
                    }

                    init() {
                        this.change();
                    }

                    serialize() {
                       const files = this.input.files;
                       if(files && files.length > 0) {
                           const fileToLoad = files[0];
                           const fileReader = new FileReader();

                           fileReader.addEventListener('load', file => {
                               const srcData = file.target.result;
                               this.target.value = srcData;
                           });

                           fileReader.readAsDataURL(fileToLoad);
                       }
                    }

                    change() {
                        this.input.addEventListener('change', () => {
                            this.serialize();
                        }, false);
                    }
                }

Esempio d'uso:

const upload = new ImageUpload({
    input: '#image',
    target: '#data'
});