How to update asyncSettings SaveUrl property

[Gunesh]

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

[Sureshkumar P]

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 uploadObj: Uploader = 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(args: RemovingEventArgs): void {

  args.postRawFile = false;

}

// initialize check box component

let checkBoxObj: CheckBox = new CheckBox({

  checked: true,

  label: 'Memo',

  change: (args: ChangeEventArgs) => {

    // 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 checkBoxObj1: CheckBox = new CheckBox({

  checked: false,

  label: 'Letter',

  change: (args: ChangeEventArgs) => {

    // 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

[Gunesh]

Dear Suresh,

Thanks for your input.

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

[Sureshkumar P]

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

[Gunesh]

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

[Sureshkumar P]

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 uploadObj: Uploader = 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