Загрузка изображения в качестве URL-адреса данных в Firebase

Question

Итак, у меня есть холст, с которого я хочу загрузить экспортированный файл в firebase. сейчас я экспортирую его как URL-адрес данных, например:

handleClick = (e) => {
    const makeDrawing = (canvas) => {
        this.Draw(e.pageX - 305  - canvas.offsetLeft, e.pageY-100 - canvas.offsetTop);
    };
    const {textLength, tasks} = this.props;
    const canvas = document.getElementById('canvas');
    if (textLength === 'over200' || textLength === 'under200') {
        if (tasks !== 0) {
            return null;
        }
    }
    makeDrawing(canvas);
    this.props.setTasks(tasks + 1);

    const img = new Image();
    img.src = canvas.toDataURL();
    this.props.setEditedImage(img);
};

Я также использую React с React-Redux.

Итак, что именно происходит:

1. Пользователь загружает изображение в браузер.
2. Канва отображает изображение, делая его редактируемым.
3. Пользователь нажимает на холст, добавляя точки.

И это функциональность прямо сейчас. Мне нужно добавить кнопку, которая отправляет dataURL в хранилище Firebase в виде файла.

Как мне этого добиться?