Remove a FileList item from a multiple "input:file" in HTML5

When working with HTML5 file inputs, you cannot directly modify the FileList object returned by input.files. The FileList is read-only, so removing items requires converting it to an array first.

The Problem

The FileList object from file inputs is immutable:

<input type="file" id="fileInput" multiple>
<button onclick="showFiles()">Show Files</button>
<button onclick="tryDirectRemoval()">Try Direct Removal</button>


<script>
function showFiles() {
    const files = document.getElementById('fileInput').files;
    document.getElementById('output').innerHTML = 'Files selected: ' + files.length;
}

function tryDirectRemoval() {
    const files = document.getElementById('fileInput').files;
    try {
        delete files[0]; // This won't work
        document.getElementById('output').innerHTML = 'Direct removal failed - FileList is read-only';
    } catch (e) {
        document.getElementById('output').innerHTML = 'Error: ' + e.message;
    }
}
</script>

Method 1: Convert to Array and Filter

Convert the FileList to an array, then filter out unwanted files:

<input type="file" id="fileInput2" multiple>
<button onclick="removeFirstFile()">Remove First File</button>


<script>
function removeFirstFile() {
    const input = document.getElementById('fileInput2');
    const filesArray = Array.from(input.files);
    
    if (filesArray.length > 0) {
        // Remove first file
        const filteredFiles = filesArray.slice(1);
        
        // Create new FileList-like object
        const dt = new DataTransfer();
        filteredFiles.forEach(file => dt.items.add(file));
        
        // Update input
        input.files = dt.files;
        
        document.getElementById('output2').innerHTML = 'Files after removal: ' + input.files.length;
    } else {
        document.getElementById('output2').innerHTML = 'No files to remove';
    }
}
</script>

Method 2: Remove by Index

Remove a specific file by its index position:

<input type="file" id="fileInput3" multiple>
<button onclick="removeFileAtIndex()">Remove File at Index 1</button>


<script>
function removeFileAtIndex() {
    const input = document.getElementById('fileInput3');
    const targetIndex = 1;
    
    if (input.files.length > targetIndex) {
        const filesArray = Array.from(input.files);
        
        // Remove file at specific index
        filesArray.splice(targetIndex, 1);
        
        // Recreate FileList
        const dt = new DataTransfer();
        filesArray.forEach(file => dt.items.add(file));
        input.files = dt.files;
        
        document.getElementById('output3').innerHTML = 'Removed file at index ' + targetIndex + '. Remaining: ' + input.files.length;
    } else {
        document.getElementById('output3').innerHTML = 'No file at index ' + targetIndex;
    }
}
</script>

Method 3: Remove by Filename

Filter out files based on their names:

<input type="file" id="fileInput4" multiple>
<input type="text" id="filenameToRemove" placeholder="Enter filename to remove">
<button onclick="removeByFilename()">Remove File</button>


<script>
function removeByFilename() {
    const input = document.getElementById('fileInput4');
    const targetFilename = document.getElementById('filenameToRemove').value;
    
    if (!targetFilename) {
        document.getElementById('output4').innerHTML = 'Please enter a filename';
        return;
    }
    
    const filesArray = Array.from(input.files);
    const filteredFiles = filesArray.filter(file => file.name !== targetFilename);
    
    if (filteredFiles.length < filesArray.length) {
        const dt = new DataTransfer();
        filteredFiles.forEach(file => dt.items.add(file));
        input.files = dt.files;
        
        document.getElementById('output4').innerHTML = 'File removed. Remaining: ' + input.files.length;
    } else {
        document.getElementById('output4').innerHTML = 'File not found: ' + targetFilename;
    }
}
</script>

Key Points

• FileList objects are read-only and cannot be modified directly
• Use Array.from() to convert FileList to a modifiable array
• DataTransfer API helps recreate a new FileList after modifications
• Always check if files exist before attempting removal

Browser Compatibility

Conclusion

Since FileList is read-only, convert it to an array using Array.from(), modify as needed, then recreate the FileList using DataTransfer. This approach provides flexible file management in HTML5 applications.