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 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
Okay, so you are selecting multiple files and sending them to the upload, where I was adding them one by one. For this scenario you could check the batch property in fileInfoData, you can find the uploading ids there too. But they are incrementing so your fix should be fine too.
I can run the app with CTRL-F5 to not debug and then use the browser debugger to look at the javascript.. the fileinfodata shows both batch formNumers as 0 still, so I will have to just use the counter method.
Yes, I see. You should go with the counter method.
Please let me know if you have more questions on that matter.