jQuery UI Widgets › Forums › Editors › FileUpload › How to use jqxFileUpload in ASP.NET
Tagged: asp.net, jqxFileUpload
This topic contains 10 replies, has 8 voices, and was last updated by arkgroup 7 years, 9 months ago.
-
Author
-
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.
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 StoevjQWidgets Team
http://www.jqwidgets.comHi Peter,
Can I use jqxFileUplad in jqxGrid, User should be able to store images for each row.
Thanks,
SindCHi SindC,
Widgets within jqxGrid cannot be used.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi 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.CursorPublic 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 = FalseTry
If context.Request.Files.Count > 0 Then
File = context.Request.Files(0)
ws = New WebServicebSuccess = ws.SaveAttachment(File)
End If
Catch ex As Exception
Finally
If Not IsNothing(ws) Then ws.Dispose()
ws = Nothing
File = Nothing
End Try
End SubPublic ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
Get
Return True
End Get
End PropertyEnd 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.
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,
AJHi,
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 🙂
/AJHello,
but if i can’t put it outside of the <form> how can i turn this !
thanksI am having the same problem with the ASP page posting back as soon as the file is selected (or the file select dialog disappears).
I follow this code, but on uploadEnd event response is undefined.
Can someone help?Thanks
Figure out. Does not work for localhost, ok from other web server.
Thanks
-
AuthorPosts
You must be logged in to reply to this topic.