[CLOSED] FileFileUploadField validate file size before uploading it

[Geovision]

Hello,
I have a FileUploadField control, I want to validate the size of the file to be uploaded on selecting it which means on first browsing and selecting the file directly and before waiting the FileUploadField control to upload it or pressing a submit button validate its size.
is there anyway to validate client side?

Thank you

[fabricio.murta]

Hello!

Yes, you can just use HTML5 DOM's file input field's size property to get the size of the selected file.

You get the DOM object of the input file from a FileUploadField component via its FileInputElement property.

I hope this helps!

[Geovision]

Hello,

Please take look to the piece of code, I used "fileInputEl" property and i got the dom of the file upload field but the size is always 1.

 function test()
        {
            
            console.log(App.FileUpload.fileInputEl.dom.size);  //always 1
        }

<ext:FileUploadField ID="FileUpload" runat="server" Width="500" Icon="Attach"  FieldLabel="Browse"    >

                                    <Listeners>
                                        <Change Handler="test();" />
                                    </Listeners>
                                </ext:FileUploadField>

is there any suggestions?

[fabricio.murta]

Hello @geovision!

Here's the literature on the input element by MDN: <input>

On this page, scroll down to where they explain the "size" attribute. It is just the size of the control. Not what we want.
Scroll further down, and you'll see a Notes section talking about files handling, and redirecting you to Using files from web applications.

On this new page, you'll see how it does access the files in an <input type="file" /> element. It is a files array. Then each entry of this array can contain one of the many possible selected files at once. Each file is a File object.

Now the problem is that in the MDN documentation for the File Object there's no mention for a size field at a first look. But if I expand this on Internet Explorer 11 at least, after selecting a file in a text field I can get it with:

App.FileUpload.fileInputEl.dom.files[0].size

But according to the following stackoverflow question, this is something reasonably recent, and possibly not supported in all browsers: JavaScript file upload size validation.

So, that's the way to use it, but I'm not really sure which browsers will support it. This is not an Ext.NET nor ExtJS feature at all, and there's no support client side for both ExtJS and Ext.NET to get the file size (Ext.NET provides facilities to get the file size server side though).

I hope this helps clarifying the usage and limitations of client-side file size querying!

[fabricio.murta]

Hello @Geovision!

We didn't hear back from you for some time now. Do you still need help with this issue?