https://khshield.com/template/js/module/FileModule.js

1export default function FileModule() {
2
3    const formControl = document.querySelectorAll('.form-control')
4    formControl.forEach((item) => {
5        const  fileInput = document.getElementById('chose')
6        const namef = item.querySelector('.getfile')
7        if(fileInput){
8            fileInput.addEventListener('change', () => {
9                const fileName = fileInput.files[0].name;
10                namef.innerText = fileName;
11            });
12        }
13    })
14
15    const uploadFile = document.querySelector("#re-form-upload")
16    if (uploadFile) {
17        $(".re-form-image").fadeOut();
18
19        function removeFile(index) {
20            const dt = new DataTransfer()
21            const input = document.getElementById('re-form-upload')
22            const { files } = input
23
24            for (let i = 0; i < files.length; i++) {
25                const file = files[i]
26                if (index !== i)
27                    dt.items.add(file)
28            }
29
30            input.files = dt.files;
31            console.log(uploadFile.files)
32        }
33        uploadFile.addEventListener('change', (e) => {
34            $('.re-form-image').fadeOut();
35            $('.cmt-image-item').remove();
36            const inputFile = uploadFile.files;
37            let length_file = inputFile.length;
38            if (length_file == 0) {
39                $(".re-form-image").fadeOut();
40            } else {
41                $(".re-form-image").fadeIn();
42
43            }
44            for (var i = 0; i < length_file; i++) {
45                (function(i) {
46                    var FR = new FileReader();
47                    FR.onload = function(e) {
48                        $(".re-form-image .cmt-image-list").append('<div class="cmt-image-item"> <div class="cmt-image-img"><img src="' + e.target.result + '" alt=""><i class="fas fa-times cmt-image-delete" data-id="' + i + '"></i>  </div></div>');
49                        $(".account-info-ava-change").append('<img src="' + e.target.result + '" alt="">');
50
51                        $('.cmt-image-delete').on('click', function(event) {
52                            event.preventDefault()
53                            let id = $(this).attr('data-id')
54                            removeFile(id)
55                        })
56                    };
57                    FR.readAsDataURL(inputFile[i]);
58                })(i);
59            }
60            console.log(inputFile)
61
62        })
63        document.addEventListener('click', (e) => {
64            const cmtImageItems = document.querySelectorAll('.re-form-image .cmt-image-item')
65            const iconDeletes = e.target.closest('.cmt-image-img i');
66            if (iconDeletes) {
67                iconDeletes.parentElement.parentElement.remove();
68                if (cmtImageItems.length <= 1) {
69                    $(".re-form-image").fadeOut();
70                }
71                removeFile(parseInt(iconDeletes.getAttribute("data-id")))
72            }
73
74        })
75
76    }
77}