[CLOSED] [#1385] [4.2.0] Upload component

  1. #1

    [CLOSED] [#1385] [4.2.0] Upload component

    Hi,

    it is possible to upload photos?
  2. #2
    Hello @ADV!

    You have the FileField component to handle file uploads. But I believe that specifically for photos, it would be a matter of your server settings allowing the file extension and possible sizes or not.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello,
    we are working with Web Forms.

    Can you show me an example page that uses EXT.NET Mobile and that allows to upload a file to chosen by the user?

    thank you.
  4. #4
    Hello @ADV!

    Here's an example using the FileField component to upload a file to the server:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                if (Request.Params["Photo"] != null)
                {
                    FeedbackBar.Call("setHtml", "Status: File uploaded: " + Request.Params["Photo"]);
                }
                else
                {
                    FeedbackBar.Call("setHtml", "Status: Waiting file to be selected.");
                }
            }
        }
    </script>
    
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var handleSubmit = function (item, e) {
                var fileField = App.FileField1,
                    form = item.el.up('form').dom;
    
                if (fileField.getValue() == "") {
                    return false;
                } else {
                    form.submit();
                }
    
                return true;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager runat="server" />
    
                <ext:FileField ID="FileField1" runat="server" Name="Photo" Label="Choose a file to upload">
                    <Listeners>
                        <Change Handler="App.FeedbackBar.setHtml('Status: File selected. Ready to upload.');" />
                    </Listeners>
                </ext:FileField>
                <ext:Button runat="server" Text="Upload">
                    <Listeners>
                        <Tap Fn="handleSubmit" />
                    </Listeners>
                </ext:Button>
                <ext:Component ID="FeedbackBar" runat="server" />
            </div>
        </form>
    </body>
    </html>
    I hope this helps!
    Fabrício Murta
    Developer & Support Expert
  5. #5
    Thank you,
    the server side I receive the file name.

    You can also also explain to me how I get the file to be saved?
  6. #6
    No answer for my question?
  7. #7
    Sorry for the delay @ADV!

    We are working on your question now, and will provide you a feedback in a while!
    Fabrício Murta
    Developer & Support Expert
  8. #8
    Ok, no problem.

    I need client side code only.


    Server side i usually use this code:

    protected void cmdSignatureSave_DirectClick(object sender, DirectEventArgs e)
            {
                string fileNameWitPath;
    
                string BIN_SIGN = e.ExtraParams["BIN_SIGN"];
    
                fileNameWitPath = Session["ALLPATH"].ToString() + @"\Firme\CH_" + ((cIntervento)Session["CURRENT_INTERVENTO"]).ID + ".jpeg";
                using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
                {
                    using (BinaryWriter bw = new BinaryWriter(fs))
                    {
                        byte[] data = Convert.FromBase64String(BIN_SIGN);
                        bw.Write(data);
                        bw.Close();
                    }
                }
    
                X.Msg.Hide();
    
                WindowSignature.Close();
    
                X.Msg.Info(new InfoPanel { Icon = Ext.Net.Icon.Accept, Title = "Done", Html = "Salvataggio completato", UI = UI.Success, Alignment = AnchorPoint.BottomRight, HideDelay = 2500 }).Show();
            }
  9. #9
    Hello again, @ADV!

    Well, it turned out that the component missed the correct ASP.NET bindings, which would make it much harder to handle the file upload per se.

    Then we opened issue #1385 to log this problem and, ultimately, fix it.

    You can already use the component for its entirety if you pull and build the Ext.NET Mobile sources off our github repositories.

    The example that will work in the latest release of Ext.NET Mobile is the following:

    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                if (FileField1.HasFile)
                {
                    FeedbackBar.Call("setHtml", "Status: File uploaded: " + FileField1.FileName +
                        " (" + FileField1.FileContent.Length + " bytes)");
                }
                else
                {
                    FeedbackBar.Call("setHtml", "Status: Waiting file to be selected.");
                }
            }
        }
    </script>
    
    <html>
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            var handleSubmit = function (item, e) {
                var fileField = App.FileField1,
                    form = item.el.up('form').dom;
    
                if (fileField.getValue() == "") {
                    return false;
                } else {
                    form.submit();
                }
    
                return true;
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <ext:ResourceManager runat="server" />
    
                <ext:FileField ID="FileField1" runat="server" Name="Photo" Label="Choose a file to upload">
                    <Listeners>
                        <Change Handler="App.FeedbackBar.setHtml('Status: File selected. Ready to upload.');" />
                    </Listeners>
                </ext:FileField>
                <ext:Button runat="server" Text="Upload">
                    <Listeners>
                        <Tap Fn="handleSubmit" />
                    </Listeners>
                </ext:Button>
                <ext:Component ID="FeedbackBar" runat="server" />
            </div>
        </form>
    </body>
    </html>
    It is the exact same from before, except that now it is possible to use ASP.NET facilities to get the file handlers associated with the component.

    Sorry for the incomplete example in the early reply, and thanks for raising the interest on the file upload field which ultimately lead us for detecting this issue!
    Fabrício Murta
    Developer & Support Expert
  10. #10
    Hello @ADV!

    Reading your last response, maybe the solution above does not fit your needs. You may want to provide a sample on, maybe, how you do it in Ext.NET with the FileUploadField. Then we can check why it is not compatible with Ext.NET Mobile and either advice on how to proceed or apply the fix to the Ext.NET code, if any required.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. Replies: 2
    Last Post: Jun 27, 2013, 10:18 PM
  2. Replies: 8
    Last Post: Feb 06, 2013, 6:27 PM
  3. [CLOSED] Multiple file support to upload in file upload control
    By legaldiscovery in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Feb 01, 2013, 9:41 AM
  4. Replies: 1
    Last Post: Jun 23, 2011, 9:37 AM
  5. Replies: 1
    Last Post: May 22, 2009, 7:38 AM

Posting Permissions