Documentation

Upload files with jqxFileUpload to ASP.NET web service

In this help topic we are going to show you how to connect jqxFileUpload to ASP.NET web service.
  1. Create a new ASP.NET Empty Web Application.
  2. Add the following files to the Scripts folder. jqxcore.js, jqxbuttons.js, jqxfileupload.js and jquery-1.11.1.min.js.
  3. In the "Styles" folder add the "jqx.base.css" CSS file.
  4. Add a new web service to the website. Right click on your project’s name. Then choose "Add -> New Item -> Web Service". For example call it "FileUpload". This will create a FileUpload.asmx file which we will use for the serverside code to handle our file upload.

Open FileUpload.asmx.

Add these additional dependancies after the already included ones: 
using System.IO;
using System.Web.Script.Services;
using System.Web.Script.Serialization;

Use the following code for the [WebMethod] section 
[WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public void UploadFile()
        {
            HttpContext postedContext = HttpContext.Current;
            HttpPostedFile file = postedContext.Request.Files[0];
            string name = file.FileName;
            string resp;
            if (!file.ContentType.Contains("image"))
            {
                // check if file is an image
                resp = "Upload failed! File is not an image!";
            }
            else if (System.IO.File.Exists(Server.MapPath("uploads//" + name)))
            {
                // check if file already exists.
                resp = "Upload failed! File already exists!";
            }
            else if (!(name.ToLowerInvariant().EndsWith(".jpg") || name.ToLowerInvariant().EndsWith(".gif") ||
                name.ToLowerInvariant().EndsWith(".bmp") || name.ToLowerInvariant().EndsWith(".jpeg") ||
                name.ToLowerInvariant().EndsWith(".png")))
            {
                // check if file extension is allowed
                resp = "Upload failed! Only .gif .jpg .jpeg .png and .bmp are allowed!";
            }
            else
            {
                byte[] binaryWriteArray = new
                byte[file.InputStream.Length];
                file.InputStream.Read(binaryWriteArray, 0,
                (int)file.InputStream.Length);
                FileStream objfilestream = new FileStream(Server.MapPath("uploads//" + name),
                    FileMode.Create, FileAccess.ReadWrite);
                objfilestream.Write(binaryWriteArray, 0,
                binaryWriteArray.Length);
                objfilestream.Close();
                resp = "File was uploaded successfully";
            }
            JavaScriptSerializer js = new JavaScriptSerializer();
            string strJSON = js.Serialize(resp);
            this.Context.Response.ContentType = "text/html; charset=utf-8";
            this.Context.Response.Write(strJSON);
        }

This page will be responsible for the post requests sent by our client page. It is configured to accept image mime types, and only with extensions .jpg, .jpeg, .bmp, .png and .gif. It works for single and multiple uploads since jqxFileUpload sends the files one by one. Note: You need to create a folder named "uploads" inside the project directory to store the uploaded files.


Now let's add an example.htm file to our project to test the page with the following code.
Note: The uploadUrl parameter must point to the WebService file and the UploadFile method we created above. 
<!DOCTYPE html>
<html lang="en">
<head>
        <title id="Description">jqxFileUpload with asp web-service example</title>
    <link type="text/css" rel="Stylesheet" href="scripts/styles/jqx.base.css" />
    <script type="text/javascript" src="scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="scripts/jqxcore.js"></script>
    <script type="text/javascript" src="scripts/jqxbuttons.js"></script>
    <script type="text/javascript" src="scripts/jqxfileupload.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#jqxFileUpload').jqxFileUpload({
                width: 300,
                accept: 'image/*',
                uploadUrl: '/FileUpload.asmx/UploadFile',
                fileInputName: 'fileToUpload'
            });
            $('#jqxFileUpload').on('uploadEnd', function (event) {
                var args = event.args;
                var fileName = args.file;
                var serverResponse = args.response;
                // Your code here.
                console.log(args);
                console.log(fileName);
                console.log(serverResponse);
            });
        });
    </script>
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2FX5PV9DNT"></script><script>window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', 'G-2FX5PV9DNT');</script></head>
<body>     
    <div id="jqxFileUpload">
    </div>
    <br />
</body>
</html>

While having the example.htm file active in the solution explorer press F5 in Visual Studio to run and test your project.