Quill: Upload image lên server - Part 4

Quill hỗ trợ tốt chèn ảnh với định dạng base64 vào editor. Khuyết điểm là khiến cho database mau chóng hết dung lượng và không tối ưu được cache.

Để custom lại function trong toolbar, chúng ta sử dụng handler.

Cụ thể trong bài viết này, chúng ta sẽ xây dựng 1 website cho phép upload file và trả về đường dẫn file vừa mới upload

Setup

• Khai báo Toolbar QuillJs
• Customize 'image' event
• Implement hàm upload file trên server

Trong ứng dụng ASP.NET Core, thêm folder FileUploads trong wwwroot

File HomeController

public class HomeController : Controller
{
    private readonly ILogger<HomeController> _logger;
    private readonly IWebHostEnvironment _webHostEnvironment;

    public HomeController(ILogger<HomeController> logger, IWebHostEnvironment webHostEnvironment)
    {
        _logger = logger;
        _webHostEnvironment = webHostEnvironment;
    }

    public IActionResult UploadImage()
    {
        var model = new PostModel
        {
            Content = "  <p>Hello World!</p>\r\n  <p>Some initial <strong>bold</strong> text</p>\r\n  <p><br></p>"
        };
        return View(model);
    }

    
    [HttpPost]
    public IActionResult UploadFile(IFormFile file)
    {
        var dir = Path.Combine(_webHostEnvironment.ContentRootPath, "wwwroot");
        using (var fileStream = new FileStream(Path.Combine(dir, "FileUploads", file.FileName), FileMode.Create))
        {
            file.CopyTo(fileStream);
        }
        return Json(new
        {
            data = "/FileUploads/" + file.FileName
        });
    }
}

Khai báo toolbar và Quill:

var toolbarOptions = {
    container: [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        [{ 'align': [] }],
        ['blockquote', 'code-block'],

        [{ 'header': 1 }, { 'header': 2 }],               // custom button values
        [{ 'list': 'ordered' }, { 'list': 'bullet' }],
        [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
        [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
        [{ 'direction': 'rtl' }],                         // text direction

        [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

        [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
        [{ 'font': [] }],
        ['video'],
        ['image'],
        ['clean']
    ],
    handlers: {
        "image": this.selectLocalImage //customize image event
    }
};
var jdQuill = new Quill('#editor', {
    modules: {
        toolbar: toolbarOptions
    },
    theme: 'snow'
});

Implement hàm upload file:

/**
* Step1. select local image
*
*/
function selectLocalImage() {
    const input = document.createElement('input');
    input.setAttribute('type', 'file');
    input.click();

    // Listen upload local image and save to server
    input.onchange = () => {
        const file = input.files[0];

        // file type is only image.
        if (/^image\//.test(file.type)) {
            saveToServer(file);
        } else {
            console.warn('You could only upload images.');
        }
    };
}

/**
 * Step2. save to server
 *
 * @@param {File} file
 */
function saveToServer(file) {
    const fd = new FormData();
    fd.append('file', file);
    //fd.append('fileName', file.name);
    const xhr = new XMLHttpRequest();
    xhr.open('POST', '/Home/UploadFile', true);
    xhr.onload = () => {
        if (xhr.status === 200) {
            // this is callback data: url
            const url = JSON.parse(xhr.responseText).data;
            insertToEditor(url);
        }
    };
    xhr.send(fd);
}

/**
 * Step3. insert image url to rich editor.
 *
 * @@param {string} url
 */
function insertToEditor(url) {
    // push image url to rich editor.
    const range = jdQuill.getSelection();
    jdQuill.insertEmbed(range.index, 'image', url);
}