If the input tag is initialized to null, the array containing e.target.files is empty

Question

Hi I'm uploading a folder right now, but when I upload the same folder again, there was a problem that it couldn't be uploaded. There was a problem that the data was empty the moment I set it to null.

const uploadFolders = [];
let uploadFolderTemplate = ``;

function upload(e) {
    const files = e.target.files;

    if (files.length > 0) {
        uploadFolders.push(files);

        uploadFolderTemplate = `
            <div class="card folder-list-info">
                <div class="card-header" style="display: inline-flex;">
                    <span>${files[0].path}</span>
                    <button type="button" class="close" aria-label="Close" style="margin-left: auto">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>

                <div class="card-body">
                    <div class="ext-box">
                    
                    </div>

                    <div class="colum-box">
                        
                    </div>

                    <div class="exports-data-file-box">

                    </div>
                </div>
            </div>`;

    }
}


const folderUploadInput = document.querySelector('.folder-upload-input');

folderUploadInput.addEventListener('click', function (e) {
    e.target.value = null;
});

folderUploadInput.addEventListener('change', upload)

Answer 1

You are saving the e.target.files object into an other array, and then later on you set the value of e.target.files to null. This does not work as you think it would, as pushing an object into an array stores it as a reference and not as a copy. See this answer for a better explanation of what's going on when you're setting e.target.files = null.

To fix your problem you will need to store it as copy. There are a few ways to get a copy of a object in Javascript, but i prefer this method.

const files = Object.assign({}, e.target.files);