Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
1470
igUpload: e.AdditionalDataFields is always NULL
posted

Ran across this issue: https://github.com/IgniteUI/ignite-ui/issues/2134#issue-938844956 and wondering if this issue affects the MVC helper as well?

With the file upload, I need to capture user input that is associated with the file.  I have looked at https://www.igniteui.com/help/igupload-using-server-side-events,  I have had no luck with passing the data, even the static text from the example does not come acorss.

I have the following in Application_Start()

Dim controlId As String = "igUploadProjectDocTypes"
        UploadProgressManager.Instance.AddStartingUploadEventHandler(controlId, AddressOf Controllers.ProjectDocumentsController.igUpload_UploadStarting)
        UploadProgressManager.Instance.AddFinishedUploadEventHandler(controlId, AddressOf Controllers.ProjectDocumentsController.igUpload_UploadFinished)

And both events are being called (breakpoints are hit)

Public Shared Sub igUpload_UploadStarting(sender As Object, e As UploadStartingEventArgs)
Public Shared Sub igUpload_UploadFinished(sender As Object, e As UploadFinishedEventArgs)



@(Html.Infragistics.Upload() _
                   .ID("igUploadProject") _
                   .Mode(UploadMode.Multiple) _
                   .MultipleFiles(True) _
                   .AutoStartUpload(False) _
                   .ProgressUrl(Url.Content("~/IGUploadStatusHandler.ashx")) _
                   .ControlId("igUploadProjectDocTypes") _
                   .Render()
       )

The alert for with `JQuery` does execute.
<script type="text/javascript">
    $(function () {
        alert('jQuery');
 
        $("#igUploadProject").on("iguploadonformdatasubmit"function (evt, ui) {
            alert('on(iguploadonformdatasubmit)');
            $("#igUploadProject").igUpload("addDataField", ui.formData, { "name""Parameter Name""value""Value" });
        });
 
        $("#igUploadProject").on("iguploadfileuploading"function (evt, ui) {
            alert('on(iguploadfileuploading)');
            alert(ui.fileInfo.serverMessage);
        });
 
        $("#igUploadProject").on("iguploadfileuploaded"function (evt, ui) {
            alert('on(iguploadfileuploaded) ' + ui.fileInfo.serverMessage);
        });
 
        $("#igUploadProject").on("iguploadonerror"function (evt, ui) {
            // This property can be set during the
            // server event UploadStarting. If not set it’s
            // an empty string. (You can use it to display custom error messages.)
            alert(ui.serverMessage);
        });
    });
    </script>

Versions:
Infragistics.Web.Mvc: 5.21.1.7
IgniteUI: 21.1.11
JQuery: 3.6.0

Update 2021-07-21

I switch to the jQuery version and the upload works:

<script type="text/javascript">
    $(function () {
       
 
        $("#upload").igUpload({
            mode: "single",
            autostartupload: false,
            controlId: "upload",
            useSingleRequest: true,
            progressUrl: "../../IGUploadStatusHandler.ashx"
        });
 
 
        $("#upload").on("iguploadfileuploading", function (evt, ui) {
            alert('on("iguploadfileuploading"');
            alert(ui.fileInfo.serverMessage);
        });
 
        $("#upload").on("iguploadfileuploaded", function (evt, ui) {
            alert('on("iguploadfileuploaded"' + ui.fileInfo.serverMessage);
        });
 
        $("#upload").on("iguploadonerror", function (evt, ui) {
            // This property can be set during the
            // server event UploadStarting. If not set it’s
            // an empty string. (You can use it to display custom error messages.)
            alert(ui.serverMessage);
        });
 
 
        //$("#upload").on("iguploadonformdatasubmit", function (evt, ui) {
        //    $("#upload").igUpload("addDataField", ui.formData, { "name": "Parameter Name", "value": "Value" });
        //});
 
        // Workaround:
        $("#upload").on("iguploadonformdatasubmit", function (evt, ui) {
            // switct form data parameters order
            var fileId = "upload_" + ui.fileId + "__frm_if";
            var fileInfo = ui.formData.get(fileId);
            ui.formData.delete("upload_0__frm_if");
            ui.formData.append("Parameter Name", "Value");
            ui.formData.append(fileId, fileInfo);
        });
              
        alert('jQuery');
    });
</script>

<div id="upload"></div>
  • 1300
    Offline posted

    Hello Pete,

    I am glad that you were able to achieve your requirement. Additionally, the described approach could be used with igUpload defined in Razor syntax:

    @(Html.Infragistics().Upload()

                    .ID("igUpload1")  

                    .AutoStartUpload(true)

                    .ControlId("upload1")

                    .ProgressUrl("~/IGUploadStatusHandler.ashx")

                    .Render()) 

    <script type="text/javascript">

            $(function () {

     

                $("#igUpload1").on("iguploadonformdatasubmit", function (evt, ui) {

                    // switct form data parameters order

                    var fileId = "upload_" + ui.fileId + "__frm_if";

                    var fileInfo = ui.fileId;

                    var fileName = ui.fileInfo.path;

                    ui.formData.delete("upload_0__frm_if");

                    ui.formData.append("Parameter Name", "Value");

                    ui.formData.append(fileId, fileInfo);

                    ui.formData.append("fileName", fileName);

                });

            });

        </script>

    Below I am attaching a sample with igUpload defined in Razor syntax. Please test it on your side and let me know if you need any further information regarding this matter.

    Regards,
    Monika Kirkova,
    Infragistics

    5344.igUploadMVC.zip