How to change Image path and save url?

[Aleksandrs]

Hi!

I need to save image to different locations depending from value in DropBox. 

How can I do that?

<SfRichTextEditor @ref="sfRichText" @bind-Value="_templateContent" Height="600px" EnableResize="true" EditorMode="EditorMode.HTML">

                <RichTextEditorImageSettings SaveUrl="@("api/Image/Save/"+_htmlContentId)" Path="@("/images/DocTemplates/"+_htmlContentId+"/")"></RichTextEditorImageSettings>

            </SfRichTextEditor>

This always keep a value from initializing phase.

[Revanth Krishnan]

Hi Aleksandrs, 

 

 

Greetings from Syncfusion support. 

 

 

We have validated your query “How to change the Image ‘Path’ and ‘SaveUrl’ to save the images to a different location?” 

 

We have analyzed the shared code snippet and this can be achieved by just using the same ‘SaveUrl’ and passing the new folder name(_htmlContentId) in the ‘CustomFormData’ argument of the ‘BeforeUploadImage’ event, and then retrieving the folder name in the server action (Save) to store the image in the respective folder. 

The ‘Path’ property can be changed on the client-side depending on the current dropbox value. 

 

We have prepared a sample for your reference, 

 

Code Snippet: 

<SfButton OnClick="@changeDropArea">Change DropArea</SfButton> 

<SfRichTextEditor @bind-Value="@Value"> 

    <RichTextEditorImageSettings SaveUrl="api/Image/Save" Path="@Path"/> 

    <RichTextEditorEvents BeforeUploadImage="@beforeUploadImage"></RichTextEditorEvents> 

</SfRichTextEditor> 

 

@code{ 

    public string htmlContentId { get; set; } = "dropArea"; 

 

    //CurrentPath  

    string Path = "./Images/DocTemplate/dropArea/"; 

    private string Value { get; set; } = "<p>Syncfusion RichTextEditor</p>"; 

 

    public void changeDropArea() 

    { 

        //Changes the Path value 

        this.htmlContentId = "normalImage"; 

        this.Path = "./Images/DocTemplate/" + this.htmlContentId + "/"; 

    } 

    public  void beforeUploadImage(ImageUploadingEventArgs args) 

    { 

        //Will be sent to server save action for the folder location change. 

        args.CustomFormData = new List<object> { new { page = htmlContentId } }; 

    } 

} 

 

Server-side action: 

[HttpPost("[action]")] 

[Route("api/Image/Save")] 

public void Save(IList<IFormFile> UploadFiles) 

{ 

    try 

    { 

        foreach (var file in UploadFiles) 

        { 

            //Retrieve the value 

            var folderName = Request.Form["page"]; 

                     

            if (UploadFiles != null) 

            { 

                string targetPath = hostingEnv.ContentRootPath + \\wwwroot\\Images\\DocTemplate\\ + folderName +"\\"; 

                string filename = ContentDispositionHeaderValue.Parse(file.ContentDisposition).FileName.Trim('"'); 

 

                . . . 

            } 

        } 

    } 

    catch (Exception e) 

    { 

        . . . 

    } 

} 

Note: Ensure the sample by inserting the image initially one time and then click the button change drop area button and ensure the same next time. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/RTE_Blazor_Image_Upload-1257732594 

 

Please check the above code snippet and the sample and let us know if it satisfies your requirement. 

 

Regards, 

Revanth