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); }); } )
Yes, I see. You should go with the counter method.
Please let me know if you have more questions on that matter.
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.
ok will give it a go when I can get the application running again... visual studio 2019 just updated, now the site doesn't run.. gets an error iInfragistics.Web.UI.Framework.ImportManager.GetDTE(System.IServiceProvider) and wants the PBD.. no clue what to do about that.
Infragistics45.Web.jQuery.v19.2.dll!Infragistics.Web.UI.Framework.ImportManager.GetDTE(System.IServiceProvider provider)Infragistics45.Web.jQuery.v19.2.dll!Infragistics.Web.UI.Framework.ImportManager.GetActiveProjectPath(System.IServiceProvider provider)Infragistics45.Web.jQuery.v19.2.dll!Infragistics.Web.UI.Framework.ImportManager.getConfigFilePath(System.IServiceProvider provider, string webConfigName)Infragistics45.Web.jQuery.v19.2.dll!Infragistics.Web.UI.Framework.ImportManager.Initialize(System.Web.UI.Control control, bool internalCall)Infragistics45.Web.jQuery.v19.2.dll!Infragistics.Web.UI.Framework.ClientControlMain.OnInit(System.EventArgs e)Infragistics45.Web.jQuery.v19.2.dll!Infragistics.Web.UI.EditorControls.WebUpload.OnInit(System.EventArgs e)System.Web.dll!System.Web.UI.Control.InitRecursive(System.Web.UI.Control namingContainer)System.Web.dll!System.Web.UI.Control.InitRecursive(System.Web.UI.Control namingContainer)System.Web.dll!System.Web.UI.Control.InitRecursive(System.Web.UI.Control namingContainer)System.Web.dll!System.Web.UI.Control.InitRecursive(System.Web.UI.Control namingContainer)System.Web.dll!System.Web.UI.Control.InitRecursive(System.Web.UI.Control namingContainer)System.Web.dll!System.Web.UI.Control.InitRecursive(System.Web.UI.Control namingContainer)System.Web.dll!System.Web.UI.Control.InitRecursive(System.Web.UI.Control namingContainer)System.Web.dll!System.Web.UI.Page.ProcessRequestMain(bool includeStagesBeforeAsyncPoint, bool includeStagesAfterAsyncPoint)System.Web.dll!System.Web.UI.Page.ProcessRequest(bool includeStagesBeforeAsyncPoint, bool includeStagesAfterAsyncPoint)System.Web.dll!System.Web.UI.Page.ProcessRequest()System.Web.dll!System.Web.UI.Page.ProcessRequestWithNoAssert(System.Web.HttpContext context)System.Web.dll!System.Web.UI.Page.ProcessRequest(System.Web.HttpContext context)App_Web_0huiuvj2.dll!ASP.default_aspx.ProcessRequest(System.Web.HttpContext context)System.Web.dll!System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()System.Web.dll!System.Web.HttpApplication.ExecuteStepImpl(System.Web.HttpApplication.IExecutionStep step)System.Web.dll!System.Web.HttpApplication.ExecuteStep(System.Web.HttpApplication.IExecutionStep step, ref bool completedSynchronously)System.Web.dll!System.Web.HttpApplication.PipelineStepManager.ResumeSteps(System.Exception error)System.Web.dll!System.Web.HttpApplication.BeginProcessRequestNotification(System.Web.HttpContext context, System.AsyncCallback cb)System.Web.dll!System.Web.HttpRuntime.ProcessRequestNotificationPrivate(System.Web.Hosting.IIS7WorkerRequest wr, System.Web.HttpContext context)System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotificationHelper(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotification(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)[Native to Managed Transition][Managed to Native Transition]System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotificationHelper(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotification(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)[Native to Managed Transition][Managed to Native Transition]System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotificationHelper(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotification(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)[Native to Managed Transition][Managed to Native Transition]System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotificationHelper(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)System.Web.dll!System.Web.Hosting.PipelineRuntime.ProcessRequestNotification(System.IntPtr rootedObjectsPointer, System.IntPtr nativeRequestContext, System.IntPtr moduleData, int flags)[AppDomain Transition]
as an image or video ? who'da thunk it
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.