FileUpload fails when its id is not defined

  1. #1

    FileUpload fails when its id is not defined

    When FileUpload's id is defined (line 22) it's possible to upload files multiple times

    On the following sample, select a file then press Upload button
    It outputs:
    File Count: 1
    File Name: C:\Files\aaaa.pdf
    Once upload is complete select another file, then press Upload button again
    It outputs:
    File Count: 1
    File Name: C:\Files\bbbb.pdf
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var Upload = function () {
                var form = App._frm;
                if (form.isValid()) {
                    form.getForm().submit({
                        clientValidation: true,
                        waitMsg: Ext.view.AbstractView.prototype.loadingText,
                        url: Ext.net.ResourceMgr.resolveUrl("~/Example/Save")
                    });
                }
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
        <ext:FormPanel ID="_frm" Title="Ext.NET" BodyPadding="5" Layout="AnchorLayout" DefaultAnchor="100%" Width="350" Height="150" runat="server">
            <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
            <Items>
                <ext:FileUploadField ID="_fuf" ValidateOnBlur="false" ValidateOnChange="false" EmptyText="Select a File" Icon="Magnifier" ButtonText="" AllowBlank="false" runat="server" />
            </Items>
            <Buttons>
                <ext:Button Flat="true" Icon="DiskUpload" Text="Upload" OnClientClick="Upload()" runat="server" />
            </Buttons>
        </ext:FormPanel>
    </body>
    </html>
    namespace SandBox.Controllers
    {
        public class ExampleController : System.Web.Mvc.Controller
        {
            public ActionResult Index() => View();
    
            public FormPanelResult Save()
            {
                Debug.WriteLine($"File Count: {Request.Files.Count}");
    
                if (Request.Files.Count > 0)
                {
                    Debug.WriteLine($"File Name: {Request.Files.Get(0).FileName}");
                }
    
                return new FormPanelResult { IsUpload = true, Success = true };
            }
        }
    }
    But when FileUpload's id IS NOT defined (line 22), only the first upload works as expected.

    On the following sample, select a file then press Upload button
    It outputs:
    File Count: 1
    File Name: C:\Files\aaaa.pdf
    Once upload is complete select another file, then press Upload button again
    It outputs:
    File Count: 0
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <script type="text/javascript">
            var Upload = function () {
                var form = App._frm;
                if (form.isValid()) {
                    form.getForm().submit({
                        clientValidation: true,
                        waitMsg: Ext.view.AbstractView.prototype.loadingText,
                        url: Ext.net.ResourceMgr.resolveUrl("~/Example/Save")
                    });
                }
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager ScriptMode="Debug" Theme="Crisp" runat="server" />
        <ext:FormPanel ID="_frm" Title="Ext.NET" BodyPadding="5" Layout="AnchorLayout" DefaultAnchor="100%" Width="350" Height="150" runat="server">
            <FieldDefaults LabelAlign="Top" MsgTarget="Side" />
            <Items>
                <ext:FileUploadField ValidateOnBlur="false" ValidateOnChange="false" EmptyText="Select a File" Icon="Magnifier" ButtonText="" AllowBlank="false" runat="server" />
            </Items>
            <Buttons>
                <ext:Button Flat="true" Icon="DiskUpload" Text="Upload" OnClientClick="Upload()" runat="server" />
            </Buttons>
        </ext:FormPanel>
    </body>
    </html>
    Any ideas to overcome the issue presented above?

    Thanks in advance.
    Last edited by RaphaelSaldanha; Jun 23, 2016 at 1:44 PM.
  2. #2
    It may be related to FileUpload's ClearOnSubmit because it's possible to upload files multiple times when that property is set to false.

    But unfortunately, in my scenario, it's not possible to set FileUpload's ClearOnSubmit to false.
  3. #3
    On chrome and on FireFox, if FileUpload's id is not defined, the upload fails on all requests.
  4. #4
    Hello Raphael and thanks for the report!

    We've logged this issue as #1358, unfortunately no workaround for now (other than clearonsubmit or assigning it an ID) but we'll update here as soon as we have news on this issue!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    When FileUpload's id is not defined, the id is initialized by the constructor, that invokes field's getId, that initializes the id as xtype + '-' + me.getAutoId().

    For some reason, FileUpload's id cannot have slash on its id.

    To overcome the issue, it's necessary to define the id, if it's not defined, without slash, as shown below (line 5):

    Ext.form.field.File.override({
        constructor: function (config) {
            var me = this;
            if (Ext.isEmpty(config.id)) {
                config.id = config.xtype + me.getAutoId();
            }
            me.callParent(arguments);
        }
    });
    Last edited by RaphaelSaldanha; Jul 01, 2016 at 2:05 PM.

Similar Threads

  1. FileUpload Issue
    By glenh in forum 2.x Help
    Replies: 1
    Last Post: Feb 03, 2014, 3:13 PM
  2. MVC FIleupload
    By idelacruz in forum 2.x Help
    Replies: 0
    Last Post: Nov 22, 2013, 4:34 PM
  3. Replies: 3
    Last Post: Jul 12, 2012, 1:07 PM
  4. bug in fileupload
    By pablisho in forum 1.x Help
    Replies: 0
    Last Post: Jul 01, 2009, 10:55 AM
  5. Replies: 0
    Last Post: Jun 09, 2009, 4:25 AM

Posting Permissions