1. Home
  2. Forum
  3. Blazor
  4. UploaderAsyncSettings SaveUrl="{based url dynamic based on appsetting}/api/upload"

UploaderAsyncSettings SaveUrl="{based url dynamic based on appsetting}/api/upload"

Dear Support,

I would like to point this SaveUrl property to a rest api endpoint that has a different baseaddress than the standalone wasm blazor application. (I am not using the hosted net core back end template from microsoft)

Is it possible to set the SaveUrl property to be dynamic depending on appsetting configuration property on build?


locally: it would point to my wwwroot/appsetting.Developement file as shown below

{ "ConnectionStrings": {

"webapi": "https://localhost:7071",

},


when deployed to Azure App Service, it would point the the property "ConnectionStrings:webapi" configured on Azure App Service.

Could you please provide a recommendation on best approach?


I attempted the following but received mixed complex content error on SaveUrl property

@inject Microsoft.Extensions.Configuration.IConfiguration config


<SfUploader AutoUpload="true" Multiple="false" ID="UploadFiles" MaxFileSize="5000000">

    <UploaderAsyncSettings SaveUrl="@config["ConnectionStrings:webapi"]/api/upload"></UploaderAsyncSettings>

</SfUploader>


John


3 Replies 1 reply marked as answer
DR Deepak Ramakrishnan Syncfusion Team December 23, 2021 03:50 PM UTC

Hi John, 
 
Greetings from Syncfusion support. 
 
Yes we can upload the files in another server by passing the api link in the SaveUrl and RemoveUrl . And also we can change the value mapped to it dynamically as it is string property .You can refer the below code snippet and sample for your reference.  
 
Make sure the following things in your application : 
 
1.Uploader ID / name attribute must match the arguments of the Save /Remove method  of receiving end 
2.And Api link should be in the format http(s)://{host url}/api/{controller name}/ {method name} 
 
WASM app 
 
@using Syncfusion.Blazor.Inputs 
 
<h3>SaveUrl: @saveurlapi</h3> 
<br /> 
<br /> 
 
<h3>RemoveUrl: @removeurlapi</h3> 
<br /> 
<br /> 
 
<SfUploader ID="UploadFiles" AutoUpload="true"> 
    <UploaderAsyncSettings SaveUrl="@saveurlapi" RemoveUrl="@removeurlapi"></UploaderAsyncSettings> 
</SfUploader> 
<br /> 
<br /> 
 
 
<button @onclick="ClickHandler">Switch Save and Remove URL</button> 
 
@code { 
 
    public string saveurlapi { get; set; } = "http://localhost:51370/api/SampleData/Save"; 
 
    public string removeurlapi { get; set; } = "http://localhost:51370/api/SampleData/Remove"; 
 
 
    public bool isClick { get; set; } = true; 
 
    public void ClickHandler() 
    { 
        if (isClick) 
        { 
            this.saveurlapi = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save"; 
            this.removeurlapi = "https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove"; 
 
            isClick = false; 
        } 
        else 
        { 
            this.saveurlapi = "http://localhost:51370/api/SampleData/Save"; 
            this.removeurlapi = "http://localhost:51370/api/SampleData/Remove"; 
 
 
            isClick = true; 
        } 
    } 
 
} 
 
 
 
 
Save method in another server  
 
[HttpPost("[action]")] 
        public async Task Save(IList<IFormFile> UploadFiles) 
        { 
            long size = 0; 
            try 
            { 
                foreach (var file in UploadFiles) 
                { 
                    var filename = ContentDispositionHeaderValue 
                            .Parse(file.ContentDisposition) 
                            .FileName 
                            .Trim('"'); 
                    filename = hostingEnv.ContentRootPath + $@"\{filename}"; 
                    size += (int)file.Length; 
                    if (!System.IO.File.Exists(filename)) 
                    { 
                        using (FileStream fs = System.IO.File.Create(filename)) 
                        { 
                            file.CopyTo(fs); 
                            fs.Flush(); 
                        } 
                    } 
                } 
            } 
            catch (Exception e) 
            { 
                Response.Clear(); 
                Response.StatusCode = 204; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File failed to upload"; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 
            } 
        } 
 
        [HttpPost("[action]")] 
        public void Remove(IList<IFormFile> UploadFiles) 
        { 
            try 
            { 
                var filename = hostingEnv.ContentRootPath + $@"\{UploadFiles[0].FileName}"; 
                if (System.IO.File.Exists(filename)) 
                { 
                    System.IO.File.Delete(filename); 
                } 
            } 
            catch (Exception e) 
            { 
                Response.Clear(); 
                Response.StatusCode = 200; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = "File removed successfully"; 
                Response.HttpContext.Features.Get<IHttpResponseFeature>().ReasonPhrase = e.Message; 
            } 
        } 
    } 
 
 
 
 
 
 
Thanks, 
Deepak R. 


Marked as answer
JO John December 24, 2021 02:41 AM UTC



For those interested in using you app settings config files 

you may use below syntax also. 


@code {

   [Inject]

    private IConfiguration configuration { get; set; }

    private string saveUrl => configuration["ConnectionStrings:webapi"] +"/api/FileManager/Upload";


}


DR Deepak Ramakrishnan Syncfusion Team December 27, 2021 06:49 AM UTC

Thanks for sharing us your solution John. We are always happy to assist you if you need any further assistance .

Loader.
Up arrow icon