How to clear asyncfileupload after button is clicked

Question

I'm uploading a file and that works fine but I'm trying to clear the file name from showing after I click on a button.

<ajaxToolkit:AsyncFileUpload ID="fileUpload" runat="server" OnClientUploadComplete="OutturnImageUpload" OnUploadedComplete="fileUpload_UploadedComplete" accept="image/*" />

The name stays after I click on choose file button which is fine. I only want to clear the file name after I click the Save Outturn button, so they can upload another file.

I tried creating a clear function that gets triggered when the button is clicked:

$('#btnSaveOutturn').click(function () {
                Clear();
            });

    function Clear() {
        $('#<%= fileUpload.ClientID %>').val("");
    }

But that didn't clear the file name. I tried adding $(sender._element).find('input').val(''); to the OnClientUploadComplete but that clears the name as soon as the Choose File button is clicked and it makes it look like no file was uploaded:

How can I clear the file name only after I click the button?