Uploader event 'beforeUpload' not accepting custom data

[James Cullis]

We are using the Uploader control to upload files to an Azure Blob store.

The requirement is to get some custom data from the server before the file is uploaded and pass some custom data on the upload to be added to the 'metaData' of the blob in Azure to help identify it.

Unfortunately the args.customFormData is not being updated and cannot be accessed in the upload endpoint.  However it does work in the 'uploading' event but this doesn't allow us to retrieve the data from the server before the upload process.

Sample code:

blobUploadObject = new ej.inputs.Uploader({
autoUpload: false,
     asyncSettings: {
     saveUrl: hostUrl + 'api/AzureBlobStorage/Save',
     removeUrl: hostUrl + 'api/AzureBlobStorage/Remove',
     },
     beforeUpload: onBeforeUploadToBlob
});

// render initialized Uploader
blobUploadObject.appendTo('#blobuploader');

function onBeforeUploadToBlob(args) {
    var myData = GetDataFromServer(blobUploadObject.getFilesData());
    args.customFormData = [{ 'metaData': myData }];
}

function GetDataFromServer(fileData) {
    var data = { 'filedata': JSON.stringify(fileData[0]) };

    $.ajax({
        type: 'POST',
        url: 'HttpHandlers/Documents/SyncfusionHandler.ashx',
        dataType: "text",
        data: { 'data': data },
        success: function (args) {
            var response = JSON.parse(args);
            return response['Data'].myData;
        },
        error: function (jqXHR, textStatus, errorThrown) {
        }
    });
}

Please let me know if you need any other information,

Thanks in advance

Regards

James Cullis

[Deepak Ramakrishnan]

Hi James,

Greetings from Syncfusion support.

We are currently creating the sample demonstration by making request with required data to the server before uploading the file to the azure blob.So we will update the further possibilities in two business days (25^st,October 2021).

Thanks,

Deepak R

[Deepak Ramakrishnan]

Hi James, 

  

Sorry for the inconvinience caused. 

  

  

We are still working on your requirement as we facing complexity while sending the data to server before the file get uploaded. We will update the further details in one business day (26th, October 2021). 

  

Thanks, 

Deepak R. 

[Deepak Ramakrishnan]

Hi James , 

 

We deeply regret for the inconvenience caused. 

 

 

We have created a sample with uploader in Javascript Platform and blazor as server end with azure blob storage . But we are facing complexity while sending data to the server before the file get uploaded to the component . So we will update the further details in one business day (27^th,October 2021) . please find the below sample (In progress) 

 

Client App : https://stackblitz.com/edit/1owbju?file=index.ts  

 

Server App :https://www.syncfusion.com/downloads/support/forum/169806/ze/BlazorApp1-956206827-1714679109 

 

We appreciate your patience until then. 

 

 

Thanks, 

Deepak R. 

 

[Deepak Ramakrishnan]

Hi James, 

 

Thanks for your patience. 

 

We have validated your scenario and found that we can access the customFormData at server end alone in uploading event of the uploader but if you need to send custom data before the file get uploaded , You can manually send the data to the server by using ajax in beforeUpload  event . Kindly refer the below code snippet and sample for your reference. 

 

 

[client] 

 let uploadObj: Uploader = new Uploader({ 

        asyncSettings: { 

            saveUrl: 'http://localhost:51370/api/SampleData/Save', 

            removeUrl: 'http://localhost:51370/api/SampleData/Remove' 

        }, 

        beforeUpload: onBeforeUploadToBlob, 

        dropArea: dropElement 

    }); 

    uploadObj.appendTo('#UploadFiles'); 

 

    function onBeforeUploadToBlob(args){ 

console.log(args) 

        $.ajax({ 

            type: 'POST', 

            url: 'http://localhost:51370/api/SampleData/Modify', 

            dataType: "text", 

            data: { 'data': 'Custom' }, 

            beforeSend: function(request){ 

                request.setRequestHeader('name', 'Syncfusion INC'); 

            }, 

            success: function (args) { 

                 

            }, 

            error: function (jqXHR, textStatus, errorThrown) { 

            } 

        }); 

    } 

 

 

 

[server] [SampleDataController.cs] 

 

  [HttpPost("[action]")] 

        public async Task Modify([FromForm]string data) 

        { 

            var customFormData = Response.HttpContext.Request.Headers["name"].ToString(); 

             

        } 

 

 

[Snapshot] 

 

 

 

 

Client- Sample Link: https://stackblitz.com/edit/1owbju-jdx21c?file=index.ts  

 

Server - Sample Link : https://www.syncfusion.com/downloads/support/forum/169806/ze/BlazorApp12029295834  

 

 

Thanks, 

Deepak R.