We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to update asyncSettings SaveUrl property

Dear Support,

I am using file uploader control, I have a dropdown of File category, when i change the File category, the information has to be added to the save url. How can i update the save url dynamically on dropdown change.

i wan to clear the files also when category is changed. Let say user selected dropdown category as "Memo". Now the save url should be "fileuploader.ashx?Category=Memo". Consider user uploaded one file. 

When user changes the categroy to "Letter", i want to delete the previously uploaded file which is "Memo category" also, i want to update the save url as "fileuploader.ashx?Category=Letter". 

Kin


5 Replies

SP Sureshkumar P Syncfusion Team October 19, 2022 10:00 AM UTC

Hi Gunesh,

We suggest you update the saveUrl property dynamically by using the below code example.

Find the code example here:

// Initialize the uploader component

let uploadObjUploader = new Uploader({

  asyncSettings: {

    saveUrl:

      'https://ej2.syncfusion.com/services/api/uploadbox/Save?Category=Memo',

    removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',

  },

  removing: onFileRemove,

  dropArea: dropElement,

});

uploadObj.appendTo('#fileupload');

 

function onFileRemove(argsRemovingEventArgs): void {

  args.postRawFile = false;

}

// initialize check box component

let checkBoxObjCheckBox = new CheckBox({

  checked: true,

  label: 'Memo',

  change: (argsChangeEventArgs=> {

    // dynamic change the saveUrl

    uploadObj.asyncSettings.saveUrl =

      'https://ej2.syncfusion.com/services/api/uploadbox/Save?Category=Memo';

    // clear the list

    uploadObj.clearAll();

  },

});

checkBoxObj.appendTo('#checkAutoUpload');

 

let checkBoxObj1CheckBox = new CheckBox({

  checked: false,

  label: 'Letter',

  change: (argsChangeEventArgs=> {

    // dynamic change the saveUrl

    uploadObj.asyncSettings.saveUrl =

      'https://ej2.syncfusion.com/services/api/uploadbox/Save?Category=Letter';

    // clear the list

    uploadObj.clearAll();

  },

});

checkBoxObj1.appendTo('#sequentialUpload');

 

 

Find the sample here: https://stackblitz.com/edit/maa9um?file=index.ts

Regards,

Sureshkumar P



GU Gunesh replied to Sureshkumar P October 19, 2022 10:03 AM UTC

Dear Suresh,

Thanks for your input.


When you call clearall() , Does it send server request to remove file from server side?



SP Sureshkumar P Syncfusion Team October 20, 2022 11:46 AM UTC

Hi Gunesh,

We have not cleared the saved files using clearall() method from the server end. we have cleared the client-side file list rendering from the uploader component.

Regards,

Sureshkumar P



GU Gunesh replied to Sureshkumar P October 20, 2022 11:52 AM UTC

Dear Suresh,


Thanks for your support.


I am uploading the file using asyncSettings.saveUrl. As the files are already uploaded asynchronsly, When i submit my form, i want to avoid attaching the files to HttpContext.Request.Files. How can i do that?

I tried to remove name attribute of  file control. Still after initializing Uploader, name attribute is added to control.

<input type="file" id="fu-oldBank">

Regards,

Gun



SP Sureshkumar P Syncfusion Team October 21, 2022 11:25 AM UTC

Hi Gunesh,

Query 1: I am uploading the file using asyncSettings.saveUrl. As the files are already uploaded asynchronsly, When i submit my form, i want to avoid attaching the files to HttpContext.Request.Files. How can i do that?

We cannot maintain the already uploaded files after calling the ClearAll public method into our component. So we suggest you use the below server-side code when saving the file.

Find the code example here:

if (!File.Exists(fileSavePath))

                {

                    httpPostedFile.SaveAs(fileSavePath);

                    HttpResponse Response = HttpContext.Current.Response;

                    Response.Clear();

                    Response.ContentType = "application/json; charset=utf-8";

                    Response.StatusDescription = "File uploaded succesfully";

                    Response.End();

                }

Find the server-side code documentation: https://ej2.syncfusion.com/documentation/uploader/async/#server-side-configuration-for-save-action


Query 2: I tried to remove name attribute of file control. Still after initializing Uploader, name attribute is added to control.

We cannot remove the name attribute to the component because the uploader component sends the file using the name attribute values in the back-end service. But we have added the name attribute with the same as your ID attribute value. If you want to change the name attribute you can achieve this by using htmlAttribute property.

Find the code example here:

let uploadObjUploader = new Uploader({

  asyncSettings: {

    saveUrl:

      'https://ej2.syncfusion.com/services/api/uploadbox/Save?Category=Memo',

    removeUrl: 'https://ej2.syncfusion.com/services/api/uploadbox/Remove',

  },

  removing: onFileRemove,

  dropArea: dropElement,

  htmlAttributes: { name: 'fileupload' },

});

uploadObj.appendTo('#fileupload');

 

Find the sample here: https://stackblitz.com/edit/maa9um-kte9yq?file=index.ts,index.html

Regards,

Sureshkumar P


Loader.
Live Chat Icon For mobile
Up arrow icon