Update Client Image After Uploading With AsyncFileUpload Control In AjaxControlToolkit?
Sep 23, 2010
I am uploading an image with AsyncFileUpload, it works well, but i want to show to the user the image which him just uploaded, but i am having troubles to make that work.I have tried the OnClientUploadComplete event which receive sender and args paramenters, but the second paramenter only have the file name (without relative url), lenght, but not the file name after saved on the server.I also tried ScriptManager.RegisterClientScriptBlock and call my own function in order to pass the url, but for some reason i can't select the img control with jquery, seems like that peace of code is executing in another instance of the page... not sure.
I have a project that for political reasons cannot be moved to a later version of .Net and would love to have a drop-in control for uploading files better than the old FileUpload control.
I'd like to use the AsyncFileUpload control, but it's not in the latest version of the toolkit that is supported in the 2.0 framework.
I've looked at some of the flash based controls, but integrating them would trigger a full regression test of the project I'm on (multiple weeks).
We've lived with the FileUpload control because our files are small, but the error handling when a file gets larger won't be unacceptable much longer.
I just found Uploadify. At first I didn't think it would work, but I checked out the forums any way. I found this link [URL] It works great. I can do whatever I want to in the upload handler.
I Used AsyncFileUpload(one of Ajac Control Toolkit Controls) to Uploading User's Image. this works well. But i want to change the image url of an image contorl to uploaded image url. how can i perform that? I put Image control in a Update Panel:
[Code]....
in C# code I wrote these:
[Code]....
But it does not work. Image is like Previous. Note that ImageOperations.ResizeFromStream() method resizes and saves the image to a specefic folder. actually I should trigger a Postback to Update the Update Panel but How to do that. I usedUpdatePanelNew.Update(); but it does not work!
The javascript functions just block / release a submit button, to prevent problems during uploads.This works fine on localhost, but when deployed online on a GoDaddy server, I can't seem to upload files over a few KB, even when locally I could upload bigger files (~2MB)...I can't seem to find the reason for this behavior, could it be on the IIS? I read something about the app pool clearing before the upload could complete, could this be happening?
Btw, just in case, server-side I just take the picture out of this control
There's some extra logic in there about whether I'm in edit mode or not, and if the current record has a picture, I'll take that over no picture, And then I store it on the database.
I have a problem about image control. I am using VS2005 in Vista and suddenly uploading and retrieving image to a image control doest not work. I am working with this in Windows XP and all goes fine. After transfering it to vista, I can't upload and retrieve an image stored in the File System. My codes are all the same.
My problem is that it didn't insert image name in database it save some unknown Characters in database. So when I want bind my image from database it didn't show image .
I have a Web application in which I'm trying to use the new AJAX AsyncFileUpload control. I want to use it in the ModalPopupExtender, and I want to embed these two AJAX controls in a user control (photo_upload.ascx) for re-use in different parts of the application. (I understand that this wasn't possible with the older FileUpload control but that it is with this most recent AJAX tool.)
Presently, I merely redirect the user to an upload.aspx page that includes the photo_upload.ascx control (see the sequential screenshots in the attached image); but while this way of doing things "works," it becomes very confusing for the user who has already clicked an upload button or two. In other words, when the "Add Yours" button is clicked, the panel with the "(1) Upload Photo" button unhides; and when the Upload Photo button is then clicked, the user is redirected to the control in the bottom screen. I would gladly bypass the 1, 2, 3 steps in the second screen after the "Add Yours" button is clicked and redirect straightway to the upload control (in the bottom screen, which I will like to be in a ModalPopupExtender), but I also need a way for them to enter a caption that will go with the uploaded photo.
(image removed)
My VB code for the above steps is included below. I would appreciate any fresh ideas on how to accomplish my above objectives.
I have added AsyncFileUpload to creata user wizard control. When I tried to upload the file this control seemed to work fine an show confirmation at the end. But when I checked the website no file has been uploaded at all.know why its not uploading the files/images
[Code]....
[Code]....
My folder hierarchy is Users/Resources/Avatars/UsernameThere is also an error appears for this line of code- Error: CS0176:Member'System.Web.UI.ScriptManager.RegisterClientScriptBlock(System.Web.UI.Control, System.Type, string, string, bool)' cannot be accessed with an instance reference; qualify it with a type name instead
this is my compelete code for validation type and display image with AsyncFileUplaodI'd like to upload only png, jpg, gifI can upload Image and have its preview successfullyand when try to upload another type It prevents and fortunately I can see this message"Upload a valid file with extension png, jpg, gif."but UnfortunatelyIt shows a message box with this errotUnhandled Exception: this._innerTB is null what's my mistake?
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Validation in AsyncFileUpload Example</title>
I'm using the ajax asyncfileupload plugin to upload files to my server and it works fine for the first file upload but if I try to upload another file before refreshing it throws the exception "Unhandled Exception: $common is undefined".
If I add 'location.reload()' to my UploadComplete javascript method it fixes it but obviously this isn't ideal. Does anyone know how to fix this?
I'm using the asyncfileupload control, and have it woking to an extent. I'm able to upload the image to the relevant directory and save it's path to the database.The problem I'm having is that I am unable to upload a 2nd file once the first has completed without refreshing the page.
I have looked at various options for uploading files asynchronously in ASP.NET. the default Microsoft control does full postback, AsyncFileUpload control has only one button and cannot change the text and appearance and I need two buttons browse and upload. not interested in flash based controls. I found this
html close to what I need. it uses iframe to achieve this, but I would like a simplified version of this. I just want to display an image while uploading, I don't need number of bytes transferred etc. how can I achieve this? I just need to upload the file asynchronously without page flickering and save the file to the server and update the page contents after the upload is complete.
i am working on an ecommerce application, user will be uploading several images of a product, instead of stripping the size (i.e the KB or MB size) after uploading it on the server, i want to strip the size of image before uploading it to the server ( bringing the size from any thing over 30KB down to 30KB) i.e on the client machine itself and then upload it to the server. i understand that this requires a download on the client machine which makes me ask the following questions :
a. can i use a java control in dotnet since java control can be used on all OSes b. is there any dotnet control that might be userfriendly to all OSes
I'm trying to use the AsyncFileUpload control from the Asp.net Ajax Control Toolkit (Sept 30, 2009 stable build: 30930) . I've created a demo application and the control works fine. Files upload and all is well. When I try to use the control in my real application, I'm always receiving an error stating "The file attached is invalid". The AsyncFileUpload control returns this when the file uploaded is null.
To isolate the problem, I created a new master page exactly like the master page in my demo app. I also created an aspx page exactly like the page in my demo app. The upload still fails with a "The file attached is invalid" error. I also compared the web.config for the real app and the demo app and couldn't identify any differences that should matter. The code below is the test code in my real app. This code is exactly the same as the functioning code in the demo app with the exception of having different class names and file names. The web.config listed below is from the real app with the appsettings and connectionstrings removed. Real App Test Master Page:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="aaaMasterPage.master.cs" Inherits="L1Admin.aaaMasterPage" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Untitled Page</title> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="scriptManager" EnablePartialRendering="true" runat="server" AsyncPostBackTimeout="180" /> <div> <asp:ContentPlaceHolder id="content" runat="server"> </asp:ContentPlaceHolder> </div> </form> </body> </html> Test Page: <%@ Page Language="C#" MasterPageFile="~/aaaMasterPage.master" AutoEventWireup="true" CodeFile="aaaFileUploadTest2.aspx.cs" Inherits="aaaFileUploadTest2" Title="Untitled Page" %> <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <script type="text/javascript"> function pageLoad(sender, args) { } function startUpload(sender,args) { $('#uploadMessage p').html(); $('#uploadMessage').hide(); } function uploadComplete(sender,args) { showUploadMessage(args.get_fileName() + " uploaded succesfully - " + + args.get_length() + " bytes", ''); } function uploadError(sender, args) { showUploadMessage("An error occurred during uploading. " + args.get_errorMessage(), '#ff0000'); } function showUploadMessage(text, color) { $('#uploadMessage p').html(text).css('color', color); $('#uploadMessage').show(); } </script> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="content" Runat="Server"> <div id="uploadMessage"><p></p></div> <ajax:AsyncFileUpload ID="pageBannerUpload" CssClass="file_upload" OnClientUploadError="uploadError" OnClientUploadStarted="startUpload" OnClientUploadComplete="uploadComplete" onuploadedcomplete="upload_UploadedComplete" runat="server" /> </asp:Content> Real App Test Page Code Behind: using System; using System.IO; using System.Collections; using System.Configuration; using System.Data; using System.Linq; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.HtmlControls; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Xml.Linq; public partial class aaaFileUploadTest2 : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void upload_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e) { if (pageBannerUpload.HasFile) { string path = MapPath("~/") + Path.GetFileName(e.filename); pageBannerUpload.SaveAs(path); } } } Real App Test Web.config: <?xml version="1.0"?> <!-- Note: As an alternative to hand editing this file you can use the web admin tool to configure settings for your application. Use the Website->Asp.Net Configuration option in Visual Studio. A full list of settings and comments can be found in machine.config.comments usually located in WindowsMicrosoft.NetFrameworkv2.xConfig --> <configuration> <configSections> <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/> <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"> <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere"/> <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/> <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/> <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/> </sectionGroup> </sectionGroup> </sectionGroup> </configSections> <appSettings> </appSettings> <connectionStrings> </connectionStrings> <system.web> <!-- Set compilation debug="true" to insert debugging symbols into the compiled page. Because this affects performance, set this value to true only during development. --> <compilation debug="true"> <assemblies> <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> <add assembly="System.Transactions, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> <add assembly="System.Data.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> </assemblies> <codeSubDirectories> <add directoryName="CSCode"/> <add directoryName="VBCode"/> </codeSubDirectories> </compilation> <!-- The <authentication> section enables configuration of the security authentication mode used by ASP.NET to identify an incoming user. --> <authentication mode="Windows"/> <!-- The <customErrors> section enables configuration of what to do if/when an unhandled error occurs during the execution of a request. Specifically, it enables developers to configure html error pages to be displayed in place of a error stack trace. <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm"> <error statusCode="403" redirect="NoAccess.htm" /> <error statusCode="404" redirect="FileNotFound.htm" /> </customErrors> --> <pages> <controls> <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add tagPrefix="Annsa" namespace="Annsa.Controls" assembly="Annsa.Controls"/> </controls> <namespaces> <add namespace="Microsoft.VisualBasic"/> <add namespace="System.Data"/> <add namespace="System.Drawing"/> </namespaces> </pages> <httpHandlers> <remove verb="*" path="*.asmx"/> <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add verb="GET,HEAD" path="ScriptResource.axd" validate="false" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </httpHandlers> <httpModules> <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </httpModules> <identity impersonate="true"/> <trace enabled="false" requestLimit="10" pageOutput="false" traceMode="SortByTime" localOnly="true"/> <!-- SESSION STATE SETTINGS mode="Off|InProc|StateServer|SqlServer" By default ASP.NET uses cookies to identify which requests belong to a particular session. If cookies are not available, a session can be tracked by adding a session identifier to the URL. To disable cookies, set sessionState cookieless="true". --> <sessionState mode="InProc" stateConnectionString="tcpip=127.0.0.1:42424" sqlConnectionString="data source=127.0.0.1;user id=sa;password=" cookieless="false" timeout="20"/> <!-- GLOBALIZATION This section sets the globalization settings of the application. --> <xhtmlConformance mode="Legacy"/> </system.web> <location path="Pages"> <system.web> <xhtmlConformance mode="Transitional"></xhtmlConformance> </system.web> </location> <system.codedom> <compilers> <compiler language="c#;cs;csharp" extension=".cs" type="Microsoft.CSharp.CSharpCodeProvider,System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" warningLevel="4"> <providerOption name="CompilerVersion" value="v3.5"/> <providerOption name="WarnAsError" value="false"/> </compiler> <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" warningLevel="4"> <providerOption name="CompilerVersion" value="v3.5"/> <providerOption name="OptionInfer" value="true"/> <providerOption name="WarnAsError" value="false"/> </compiler> </compilers> </system.codedom> <system.webServer> <validation validateIntegratedModeConfiguration="false"/> <modules> <remove name="ScriptModule"/> <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </modules> <handlers> <remove name="WebServiceHandlerFactory-Integrated"/> <remove name="ScriptHandlerFactory"/> <remove name="ScriptHandlerFactoryAppServices"/> <remove name="ScriptResource"/> <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> <add name="ScriptResource" verb="GET,HEAD" path="ScriptResource.axd" preCondition="integratedMode" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/> </handlers> </system.webServer> <runtime> <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1"> <dependentAssembly> <assemblyIdentity name="System.Web.Extensions" publicKeyToken="31bf3856ad364e35"/> <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/> </dependentAssembly> <dependentAssembly> <assemblyIdentity name="System.Web.Extensions.Design" publicKeyToken="31bf3856ad364e35"/> <bindingRedirect oldVersion="1.0.0.0-1.1.0.0" newVersion="3.5.0.0"/> </dependentAssembly> </assemblyBinding> </runtime> </configuration>
Usual javascript files can be cached on a client-side if web server sets the expiration. If user has once downloaded it, it will be cached by his browser.And what about AjaxControlToolkit ToolkitScriptManager? Are combined JS files cached on a client? How can expiration time be managed?
I would like to call the click event of the the AsyncFileUpload control programmatically, is it possible? I tried to call the click event, but it is not working. actually I don't like the appearance of the upload, so I am trying to hide the AsyncFileUpload control, assign the file name and click it programmatically.
I'm also trying to implement a custom button on the toolbar, and have it working, sort of. I took the sample code and modified it so I only insert one button, to insert an image from a list in a database. I renamed the class from the original to CustomHTMLEditor and removed a few of the properties and methods I won't be needing. All this works 99%. The control is shown in the design and in my web page and the inserting of the image all works 100%, but there is an error in the designer : Unknown server tag 'customEditors:CustomHTMLEditor'.
Because of this, I cannot reference the control in code at all and thus not get the Content when the page is posted back.
Dim path As String = Server.MapPath("~/temp/test.tmp") AsyncFileUpload2.SaveAs(path)
In my AsyncFileUpload2 object the filename is nothing. I can't seem to get a refernce to the file that is supposed to be uploaded.
-Nate UPDATE I've added Private Sub AsyncFileUpload1_UploadedComplete(ByVal sender As Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs) Handles AsyncFileUpload1.UploadedComplete If e.state = AjaxControlToolkit.AsyncFileUploadState.Success Then '....' Else showErrorMessage(e) End If End Sub
I can't hit a break point at the "if" statement after I choose a file. I guess there is something wrong on my page with how ajax is working? Not sure what it is though. I was displaying the ajax upload box via a radio button with a visible=true/false div. The answer told me that the control has to be there the page loads. I took away the div and everything worked! I will now do the show/hide through jquery (which I should have done in the first place).
My file based ASP.Net 3.5 website was working fine. For the pastcouple of days I am getting the following error.Unable to update auto-refresh reference 'ajaxcontroltoolkit.dll" Cannot findassembly c:Program filesMicrosoft ASP.NetAjax LibraryWebformsReleaseAjaxControlToolKit.dll.Project : c:mis.My ASP.Net 3.5 website root folder is c:mis. I browsed to subfolder Bin and looked atBinAjaxControlToolkit.dllAjaxControlToolKit.dll.refresh. The following was the reference...Program FilesMicrosoft ASP.NET Ajax LibraryWebFormsReleaseAjaxControlToolkit.dll
uploading multiple files from client to server with asp.net.I have been looking at the asp.net upload control but that is for one file (unless someone knows a better way to do it).
For what I want to do I don't even really need a browse. I know the files off of the client are at a certain location. Is it possible to create a collection of *HttpPostedFile*s and upload those?
I don't think it is possible but would be glad to be proven wrong. Is there a different asp.net method or control that will easily allow uploading multiple files from client to server?
