avoid deleting all files LWC

Question

Hello I am working on a lightning-input field whose type is a file. In this component I want to allow the users to upload several files and show its name and an option to delete the selected file the user cants to delete but the problem is that it deletes all of the files.

.html

<lightning-input accept={acceptedFormats} 
                    label='Attachments' 
                    required={isIdentificationRequired}
                    onchange={handleAddFiles} 
                    type="file" multiple>
        </lightning-input>
        <template if:true={fileUploaded}>
            <template for:each={fileNamesArr} for:item="fileName">
            <lightning-button-icon key={fileName.Name} class="slds-p-right_x-small" icon-name="action:close" onclick={removeFiles} alternative-text="Remove document" size="x-small"></lightning-button-icon>
                <span key={fileName.Name} class="slds-text-body_medium slds-text-color_success slds-p-right_x-small">
                    {fileName.Name}
                </span>
                <br key={fileName.Name}>
            </template>
        </template>

.js

@track fileUploaded = false; // Render template
@track fileNamesArr = []; // Display file names
filesArr = []; // Store read file objects to pass to Apex
filePromises = []; // Called my Promise.all
@track showSpinner = true;
@track isIdentificationRequired =true;
get acceptedFormats() {
         return ['.pdf', '.png', '.jpg', '.tiff'];
 }
 // Handles front end; build FileReader object in a helper and call apex
 handleAddFiles(event) {
  if (event.target.files.length > 0) {
    // Validate file size
    for(let i = 0; i < event.target.files.length; i++) {
        let file = event.target.files[i]
        if(file.size > 1000000 ) {
            console.log('File too large, size: ' + file.size)
            return;
        }
    }
    this.fileUploaded = true; // Show element
    if (this.isIdentificationRequired) { // Condition for multiple files
        for (let i = 0; i < event.target.files.length; i++) {
            let file = event.target.files[i];
            this.fileNamesArr.push({Name: file.name}); // Iterate html
            this.filesArr.push(file);
        }
    } else { // Single file upload
        let file = event.target.files[0];
        this.fileNamesArray = [];
        this.fileNamesArr.push({Name: file.name});
        this.filesArr.push(file);
    }
}
}

  // Called by Submit button
handleEnviarDocumentosFirmar() { 
for (let i = 0; i < this.filesArr.length; i++) {
    let build = new Promise((resolve, reject) => {
            let freader = new FileReader();
            freader.readAsDataURL(this.filesArr[i]); // reads file contents
            freader.onload = f => {    // executes after successful read
                let base64 = 'base64,';
                let content = freader.result.indexOf(base64) + base64.length;
                let fileContents = freader.result.substring(content);
                resolve({ // returns a value after successful promise
                    Title: this.filesArr[i].name, // Store file name
                    VersionData: fileContents
                })
            };
        })
    this.filePromises.push(build); // filePromises called by Promise.all()
}
return Promise.all(this.filePromises) // Execute all file builds asynchronously
.then(result => {
    this.handleSaveFiles(result) // Pass file objects to Apex
}) 
}
removeFiles(event)
{
    this.showSpinner = false;
     this.files = undefined; 
    this.fileNamesArr = []; 
    this.filesArr = [];
    this.filesUploaded = [];
}

The problem is that in this case I do not know how to manage the removeFiles function. Could anybody help me?

Answer 1

You're clearing the array (this.filesUploaded = []), so of course it's removing all the files. Just splice the existing file out of the arrays. You'll want the index for that:

<template if:true={fileUploaded} for:each={fileNamesArr} for:item="fileName" for:index="index">
  <lightning-button-icon data-index={index} key={fileName.Name} ...

---

removeFiles(event) {
    this.showSpinner = false;
    this.files 
    this.fileNamesArr.splice(event.target.dataset.index, 1);
    this.filesArr.splice(event.target.dataset.index, 1);
    this.filesUploaded.splice(event.target.dataset.index, 1);
    this.files = [...this.files];
    this.fileNamesArr = [...this.fileNamesArr];
    this.filesArr = [...this.filesArr];
    this.filesUploaded = [...this.filesUploaded];
}