Загрузка файла в очередь SweetAlert2

Question

Я пытаюсь реализовать мастер загрузки с SweetAlert2 , но я не знаю, как получить, может ли файл данных в результатах очереди.

Первые шаги для выпадающих меню в порядке, но файл читается асинхронно, и у меня нет данных в объекте результата.

Я, вероятно, должен ждать результата FileReader.read ()но не знаю, как это сделать.

Вот мой код:

import swal from 'sweetalert2';

const dataContainer = document.querySelector(".hidden-data-container");

const dataLabs = JSON.parse(dataContainer.dataset.choiceLabo);
const dataBacteries = JSON.parse(dataContainer.dataset.choiceBactery);

let choiceLab = {};
let choiceBactery = {};

dataLabs.forEach(function (lab) {
    choiceLab[lab.id] = lab.name;
});
dataBacteries.forEach(function (bactery) {
    choiceBactery[bactery.code] = bactery.shortname;
});

document.querySelector("#start-upload").addEventListener('click', () => {
    swal.mixin({
        input: 'text',
        confirmButtonText: 'Next →',
        showCancelButton: true,
        progressSteps: ['1', '2', '3']
    }).queue([
        {
            title: 'foo',
            text: 'Quelle est la bactérie concernée ?',
            input: 'select',
            inputOptions: choiceBactery,
            inputPlaceholder: 'Selectionnez une bactérie',
        },
        {
            title: 'Select image',
            input: 'file',
            inputAttributes: {
                'accept': 'image/*',
                'aria-label': 'Upload your profile picture'
            },
            showCancelButton: true,
            confirmButtonText: 'Upload',
            showLoaderOnConfirm: true,
            preConfirm: (file) => {
                if (file) {
                    const reader = new FileReader;
                    reader.onload = (e) => {
                        debugger;
                        return {
                            title: 'Your uploaded picture',
                            imageUrl: e.target.result,
                            imageAlt: 'The uploaded picture'
                        }
                    };
                    reader.readAsBinaryString(file);
                }
            },
            allowOutsideClick: () => !swal.isLoading()
        }
    ]).then((result) => {
        if (result.value) {
            swal({
                title: 'All done!',
                html:
                    'Your answers: <pre><code>' +
                    JSON.stringify(result.value) +
                    '

', verifyButtonText:' Lovely! '})}});});

Любая помощь приветствуется;)

Спасибо, ДжМ

Answer 1

Я наконец-то нашел решение с помощью функции Promise:

import swal from 'sweetalert2';
import 'babel-polyfill';

const dataContainer = document.querySelector(".hidden-data-container");

const dataLabs = JSON.parse(dataContainer.dataset.choiceLabo);
const dataBacteries = JSON.parse(dataContainer.dataset.choiceBactery);

let choiceLab = {};
let choiceBactery = {};

dataLabs.forEach(function (lab) {
    choiceLab[lab.id] = lab.name;
});
dataBacteries.forEach(function (bactery) {
    choiceBactery[bactery.code] = bactery.shortname;
});

const readUploadedFile = (inputFile) => {
    const reader = new FileReader();

    return new Promise((resolve, reject) => {
        reader.onerror = () => {
            reader.abort();
            reject(new DOMException("Problem parsing input file."));
        };

        reader.onload = () => {
            resolve(reader.result);
        };
        reader.readAsBinaryString(inputFile);
    });
};

document.querySelector("#start-upload").addEventListener('click', () => {
    swal.mixin({
        input: 'text',
        confirmButtonText: 'Next →',
        showCancelButton: true,
        progressSteps: ['1', '2', '3']
    }).queue([
        {
            title: 'Laboratoire',
            text: 'Indiquez le laboratoire',
            input: 'select',
            inputOptions: choiceLab,
            inputPlaceholder: 'Selectionnez un laboratoire',
        },
        {
            title: 'Bactérie',
            text: 'Quelle est la bactérie concernée ?',
            input: 'select',
            inputOptions: choiceBactery,
            inputPlaceholder: 'Selectionnez une bactérie',
        },
        {
            title: 'Select image',
            input: 'file',
            inputAttributes: {
                'accept': 'image/*',
                'aria-label': 'Upload your profile picture'
            },
            showCancelButton: true,
            confirmButtonText: 'Upload',
            showLoaderOnConfirm: true,
            preConfirm: async (file) => {
                if (file) {
                    return await readUploadedFile(file)
                }
            },
            allowOutsideClick: () => !swal.isLoading()
        }
    ]).then((result) => {
        if (result.value) {
            swal({
                title: 'All done!',
                html: 'Your file was succesfully uploaded',
                confirmButtonText: 'Fermer'
            })
        }
    });
});

Не стесняйтесь давать отзывы, если вы видите что-то не так с ним.