How upload image in CKEditor 5 With asp.net core razor Pages

ClassicEditor.create(document.querySelector('#News_Body'),
{
  language: 'fa',
  ckfinder: {
    uploadUrl: 'URL'
  }
}).catch(error =>
  {
    console.error(error);
  });

I Have A Razor Page Ineed this Page UPload image to server by CKEditor give me a sample

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

How upload image in CKEditor 5 With asp.net core razor Pages

You can refer to the following example to achieve above requirement.

JS code

@section scripts{
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

    <script>
        ClassicEditor
            .create(document.querySelector('#News_Body'),
                {
                    language: 'fa',
                    ckfinder: { uploadUrl: '/index/UploadImage' }
                })
            .catch(error => { console.error(error); }); 
    </script>
}

Page model class and handler

[IgnoreAntiforgeryToken]
public class IndexModel : PageModel
{
    private readonly ILogger<IndexModel> _logger;

    public IndexModel(ILogger<IndexModel> logger)
    {
        _logger = logger;
    }

    public void OnGet()
    {

    }

    public async Task<JsonResult> OnPostUploadImage([FromForm]IFormFile upload)
    {
        if (upload.Length <= 0) return null;

        //your custom code logic here

        //1)check if the file is image

        //2)check if the file is too large

        //etc

        var fileName = Guid.NewGuid() + Path.GetExtension(upload.FileName).ToLower();

        //save file under wwwroot/CKEditorImages folder

        var filePath = Path.Combine(
            Directory.GetCurrentDirectory(), "wwwroot/CKEditorImages",
            fileName);

        using (var stream = System.IO.File.Create(filePath))
        {
            await upload.CopyToAsync(stream);
        }

        var url = $"{"/CKEditorImages/"}{fileName}";

        var success = new uploadsuccess
        {
            Uploaded = 1,
            FileName = fileName,
            Url = url
        };

        return new JsonResult(success);
    }
}

public class uploadsuccess
{
    public int Uploaded { get; set; } 
    public string FileName { get; set; }
    public string Url { get; set; }
}

Test Result

Method 2

the above solution worked for me. i just changed the PATH in ckFinder

@section scripts{
    <script src="https://cdn.ckeditor.com/ckeditor5/22.0.0/classic/ckeditor.js"></script>

    <script>
        ClassicEditor
            .create(document.querySelector('#News_Body'),
                {
                    language: 'fa',
                    ckfinder: { uploadUrl: '/index/?handler=UploadImage' }
                })
            .catch(error => { console.error(error); }); 
    </script>
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0