I'm trying to create a web page with form fields and a WebUpload control.. It's a support forum kind of thing that allows the user to enter details and add files as attachments.
A few questions..
If you select a few files to attach and then do something else on the page that causes a postback, the WebUpload control loses its contents and reverts back to original state.. is there a way of retaining the content ?
How can I use one button on the page to do a postback and have it upload the files at that time, not as a separate operation.. the files are going into the DB.
Hello Adrian,
You can bind to submit event of your form and prevent the submitting. At that point you can access current status of the file upload - $("#WebUpload2").igUpload("getFileInfoData"); and store those files, once that's done you could invoke submit method of the form manually.
Here's what I did in order to upload all my pending files:
$("#form1").submit(function (e) { e.preventDefault(); var that = this; var fileInfoData = $("#WebUpload2").igUpload("getFileInfoData"); fileInfoData.filesInfo.forEach(function (file) { $("#WebUpload2").igUpload("startUpload", file.formNumber); }); setTimeout(function () { that.submit(); }, 0); });
Please let me know if this helps, or you need more details.
Hi Deyan,
I managed to fix my js, but have found a problem.. might be a bug..
<script type="text/javascript"> var _Key = ""; function WebUpload1_OnFormDataSubmit(e, args) { $(e.target).igUpload("addDataField", args.formData, { "name": "myID", "value": _Key }); } $("#MainForm").submit( function (e) { e.preventDefault(); var Dat = JSON.stringify({ Name: $("#MainContent_txtName").val() }); _Key = "unset"; $.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', dataType: 'json', url: '/Msg.asmx/Add', data: Dat, success: function (json) { if (!$.isEmptyObject(json)) { json = $.parseJSON(json.d); _Key = json.result; } }, error: function (xhr, status, err) { _KeyID = "ErrorFromService"; }, async: false }); var that = this; var UP = $("#MainContent_WebUpload1"); var fileInfoData = UP.igUpload("getFileInfoData"); fileInfoData.filesInfo.forEach(function (file) { console.log("File Name:" + file.file.name + " formNumber:" + file.formNumber); UP.igUpload("startUpload", file.formNumber); }); setTimeout(function () { that.submit(); }, 0); } ) </script>
The problem comes when it hits the code to do the start upload for each file.. the formNumber is 0 for all files, so it only uploads the first one.
Do you think I could just use a counter and increment it each loop and use that ?
I cannot be sure why the formNumbers for each file is the same and I don't think that is expected.
It would really help our investigations, If you could provide small isolated project to demonstrate this. On my sample formNumbers are with different values for the different uploads.
Also for your case if you need to wait for those success or error handlers from your ajax request, you should do the submitting of the form there. Meaning you should remove the setTimeout and submit into your success/error handler:
$("#MainForm").submit( function (e) { e.preventDefault(); var Dat = JSON.stringify({ Name: $("#MainContent_txtName").val() }); _Key = "unset"; var that = this; $.ajax({ type: 'POST', contentType: 'application/json; charset=utf-8', dataType: 'json', url: '/Msg.asmx/Add', data: Dat, success: function (json) { if (!$.isEmptyObject(json)) { json = $.parseJSON(json.d); _Key = json.result; } that.submit(); }, error: function (xhr, status, err) { _KeyID = "ErrorFromService"; }, async: false }); var UP = $("#MainContent_WebUpload1"); var fileInfoData = UP.igUpload("getFileInfoData"); fileInfoData.filesInfo.forEach(function (file) { console.log("File Name:" + file.file.name + " formNumber:" + file.formNumber); UP.igUpload("startUpload", file.formNumber); }); } )
How can I upload the project.. doesn't seem to be an option.
Can you modify the following website to demonstrate your scenario and send it back for investigation?WebUpload.zip
I still don't see an option to attach a file, but I managed to break your project..
Here's what I did..
Changed the web config as follows... (infrag 19.2 and framework 4.5)
<system.web> <compilation debug="true" targetFramework="4.5"> <assemblies> <add assembly="Infragistics45.Web.jQuery.v19.2, Version=19.2.20192.17, Culture=neutral, PublicKeyToken=7DD5C3163F2CD0CB" /> <add assembly="System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/> <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/> </assemblies> </compilation> <httpRuntime targetFramework="4.5" /> <pages> <controls> <add tagPrefix="ajaxToolkit" assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" /> <add assembly="Infragistics45.Web.jQuery.v19.2" namespace="Infragistics.Web.UI.EditorControls" tagPrefix="ig" /> </controls> </pages> </system.web>
changed default.aspx to remove the prefix registration from the top (now in web.config) and changed the fileupload control to add MultipleFiles="true".
Then I just added a console.log in the js to show the formNumbers.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!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></title> <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" /> <link href="http://cdn-na.infragistics.com/jquery/20132/latest/css/structure/infragistics.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js" type="text/javascript"></script> <script src="infragistics.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { $("#form1").submit(function (e) { e.preventDefault(); var that = this; var fileInfoData = $("#WebUpload2").igUpload("getFileInfoData"); fileInfoData.filesInfo.forEach(function (file) { console.log("formNumber: " + file.formNumber); $("#WebUpload2").igUpload("startUpload", file.formNumber); }); setTimeout(function () { that.submit(); }, 0); }); }); </script> </head> <body> <form id="form1" runat="server" > <div> </div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ig:WebUpload ID="WebUpload2" runat="server" Mode="Multiple" MultipleFiles="true" > </ig:WebUpload> <input id="Submit1" type="submit" value="submit"/> </form> </body> </html>
Select two files to upload and the formNumbers are 0 for both.
Here's how to insert a file in your post