Is there any working example on how to use the imageUploadFunction

[Underest]

Is there any working example on how to use the imageUploadFunction

[Ionaru]

Yeah: #334

[Underest]

Yes, but as I sad in my question the code from #334 is not working.

[Lunedor]

All code samples I found that has same issue but finally I made it with flask backend with below codes and working right for me:

app.config['ALLOWED_IMAGES_TYPES'] = ['image/png', 'image/jpeg', 'image/jpg']
app.config['IMAGE_UPLOAD_FOLDER'] = 'static/images'  # or any other folder you want to use for image uploads
app.config['IMAGE_MAX_SIZE'] = 1024 * 1024 * 2  # 2 MB

@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: A JSON response with the expected format for EasyMDE.
    """
    # Check if the request contains the 'image' field in FormData
    if 'image' not in request.files:
        return jsonify({'error': 'noFileGiven'}), 400  # Bad request

    file = request.files['image']

    if file.filename == '':
        return jsonify({'error': 'noFileGiven'}), 400  # Bad request

    if file and file.content_type in app.config['ALLOWED_IMAGES_TYPES']:
        if file.content_length > app.config['IMAGE_MAX_SIZE']:
            return jsonify({'error': 'fileTooLarge'}), 413  # Payload Too Large

        # Generate a safe filename
        file_name = f"{file.filename.split('.')[0]}_{len(os.listdir(app.config['IMAGE_UPLOAD_FOLDER']))}.{file.filename.split('.')[-1]}"
        file_path = os.path.join(app.config['IMAGE_UPLOAD_FOLDER'], file_name)

        # Save the file
        file.save(file_path)

        # Construct the response in the expected format for EasyMDE
        image_url = url_for('static', filename=f'images/{file_name}')
        response_data = {
            'data': {
                'filePath': image_url
            }
        }

        return jsonify(response_data), 200, {'Content-Type': 'application/json'}
    else:
        return jsonify({'error': 'typeNotAllowed'}), 415  # Unsupported Media Type

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_IMAGES_TYPES']

and JavaScript part:

function initializeEasyMDE() {
    easyMDE = new EasyMDE({
        element: document.getElementById('editor'),
        autofocus: true,
        spellChecker: false,
		uploadImage: true,
		imageUploadEndpoint: "imageUpload",
        status: [
		"words",
		"upload-image",
		],
        toolbar: ["bold", "italic", "heading", "|", "quote", "unordered-list", "ordered-list", "|", "link", "image", "|", "preview", "side-by-side", "fullscreen"],
    });
    return easyMDE;
}