Ionaru / easy-markdown-editor

EasyMDE: A simple, beautiful, and embeddable JavaScript Markdown editor. Delightful editing for beginners and experts alike. Features built-in autosaving and spell checking.
https://stackblitz.com/edit/easymde
MIT License
2.45k stars 319 forks source link

EasyMDE upload image with ASP.NET Core/Blazor #376

Closed erossini closed 2 years ago

erossini commented 2 years ago

I want to use EasyMDE in my Blazor project. The implementation is quite completed and you find it on GitHub.

I specified the property ImageUploadEndpoint but I can't write an ASP.NET Core Controller to receive the image as save it.

I found this example in another site. We need to specify the server address where the images will be sent with the imageUploadEndpoint option:

var easyMde = new EasyMDE({
    element: document.getElementById('md-text-area'),
    hideIcons: ['image'],
    showIcons: ['upload-image'],
    imageUploadEndpoint: "https://example.com/uploadImage"
});

Then, the script in Python.

@app.route('/imageUpload', methods=['POST'])
def upload_image():
    """
    Upload an image to the server and store it to the folder defined in
    IMAGE_UPLOAD_FOLDER in flask configuration.
    Note that the image folder must be created first and with write access.
    :return: The relative path of the uploaded file, or an error among with the
    corresponding HTTP error code.
    """
    from werkzeug.utils import secure_filename
    import os.path as op
    if 'image' not in request.files:
        return 'no_file_part', 400  # Bad request
    file = request.files['image']
    if not file.filename:
        return 'no_selected_file', 400  # Bad request
    if file and '.' in file.filename \
            and file.filename.rsplit('.', 1)[1].lower() in 
            app.config['ALLOWED_IMAGES_TYPES']:
        file_name = secure_filename(file.filename)
        file_path = op.join(app.config['IMAGE_UPLOAD_FOLDER'], file_name)
        file.save(file_path)
        return file_path
    return 'no_allowed_file', 415  # Unsupported Media Type

I have no idea if this script is working or not. The point is how can I write a similar API in ASP.NET Core?

A workaround is to have the file content but I can't find where the content is. In this function

imageUploadFunction: (file, onSuccess, onError) => {
    // ...
}

file has some details of the dropped file but not the content of the file for example in byte[]. How can I have it?

Thank you in advance, Enrico

erossini commented 2 years ago

I have a working example. Soon I will publish a new Blazor Component. Source code on GitHub; documentation and help on my blog.