asp.net - net - Cargar un archivo al servidor automáticamente dentro de un panel de actualización no funciona la primera vez

tag helpers asp net core 2

Question

Requerimientos

Estoy intentando cargar un archivo, tan pronto como un usuario lo selecciona. Tengo que cumplir los siguientes requisitos:

1. El botón se parece a otros botones en la aplicación.
2. El archivo se carga tan pronto como el usuario lo selecciona.
3. Necesito que esté en un UpdatePanel ya que tengo que hacer actualizaciones condicionales a la página. PUEDO hacer una devolución completa en el evento del archivo seleccionado (también conocido como onchange ).

Codigo actual

A continuación se muestra cómo se ve mi archivo de vista:

<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 relevante:

<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>

Código detrás:

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();
        }
    }
}

Explicación / Flujo

1. El usuario hace clic en el botón btnFileImportSkin .
2. Se onImport función onImport , que hace clic en el botón de fileimport .
3. El usuario selecciona un archivo y presiona Abrir.
4. Se llama onFileSelected .
5. onUpload se llama con éxito.
6. btnUpload_Click se llama con éxito cada vez.

Sin embargo el problema es que

fileImport.PostedFile es nulo la primera vez que el usuario selecciona un archivo. Todo funciona bien la segunda vez y de ahí en adelante.

Relacionado

Esta pregunta está estrechamente relacionada con mi problema, pero el OP probablemente quería una solución de carga Async como en Gmail. Ya he intentado hacer lo siguiente como en las respuestas a esta pregunta:

1. __doPostBack () en el evento btnUpload de btnUpload
2. this.form.submit () onchange evento de mi control FileUpload .
3. Configuración del atributo onchange del control FileUpload en Page_PreRender

Notas adicionales

1. Esto funcionó perfectamente cuando no tenía paneles de actualización. Estaba haciendo this.form.submit () directamente en el evento onchange del control FileUpload .
2. El marco de destino es .NET 4.0

NOTA: Se agregó un Visible = "falso" en el control FileUpload anterior. Era el problema, pero lo había ignorado al hacer la pregunta.

Answer 1

Con una sugerencia de la respuesta de BeeTee , otra publicación de SO y este hilo en otro foro , descubrí que el control FileUpload debe estar visible durante la presentación preliminar . Esto es probablemente cierto para cualquier UpdatePanels padre en el que se encuentre este control. Entonces, básicamente, eliminé Visible=false de mi definición de control a continuación:

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

En mi caso, podría ocultarlo estableciendo la propiedad de opacity css en 0. Sin embargo, hay otras dos formas de evitarlo:

1. Establecer la display:none propiedad css display:none
2. Haga que la propiedad Visible del control asp se convierta temporalmente en verdadero durante el proceso de representación. Esto se detalla en el hilo vinculado anteriormente desde otro foro.

Tenga en cuenta que el Visible también debe ser cierto para los padres de este control FileUpload como se menciona en el otro subproceso SO.

Answer 2

Este código funciona para mí, cuando se dirige tanto a las versiones de framework .Net 4.5 como a las 4.0. Copié / pegué su código en una nueva aplicación de Web Forms, y en ambos casos fileImport.PostedFile no era nulo, sino que contenía la Secuencia de la imagen que seleccioné.

¿Hay algún problema en alguna de las otras marcas en tu página? ¿O tal vez el ciclo de vida de tu página? ¿Es el html / javascript que publicó en un Control de usuario o en una página de formulario web?