How to check file size when uploading photo using ajaxupload3.5

Question

I'm using ajaxuploader to upload and change user photo using the solution from here:http://www.c-sharpcorner.com/blogs/4183/upload-image-by-ajax-uploader-with-jquery.aspx The code below works fine but I don't know how to check file size in client side or (if it's not possible in client side) how to get the response from server side. In mycode below the response id the HTML of the whole page.

<script src="../js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
     <script src="../js/ajaxupload.3.5.js" type="text/javascript"></script>
 <script type="text/javascript" language="javascript">

         $(function () {

             $('#<%=status_message.ClientID%>').html('');
             var btnUpload = $('#upload_button');
             var status = $('#status_message');
             new AjaxUpload(btnUpload, {
                 action: 'test_photoUpload.aspx/uploadPhoto',
                 name: 'uploadfile',
                 onSubmit: function (file, ext) {
                     $('#<%=status_message.ClientID%>').html('');
                     $('#imgLoad').show();
                     if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
                         // extension is not allowed
                         $('#imgLoad').hide();
                         $('#<%=status_message.ClientID%>').html('Only JPG, PNG or GIF files are allowed');
                         alert("submitted");
                         return false;
                     }
                     //                     if (file.ContentLength > 1024 * 1024 * 2) {
                     //                         $('#<%=status_message.ClientID%>').html('Please upload photo less than 2MB size.');
                     //                         alert("submitted");
                     //                         return false;
                     //                     }

                 },
                 onComplete: function (file, response) {
                     alert(response);
                     status.text('');
                     $('#<%=hdPhoto.ClientID%>').val(file);
                     $('#<%=imgPhoto.ClientID%>').attr('src', 'UserImages/' + file);
                     // $('#<%=status_message.ClientID%>').html(file.toString());
                     $('#imgLoad').hide();
                     return false;
                 }
             });
         });

        </script>



private string uploadPhoto()
        {
            string chkResult = "false";
            //upload photo code
            string i = Request.Files.ToString();
            string ext = Path.GetExtension(Request.Files[0].FileName.ToString().ToLower());

            if (ext == ".png" || ext == ".jpg" || ext == ".gif" || ext == ".jpeg")
            {
                if (Request.Files[0].ContentLength <= 1024 * 1024 * 2)
                {
                    if (File.Exists(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName)))
                        File.Delete(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName));

                    Request.Files[0].SaveAs(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName));
                    chkResult = "true";
                }
                else
                {
                    status_message.InnerHtml = "Please upload less than 2MB size.";
                    chkResult = "false";
                }
            }
            else
            {
                status_message.InnerHtml = "Please upload only png, jpg, jpeg or gif file.";
                chkResult = "false";
            }
            // Response.Close();
            // Response.End();
            return chkResult;
        }

I've tried to serialize the response to Json and return but the response is the same HTML converted to string. I tried like this:

$(function () {

             $('#<%=status_message.ClientID%>').html('');
             var btnUpload = $('#upload_button');
             var status = $('#status_message');
             new AjaxUpload(btnUpload, {
                 action: 'test_photoUpload.aspx/uploadPhoto',
                 name: 'uploadfile',
                 dataType: 'json',
                 contentType: "application/json; charset=utf-8",
                 onSubmit: function (file, ext) {
                     $('#<%=status_message.ClientID%>').html('');
                     $('#imgLoad').show();
                     if (!(ext && /^(jpg|png|jpeg|gif)$/.test(ext))) {
                         // extension is not allowed
                         $('#imgLoad').hide();
                         $('#<%=status_message.ClientID%>').html('Only JPG, PNG or GIF files are allowed');
                         alert("submitted");
                         return false;
                     }
                     //                     if (file.ContentLength > 1024 * 1024 * 2) {
                     //                         $('#<%=status_message.ClientID%>').html('Please upload photo less than 2MB size.');
                     //                         alert("submitted");
                     //                         return false;
                     //                     }

                 },
                 onComplete: function (file, response) {
                     var obj = JSON.stringify(response);
                     //var obj = jQuery.parseJSON(response);
                     alert(obj);
                     alert(response);
                     status.text('');
                     $('#<%=hdPhoto.ClientID%>').val(file);
                     $('#<%=imgPhoto.ClientID%>').attr('src', 'UserImages/' + file);
                     // $('#<%=status_message.ClientID%>').html(file.toString());
                     $('#imgLoad').hide();
                     return false;
                 }
             });
         });

using System.Web.Script.Serialization; using System.Web.Script.Services;

 [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        private string uploadPhoto()
        {
            string chkResult = "false";
            //upload photo code
            string i = Request.Files.ToString();
            string ext = Path.GetExtension(Request.Files[0].FileName.ToString().ToLower());

            if (ext == ".png" || ext == ".jpg" || ext == ".gif" || ext == ".jpeg")
            {
                if (Request.Files[0].ContentLength <= 1024 * 1024 * 2)
                {
                    if (File.Exists(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName)))
                        File.Delete(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName));

                    Request.Files[0].SaveAs(Server.MapPath("UserImages") + "\\" + System.IO.Path.GetFileName(Request.Files[0].FileName));
                    chkResult = "true";
                }
                else
                {
                    status_message.InnerHtml = "Please upload less than 2MB size.";
                    chkResult = "false";
                }
            }
            else
            {
                status_message.InnerHtml = "Please upload only png, jpg, jpeg or gif file.";
                chkResult = "false";
            }
            // Response.Close();
            // Response.End();
            //return chkResult;
            var keyValues = new Dictionary<string, string>
               {
                   { "success", "success" },
                   { "error", "error" }
               };

            JavaScriptSerializer js = new JavaScriptSerializer();
            string json = js.Serialize(keyValues);
            //Response.Write(json);
            return json;

        }

I've also tried to use webmethod and static uploadPhoto method but the response is the same. Any help is appreciated.

Answer 1

It works for me. I instantiate the AjaxUpload in a variable, then I use the variable itself to call an outside script, which submits the file. After that, I get the input information from inside the AjaxUpload script.

var btnUpload = $("#upload");
up_archive = new AjaxUpload(btnUpload, {
    action: 'FileUpload.php',
    name: 'upload_archive',
    responseType: 'json', //get the server response as JSON
    autoSubmit: false, //I'll set some informations about the archive outside this script
    onChange: function(file, ext){
        //check the file size
        if (up_archive._input.files[0].size > 2097152){ //2MB
            //show alert message
            alert('Selected file is bigger than 2MB.');
            return;
        }
    },
    onSubmit: function(file, ext){
        desc_archive = $("#desc_archive").val();

        this.setData( {desc_archive: desc_archive} ); //set a description for the archive to be uploaded
    },
    onComplete: function(file, response){
        $("#desc_archive").val('');
        $("#div_response").html(response.message);
    }
});