Загрузка файла на сервер автоматически внутри панели обновления не работает в первый раз

Требования

Я пытаюсь загрузить файл, как только пользователь его выберет. Я должен выполнить следующие требования:

• Кнопка выглядит как другие кнопки в приложении.
• Файл загружается, как только пользователь выбирает его.
• Мне нужно, чтобы он находился в UpdatePanel, так как мне нужно сделать условные обновления на странице. я CAN сделать полный ответ на выбранный файл (a.k.a onchange).

Текущий код

Вот как выглядит мой файл вида:

<asp:UpdatePanel ID="upData" UpdateMode="Conditional" runat="server">
    <ContentTemplate>

    <div style="width: auto; float: right;">

    <asp:Button ID="btnFileImportSkin" CssClass="ButtonSkin AddButton" Text="Import" Style="position: absolute; z-index: 2;" runat="server" OnClientClick="Javascript:onImport(); return false;" />
    <asp:FileUpload ID="fileImport" Visible="false" Style="position:relative; opacity:0;" runat="server" onchange="Javascript:onFileSelected();"  /> 
           <%-- onchange="Javascript:this.form.submit();" /> --%>
           <%-- <asp:Button ID="btnUpload" runat="server" OnClientClick="Javascript:alert('Uploading...'); __doPostBack('<%= btnUpload.ID %>', ''); return false;" /> --%>
    <asp:Button ID="btnUpload" OnClick="btnUpload_Click" runat="server" />
    </div>

    </ContentTemplate>
    <Triggers>
        <asp:PostBackTrigger ControlID="btnUpload" />
    </Triggers>
</asp:UpdatePanel>

Соответствующий Javascript:

<script type="text/javascript">
    function onImport() {
        var fileImportClientId = '<%= fileImport.ClientID %>';
        document.getElementById(fileImportClientId).click();
    }

    function onFileSelected() {
        alert("File Selected");
        // I have tried calling the function directly and with a timeout
        setTimeout(onUpload, 20);
    }

    function onUpload() {
        var btnUploadClientId = '<%= btnUpload.ClientID %>';
        document.getElementById(btnUploadClientId).click();
    }
</script>

Код позади:

protected void btnUpload_Click(object sender, EventArgs e)
{
    // PostedFile is null first time code gets here on user selecting a file
    if (fileImport.PostedFile != null)
    {
        if (fileImport.PostedFile.FileName.Length > 0)
        {
            ImportFromFile();
        }
    }
}

Объяснение/Поток

• Пользователь нажимает кнопку btnFileImportSkin.
• Вызывается функция onImport, которая программным образом нажимает кнопку fileimport.
• Пользователь выбирает файл и нажимает кнопку "Открыть".
• onFileSelected.
• onUpload называется успешно.
• btnUpload_Click вызывается успешно каждый раз.

Однако проблема заключается в том, что

fileImport.PostedFile имеет значение null при первом выборе пользователем файла. Все работает отлично во второй раз и оттуда.

Похожие

Этот вопрос тесно связан с моей проблемой, но OP, вероятно, захотел загрузить Async, как в Gmail. Я уже пробовал сделать следующее, как в ответах на этот вопрос:

• __ doPostBack() в событии OnClientClick btnUpload
• this.form.submit() onchange события моего элемента управления FileUpload.
• Настройка атрибута onchange элемента управления FileUpload в Page_PreRender

Дополнительные примечания

• Эта вещь отлично работала, когда у меня не было панелей обновления. Я делал this.form.submit() непосредственно в событии onchange элемента управления FileUpload.
• Целевая структура .NET 4.0

ПРИМЕЧАНИЕ. В приведенном выше элементе управления FileUpload добавлен Visible = "false". Это была проблема, но я игнорировал ее, задавая вопрос.

Ответы

<asp:FileUpload ID="fileImport" Visible="false" Style="position:relative; opacity:0;" runat="server" onchange="Javascript:onFileSelected();"  />