javascriptc#asp.net

Save image into folder in sever using Froala Text Editor


At present. I'm using Froala Text Editor save blog post with tag . But I can't save image uploaded. I was used many way slpit text to get image into folder default in sever, it's not working.

Hope, every body help me this problem! Many thank. enter image description here


Solution

  • Your HTML code :

    <textarea id="editor"></textarea>
    
    <script>
      $(document).ready(function() {
        $('#editor').froalaEditor({
          imageUploadURL: '/upload_image',
          imageUploadParams: {
            id: 'my_editor'
          }
        });
      });
    </script>
    Server-Side Setup in ASP.NET

    using Microsoft.AspNetCore.Http;
    using Microsoft.AspNetCore.Mvc;
    using System;
    using System.IO;
    using System.Threading.Tasks;
    
    public class UploadController : Controller
    {
        [HttpPost("upload_image")]
        public async Task<IActionResult> UploadImage(IFormFile file)
        {
            if (file == null || file.Length == 0)
            {
                return Json(new { error = "No file uploaded." });
            }
    
            var uploads = Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/uploads");
            if (!Directory.Exists(uploads))
            {
                Directory.CreateDirectory(uploads);
            }
    
            var filePath = Path.Combine(uploads, file.FileName);
    
            using (var stream = new FileStream(filePath, FileMode.Create))
            {
                await file.CopyToAsync(stream);
            }
    
            return Json(new { link = $"/uploads/{file.FileName}" });
        }
    }

    Ensure that the wwwroot/uploads directory exists in your project. If not, create it.