SimpleMDE and EasyMDE are 2 JavaScript editor for Markdown. EasyMDE is an extension of SimpleMDE. I want to use EasyMDE in my Blazor project.
The implementation is quite completed and you find it on GitHub.
This editor has the feature to upload an image or paste an image. The property ImageUploadEndpoint defines where the image has to be upload. And here the problem is. I can't write a ASP.NET Core Controller to receive the image as save it.
In the repository of EasyMDE there is an example in Python. First, I have to create the editor
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?
I wrote this API
[ApiController]
[Route("api/[controller]")]
public class ImageController : Controller
{
[HttpPost]
public async Task<IActionResult> Upload(IFormFile files)
{
long size = files.Length;
var filePath = Path.GetTempFileName();
using (var stream = System.IO.File.Create(filePath))
{
await files.CopyToAsync(stream);
}
return Ok();
}
}
but this API is not receiving any request from the EasyMDE.
