1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Uploader event 'beforeUpload' not accepting custom data

Uploader event 'beforeUpload' not accepting custom data

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







4 Replies
DR Deepak Ramakrishnan Syncfusion Team October 21, 2021 04:05 PM UTC

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 (25st,October 2021).

Thanks,
Deepak R



DR Deepak Ramakrishnan Syncfusion Team October 25, 2021 04:39 PM UTC

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. 


DR Deepak Ramakrishnan Syncfusion Team October 26, 2021 04:51 PM UTC

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 (27th,October 2021) . please find the below sample (In progress) 
 
 
 
We appreciate your patience until then. 
 
 
Thanks, 
Deepak R. 
 


DR Deepak Ramakrishnan Syncfusion Team October 27, 2021 05:17 PM UTC

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] 
 
 
 
 
 
 
 
Thanks, 
Deepak R. 


Loader.
Up arrow icon