jQuery UI Widgets Forums Editors FileUpload How to use jqxFileUpload in ASP.NET

This topic contains 10 replies, has 8 voices, and was last updated by  arkgroup 7 years, 9 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • How to use jqxFileUpload in ASP.NET #66869

    JOlmos
    Participant

    I am looking for an example on how to use the jqxFileUpload widget with ASP.NET. I want to know how to make the call to upload the file in the code behind (VB.net). In other words, how do I call the procedure that will handle the upload.

    How to use jqxFileUpload in ASP.NET #66897

    Peter Stoev
    Keymaster

    Hi JOlmos,

    You can use jqxFileUpload in ASP .NET in the same way you use any other widget in ASP .NET. For more information about that, you can see our online demos about .NET and the documentation page. The Server Side however, i.e how you handle the upload process in the server i.e what the fileupload submits to your uploadURL should be handled with custom code by you. We don’t have example for this.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    How to use jqxFileUpload in ASP.NET #66953

    sindc
    Participant

    Hi Peter,

    Can I use jqxFileUplad in jqxGrid, User should be able to store images for each row.

    Thanks,
    SindC

    How to use jqxFileUpload in ASP.NET #66971

    Peter Stoev
    Keymaster

    Hi SindC,

    Widgets within jqxGrid cannot be used.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    How to use jqxFileUpload in ASP.NET #67030

    humpagm
    Participant

    Hi JOlmos,

    I was also having a similar problem getting the code-behind for VB.NET. What I used was a generic handler to do the post back to the server. Here is my code:

    <%@ WebHandler Language=”VB” Class=”AjaxFileUploaderHandler” %>

    Imports System
    Imports System.Web
    Imports System.Collections.Generic
    Imports System.Linq
    Imports System.IO
    Imports System.Web.Configuration
    Imports System.Data
    Imports System.Data.SqlClient
    Imports System.Object
    Imports System.Windows.Input.Cursor

    Public Class AjaxFileUploaderHandler : Implements IHttpHandler

    Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
    ‘// VB code automatically entered when class was created
    ‘context.Response.ContentType = “text/plain”
    ‘context.Response.Write(“Hello World”)

    Dim ws As New WebService
    Dim File As HttpPostedFile = Nothing
    Dim sType As String = “”
    Dim bSuccess As Boolean = False

    Try

    If context.Request.Files.Count > 0 Then

    File = context.Request.Files(0)
    ws = New WebService

    bSuccess = ws.SaveAttachment(File)

    End If

    Catch ex As Exception

    Finally
    If Not IsNothing(ws) Then ws.Dispose()
    ws = Nothing
    File = Nothing
    End Try
    End Sub

    Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
    Get
    Return True
    End Get
    End Property

    End Class

    This does work for me, but I am having an issue where when I click on the browse button, the control does a post back. I’m not entirely sure what the problem is, but I thought I’d share what I did and hope that it helps.

    How to use jqxFileUpload in ASP.NET #67115

    anubis76
    Participant

    Hi guys. Well, thanks for all the useful code. Here is an example of using jqxFileUpload with ASP.NET in C#.

    First create a WebService asmx. For this example, It’s called UploadFiles.asmx and the WebMethod is called Upload().
    Do note that in my web application I am setting an ID for each user, and storing it in a session variable. I wanted to create a folder for individual users, based on that ID, and upload their own files there:

    Client Code:
    (JQuery)

     $("#jqxFileUpload").jqxFileUpload({ browseTemplate: 'success',
            uploadTemplate: 'primary',
            cancelTemplate: 'danger',
            width: 300,
            uploadUrl: 'UploadFiles.asmx/Upload',
            fileInputName: 'fileToUpload'
     });
    
     $('#jqxFileUpload').on('uploadEnd', function (event) {
         var args = event.args;
         var fileName = args.file;
         var serverResponse = args.response;
    
         $("#spnResponse").html(serverResponse);
     });

    (HTML)

    <div id="jqxFileUpload"></div><br /><br />
    <span id="spnResponse"></span>

    Server-Side Code:
    (UploadFiles.asmx)
    <%@ WebService Language=”C#” CodeBehind=”~/App_Code/UploadFiles.cs” Class=”UploadFiles” %>

    (UploadFiles.cs)

    ....
    using System.IO;
    
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
    
    [System.Web.Script.Services.ScriptService]
    public class UploadFiles : System.Web.Services.WebService {
    
        public UploadFiles () {
    
            //Uncomment the following line if using designed components 
            //InitializeComponent(); 
        }
    
        [WebMethod(EnableSession = true)]
        public string Upload() {
            string appid = HttpContext.Current.Session["appid"].ToString();
            string returnTxt;
            
            if (!System.IO.Directory.Exists(Server.MapPath(@"~/uploads/" + appid)))
            {
                System.IO.Directory.CreateDirectory(Server.MapPath(@"~/uploads/" + appid));
            }
    
            string filepath = Server.MapPath("~/uploads/" + appid);
            HttpFileCollection uploadedFiles = HttpContext.Current.Request.Files;
            returnTxt = string.Empty;
    
            for (int i = 0; i < uploadedFiles.Count; i++)
            {
                HttpPostedFile userPostedFile = uploadedFiles[i];
    
                try
                {
                    if (userPostedFile.ContentLength > 0)
                    {
                        returnTxt += "<u>File #" + (i + 1) + "</u><br>";
                        returnTxt += "File Content Type: " + userPostedFile.ContentType + "<br>";
                        returnTxt += "File Size: " + userPostedFile.ContentLength + "kb<br>";
                        returnTxt += "File Name: " + userPostedFile.FileName + "<br>";
    
                        userPostedFile.SaveAs(filepath + "\\" + Path.GetFileName(userPostedFile.FileName));
                        returnTxt += "Location where saved: " + filepath + "\\" + Path.GetFileName(userPostedFile.FileName) + "<p>";
                    }
                }
                catch (Exception Ex)
                {
                    returnTxt += "Error: <br>" + Ex.Message;
                }
            }
    
            return returnTxt;
        }
        
    }

    Hope this is useful for somebody.

    Regards,
    AJ

    How to use jqxFileUpload in ASP.NET #68069

    anubis76
    Participant

    Hi,

    Just thought I would add a short note for both .NET users as well as PHP users sending data to a .NET Web Service.

    Not all hosting providers have ASP.NET Session State enabled. If this is the case, the above code that relies on Session variables will not work. Also, since the FileUpload method given above does not seem to use an AJAX method to send data, we can send data using a QueryString within the URL.

    $("#jqxFileUpload").jqxFileUpload({ browseTemplate: 'success',
            uploadTemplate: 'primary',
            cancelTemplate: 'danger',
            width: 300,
            uploadUrl: 'UploadFiles.asmx/Upload?appid=' + appID,
            fileInputName: 'fileToUpload'
     });

    appID is a global variable set elsewhere. The URL sends the appid as a parameter and in the webservice, change the method to:

    [WebMethod]
    [ScriptMethod(UseHttpGet = true)]
        public string Upload() {
            //string appid = HttpContext.Current.Session["appid"].ToString();
              string appID = HttpContext.Current.Request.QueryString.Get("appid");
    .......
        }
    

    And lastly (and most importantly), add the following to your web.config (within the <system.web> section)

    <webServices>
        <protocols>
            <add name="HttpGet"/>
            <add name="HttpPost"/>
        </protocols>
          
    </webServices>
    

    @humpagm: Place the <div id=’jqxUpload’> tags outside the <form> and it won’t auto-postback.

    Cheers, and thanks to the jqWidgets team for yet another great component 🙂
    /AJ

    How to use jqxFileUpload in ASP.NET #68089

    MABROUK
    Participant

    Hello,

    but if i can’t put it outside of the <form> how can i turn this !
    thanks

    How to use jqxFileUpload in ASP.NET #84908

    eliteproxy
    Participant

    I am having the same problem with the ASP page posting back as soon as the file is selected (or the file select dialog disappears).

    How to use jqxFileUpload in ASP.NET #90977

    arkgroup
    Participant

    I follow this code, but on uploadEnd event response is undefined.
    Can someone help?

    Thanks

    How to use jqxFileUpload in ASP.NET #91046

    arkgroup
    Participant

    Figure out. Does not work for localhost, ok from other web server.

    Thanks

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.