Создать объект JS из списка загруженных файлов

Question

Есть <input type="file" multiple="" directory="" webkitdirectory="" mozdirectory="" /> Загрузив директорию файлов, получаем массив с данными по каждому файлу. К примеру:

0: File {name: 'Build react.mp4', webkitRelativePath: 'course name/Chapter 3/File name 4', …}
1: File {name: 'mongo.png', webkitRelativePath: 'course name/Chapter 3/File name 3', …}
2: File {name: 'next.jpg', webkitRelativePath: 'course name/Chapter 2/File name 2', …}
3: File {name: 'react.png', webkitRelativePath: 'course name/Chapter 1/File name 1', …}

из этих данных нужно получить object:

const course = {
    name: "Course name",
    folders: [
        {
            name: "Chapter 1",
            files: [
                {
                    name: "File name 1",
                }
            ]
        },
        {
            name: "Chapter 2",
            files: [
                {
                    name: "File name 2",
                }
            ]
        },
        {
            name: "Chapter 3",
            files: [
                {
                    name: "File name 3",
                },
                {
                    name: "File name 4",
                },
            ]
        },
    ]
}

Хотя бы в такой строгой структуре. Конечно лучше если бы объект формировался в зависимости от вложенности папок.

Answer 1

Решил следующим образом:

const submitHandler = async (e) => {
        e.preventDefault();

        let course = {
            name: files[0].webkitRelativePath.split("/")[0],
            slug: slugify(files[0].webkitRelativePath.split("/")[0], {remove: /[*+~.()'"!:@]/g}),
            author: author,
            category: category,
            duration: hours,
            description: description,
            folders: [],
        };

        for (let f in files) {
            const path = files[f].webkitRelativePath;
            const splitPath = path.split("/");
            const folderName = splitPath[1];
            const fileName = splitPath[splitPath.length - 1];

            
            const serchFolder = course.folders.find((item) => item.folderName === folderName);

            if (!serchFolder) {
                course.folders.push({ folderName, files: [{ fileName, fileUrl }] });
            } else {
                serchFolder.files.push({ fileName, fileUrl });
            }
        }
}

БЛОГ НА HUSL

Создать объект JS из списка загруженных файлов

Ответы (1 шт):