let multipleInputs = document.querySelectorAll('.file-multiple')
        // init multiple blocks
        multipleInputs.forEach(multipleInput => {
            const input = multipleInput.querySelector('input')
            

            // files storage
            let inputFilesList = Array();

            input.addEventListener('change', function (e) {

                // check and append new files
                appendNewFiles(input,inputFilesList)

                // render preview
                showMultiplePreviewImg(input.files, multipleInput)
                
                // remove handler
                const removePreviewBtns = multipleInput.querySelectorAll('.file-multiple__remove-icon')
                removePreviews(removePreviewBtns, input)

                // console.log(input.files);

            })
            const uploadBtn = multipleInput.querySelector('span')
            uploadBtn.addEventListener('click', function (e) {
                input.click()
                // save to storage
                inputFilesList = []

                Array.from(input.files).forEach(file => {
                    inputFilesList.push(file);
                })
            })
        })

        function appendNewFiles(input,inputFilesList) {
            // append new file and check if exist in filelist
            let dt = new DataTransfer();
            Array.from(input.files).forEach(file => {
                // console.log(inputFilesList);

                let noExist = true
                if (inputFilesList.length) {
                    // check exist

                   
                    inputFilesList.forEach(item => {
                        if ((item.lastModified + item.name + item.size)  == (file.lastModified + file.name + file.size)) {
                            noExist = false
                        }
                    })

                    // append new file if no exist
                    if (noExist) {
                        dt.items.add(file);
                    }
                } else {
                    dt.items.add(file);
                }
            })
            // copy files from storage
            inputFilesList.forEach(item => {
                dt.items.add(item);
            })

            input.files = dt.files
        }

        // remove preview and file object
        function removePreviews(btns, input) {
            btns.forEach(btn => {
                btn.addEventListener('click', function () {
                    btn.parentNode.remove()
                    let hash = btn.getAttribute('data-hash')

                    let dt = new DataTransfer();
                    for (let i = 0; i < input.files.length; i++) {
                        const file = input.files[i]
                        if (hash != (file.lastModified + file.name + file.size)) {
                            // console.log(file);
                            dt.items.add(file);
                        }
                    }
                    input.files = dt.files
                    // console.log(input.files);
                })
            })

        }

        // функция рендер превью
        function showMultiplePreviewImg(files, wrapper) {
            //clear 
            wrapper.querySelector('.file-multiple__previews').innerHTML = ""

            const fileListArr = Array.from(files)
            fileListArr.forEach(file => {
                let imgSrc = URL.createObjectURL(file)
                let imgBlock = `<div class="file-multiple__preview"> <img src=${imgSrc}>  <div class="file-multiple__remove-icon" data-hash = "${file.lastModified}${file.name}${file.size}"><svg xmlns="http://www.w3.org/2000/svg" width="72px" height="72px" viewBox="0 0 72 72">
                      <g id="line">
                        <line x1="17.5" x2="54.5" y1="17.5" y2="54.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
                        <line x1="54.5" x2="17.5" y1="17.5" y2="54.5" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" stroke-width="2"/>
                      </g>
                    </svg></div></div>`;

                wrapper.querySelector('.file-multiple__previews').insertAdjacentHTML('beforeend', imgBlock)
            });
        }