[CLOSED] multiple file upload and file size at client side

Page 1 of 3 123 LastLast
  1. #1

    [CLOSED] multiple file upload and file size at client side

    Hi

    I am looking to upload multiple files with computing file sizes at client side before submitting to the server. After searching through the forums, I found out that it was not possible due to security reason (at least for filesize) or alternatively use swfupload.

    I have a the following whcih works under chrome and firefox, is there a way to extend ext:FileUploadField in a similar way?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <script type="text/javascript">
    function setUploadSize(el,id1,id2)
    {
        var size=0;
        for(var num1=0;num1<el.files.length;num1++) 
        {
            var file=el.files[num1];
            //alert(file.name+" "+file.type+" "+file.size);
            size+=file.size;
        }
        document.querySelector("#"+id1).textContent=el.files.length;
        document.querySelector("#"+id2).textContent=Math.round(size/1000);
    }
    </script>
    </head>
    <body>
    <form>
    <input type="file" multiple="multiple" onchange="setUploadSize(this,'count','size')" /><br/>
    Total files: <span id="count">0</span>, Total Kb: <span id="size">0</span>
    </form>
    </body>
    </html>
    Last edited by Daniil; Dec 21, 2014 at 1:56 PM. Reason: [CLOSED]
  2. #2
    Hi,

    We think it should be possible with FileUploadField.

    You could call the setUploadSize function within a FileSelected listener.
  3. #3
    Quote Originally Posted by Daniil View Post

    You could call the setUploadSize function within a FileSelected listener.
    Ok Thanks I'll check it but what about adding (multiple="multiple") attribute to allow multiselect of files?
  4. #4
    Yes, this way:

    Example
    <ext:FileUploadField runat="server">
        <Listeners>
            <Render Handler="this.fileInput.set({ multiple : 'multiple' });" />
        </Listeners>
    </ext:FileUploadField>
  5. #5

    [CLOSED]

    Thank you very much Daniil, worked as always:)

    btw I post the whole example if anyone is interested:

    <%@ Page Language="C#" AutoEventWireup="true"  %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    
    
        <script runat="server">
            protected void UploadClick(object sender, DirectEventArgs e)
            {
    
                if (Request.Files.Count > 0)
                {
                    //Files received
                    var filesReceived = Request.Files;                
                }
            }
         
         </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <script type="text/javascript">
    
        var UpdateUploadInfo = function (el, label) {
    
            debugger;
            var ret = true;
    
            if (Ext.isIE) {
                return;
            }
            var size = 0;
            var names = '';
            for (var num1 = 0; num1 < el.files.length; num1++) {
                var file = el.files[num1];
                names += file.name + '\r\n';
                //alert(file.name+" "+file.type+" "+file.size);
                size += file.size;
            }
            var txt = '';
            var fileSize = Ext.util.Format.fileSize(size);
    
            if (size > 31457280) {
                txt = String.format('You are trying to upload {0}. Max. allowed upload size is 30 MB', fileSize);
                ret = false;
            } else {
                txt = String.format('{0} file(s) of total size {1}', el.files.length, fileSize);
            }
    
            label.setText(txt);
            return ret;
        }
    
        var SetMultipleUpload = function (fileupload, label) {
            fileupload.fileInput.set({ multiple: 'multiple' });
    
            if (Ext.isIE) {
                label.setText('IE does not support multiple file upload, to use this feature use Firefox or Chrome');
            }
        }
        </script>
    
        <title></title>
    </head>
    <body>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
    
        <form id="form1" runat="server">
        
    
    <ext:Window ID="MainWindow" runat="server" Height="260"  Width="390" Layout="FitLayout"
        Collapsible="true" Title="Upload files">
        <Items>
    
       <ext:FormPanel 
                ID="BasicForm" 
                runat="server"            
                Frame="true"       
                MonitorValid="true"
                DefaultAnchor="100%"
                 >
                <Items>                 
                 
                    <ext:FileUploadField 
                        ID="FileUploadField1" 
                        runat="server"    
                        ButtonText="Add Files"
                        Icon="Add"         
                        ButtonOnly="true"
                        AllowBlank="false"                                                  
                        >
                        <Listeners>
                            <render Handler="SetMultipleUpload( this, #{UpdateLabel}) ;" />
                            <FileSelected Handler="if(!UpdateUploadInfo(this.fileInput.dom, #{UpdateLabel})) {this.reset();SetMultipleUpload( this, #{UpdateLabel})}"/>                        
                        </Listeners>               
                        </ext:FileUploadField>
    
                      <ext:Label ID="UpdateLabel" runat="server" ></ext:Label>
                    
    
                </Items>
                <Listeners>
                    <ClientValidation Handler="#{SaveButton}.setDisabled(!valid);" />                               
                </Listeners>
                <Buttons>
                    <ext:Button ID="SaveButton" runat="server" Text="Save">
                        <DirectEvents>
                            <Click 
                                OnEvent="UploadClick"  ><%-- After="#{BasicForm}.getForm().reset();"--%>                           
                                <EventMask ShowMask="true" />
                            </Click>                         
                        </DirectEvents>
                    </ext:Button>
                    <ext:Button ID="Button2" runat="server" Text="Reset">
                        <Listeners>
                            <%--when resetting the form  make sure to call SetMultipleUpload() otherwise you won't be able to select multiple files, whithout rendering the control again--%>
                            <Click Handler="#{BasicForm}.getForm().reset(); SetMultipleUpload( #{FileUploadField1}, #{UpdateLabel});#{UpdateLabel}.setText('');" />
                        </Listeners>
                    </ext:Button>
                </Buttons>
            </ext:FormPanel>
        </Items>
    
        <Listeners>
            <Hide Handler="#{BasicForm}.getForm().reset(); SetMultipleUpload( #{FileUploadField1}, #{UpdateLabel});#{UpdateLabel}.setText('');" />
            
        </Listeners>
        </ext:Window>
        </form>
    </body>
    </html>
  6. #6
    Thanks for sharing! It can help someone on the forums in the future.
  7. #7
    how would look like this example in ext.net v2?, can any post it
  8. #8
    Hi @tk.Mageztik,

    Unfortunately, I have not such example for Ext.NET v2.

    Could you clarify what exactly problem (-s) are you facing with porting this example to Ext.NET v2?
  9. #9
    Quote Originally Posted by Daniil View Post
    Hi @tk.Mageztik,

    Unfortunately, I have not such example for Ext.NET v2.

    Could you clarify what exactly problem (-s) are you facing with porting this example to Ext.NET v2?
    Well I have this problem too, I am trying to migrate to 2.x and I had to change this to:
    <ext:FileUploadField runat="server">
        <Listeners>
            <Render Handler="this.inputEl.set({ multiple: 'multiple' });" />
        </Listeners>
    </ext:FileUploadField>
    but this is not setting the 'multiple' attribute, any idea? What is theequivalent of 'fileInput'?
  10. #10
    Hi @mirwais,

    Please use:
    App.FileUploadField1.button.fileInputEl
Page 1 of 3 123 LastLast

Similar Threads

  1. [CLOSED] How to identify upload file size before uploading in IE?
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jun 29, 2012, 5:54 PM
  2. Replies: 2
    Last Post: Jan 17, 2012, 8:58 AM
  3. [CLOSED] Validate file size using FileUpload in client side
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Oct 28, 2011, 4:12 PM
  4. Replies: 1
    Last Post: Jun 23, 2011, 9:37 AM
  5. Maximum file size for upload
    By CoolNoob in forum 1.x Help
    Replies: 3
    Last Post: Jan 07, 2010, 3:57 PM

Tags for this Thread

Posting Permissions