how to disable Lightning button after file upload in LWC

Question

I have a lwc page where users can upload files in an object. I have a requirement the import button need to be enabled only if the file is not uploaded yet , but if it is uploaded succesfully i should get only the file uploaded visible .

With my code it make the uploaded button disabled before that i get a file uploaded .

Below is the my lwc code:

<lightning-file-upload 
                            name="fileUploader"
                            accept={acceptedFormats}
                            record-id={recordId}
                            onuploadfinished={handleUploadFinished}
                            onchange={saveFile}
                            disabled={disableImport}
                            multiple
                            >
                        </lightning-file-upload>

@track inputFiles;
get disableImport() {
    return !this.inputFiles || this.inputFiles.files.length === 0;
}

   saveFile(event){
     
    this.inputFiles = event.target;

       var fileCon = this.filesUploaded[0];
       this.fileSize = this.formatBytes(fileCon.size, 2);
       if (fileCon.size > MAX_FILE_SIZE) {
           let message = 'File size cannot exceed ' + MAX_FILE_SIZE + ' bytes.\n' + 'Selected file size: ' + fileCon.size;
           this.dispatchEvent(new ShowToastEvent({
               title: 'Error',
               message: message,
               variant: 'error'
           }));
           return;
       }
       var reader = new FileReader();
       var self = this;
       reader.onload = function() {
           var fileContents = reader.result;
           var base64Mark = 'base64,';
           var dataStart = fileContents.indexOf(base64Mark) + base64Mark.length;
           fileContents = fileContents.substring(dataStart);
           self.upload(fileCon, fileContents);
       };
       reader.readAsDataURL(fileCon);
       
       
   }

Answer 1

You've just got your boolean reversed. Your getter is returning true when there are no input files, which makes disabled="true" on your upload button.

Just change to:

return (this.inputFiles && this.inputFiles.length > 0);

Edit: Since this is not working (the button stays enabled) I would try removing the getter and using a tracked variable in its place.

<lightning-file-upload 
                        name="fileUploader"
                        accept={acceptedFormats}
                        record-id={recordId}
                        onuploadfinished={handleUploadFinished}
                        onchange={saveFile}
                        disabled={isDisabled}
                        multiple
                        >
                    </lightning-file-upload>

and

@track inputFiles;
@track isDisabled = true;
...
saveFile(event) {
    this.inputFiles = event.target;
    var fileCon = this.filesUploaded[0];
    this.fileSize = this.formatBytes(fileCon.size, 2);
    if (fileCon.size > MAX_FILE_SIZE) {
        let message = 'File size cannot exceed ' + MAX_FILE_SIZE + ' bytes.\n' + 'Selected file size: ' + fileCon.size;
        this.dispatchEvent(new ShowToastEvent({
            title: 'Error',
            message: message,
            variant: 'error'
        }));
        return;
    }
    //You've gotten past any errors, so turn off the button.
    this.isDisabled = true;

Note that if I test code similar to yours, the getter works and the button disables correctly. I'm uncertain why your code isn't working as expected; using getters is generally a good practice. This method is less elegant but should work.