filter the file type with the file upload control

Question

how to filter the file type with the file upload control in asp.net & c#.net

for example on clicking the browse button of the file upload control ,it should open browse file dialog with only excel file types.

how is it possible

Answer 1

I think it is not possible with <input type="file" control.

I've heard about SWFUploader that allows to define extensions for files to upload, but this is a flash-based component.

And even if you use SWFUploader, nothing will prevent you against typing *.*, and selecting any file to upload.

Answer 2

this is the answer from the other forum

I think it 's easy to realise it if you use C# (or VB,net) and .net fileupload control. you may define file types in arraylist "allowedExtensions".

string upload_Image(FileUpload fileupload, string ImageSavedPath)
{
    FileUpload fu = fileupload;  
    string imagepath = "";
    if (fileupload.HasFile)
    {
        string filepath = Server.MapPath(ImageSavedPath);  
        String fileExtension = System.IO.Path.GetExtension(fu.FileName).ToLower();
        String[] allowedExtensions = { ".gif", ".png", ".jpeg", ".jpg" };
        for (int i = 0; i < allowedExtensions.Length; i++)
        {
            if (fileExtension == allowedExtensions[i])
            {
                try
                {
                    string s_newfilename = DateTime.Now.Year.ToString() +
                        DateTime.Now.Month.ToString() + DateTime.Now.Day.ToString() +
                        DateTime.Now.Hour.ToString() + DateTime.Now.Minute.ToString() +                           DateTime.Now.Second.ToString() +  fileExtension; 
                        fu.PostedFile.SaveAs(filepath + s_newfilename);

                   imagepath = ImageSavedPath + s_newfilename;
               }
               catch (Exception ex)
               {
                   Response.Write("File could not be uploaded.");
               }

           }

       }

   }
   return imagepath;
}

Answer 3

when using Angular File Upload , this way you ca pass filters to uploder

.html file

<input type="file" nv-file-select uploader="uploaderImages" />

.js file:

$scope.uploaderImages.filters.push({
    name: 'imageFilter',
    fn: function (item/*{File|FileLikeObject}*/, options) {
        var type = '|' + item.type.slice(item.type.lastIndexOf('/') + 1) + '|';
        return '|jpg|png|jpeg|bmp|gif|'.indexOf(type) !== -1;
    }
});

Answer 4

I refer to post # ASP.NET - Limit file upload available file types

Using RegularExpressionValidator can solve the problem easily. No serverside code is necessary for the checking of the extension anymore. Copy & Paste this code

<asp:RegularExpressionValidator ID="uplValidator" runat="server"   

  ControlToValidate="FileUpload1" ErrorMessage=".mp3, .mp4 & wma formats are allowed"

 ValidationExpression="(.+\.([Mm][Pp][3])|.+\.([Mm][Pp][4])|.+\.([Ww][Mm][Aa]))">

</asp:RegularExpressionValidator>

Answer 5

It works perfectly!

<asp:FileUpload ID="FileUpload1" runat="server" accept=".xls, .xlsx"/>

Answer 6

You can use C1Upload from ComponentOne to do this. It has support for file type and size validation. Keep in mind, you will want to also validate on the server since file extensions can easily be changed to mismatch their actual type. This is a standard in any validation practice: validate in the UI layer then validate at the BL layer and preferably validate at the DL too. Here is a demo of the ASP.NET AJAX upload control with built-in validation.

Another cool thing about this control is that is supports multiple upload files and shows upload progress!