After upload image, the added tag doesn't have the !

[erossini]

I added the code to upload an image on my webserver. When the upload, the tag for the image is added to the Markdown Editor but the ! is missing and the image is not displayed. I have to change it manually.

How can I fix the code for it?

I really appreciate any help you can provide. Enrico

[steinhaug]

I am using this build, and have no problems with the !.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/erossini/EasyMarkdownEditor@main/dist/easymde.min.css">
<script src="https://cdn.jsdelivr.net/gh/erossini/EasyMarkdownEditor@main/dist/easymde.min.js"></script>
<script>
    const easyMDE = new EasyMDE({
        element: document.getElementById('my-text-area'),
        uploadImage:true,
        imageUploadEndpoint: 'uploader.php',
        imagePathAbsolute: true,
        imageMaxSize: 1024 * 1024 * 100,
    });
</script>

The uploader:

// Define the upload directory
$upload_dir = '/server-path/www/my-full-path/for-uploads-directory/'; // on server
$web_uri = '/my-full-path/for-uploads-directory/'; // in browser

// Function to sanitize filename
function sanitize_filename($filename) {
    // Remove any character that isn't a word character, dash, or dot
    $filename = preg_replace('/[^\w\-\.]/', '', $filename);
    // Remove any leading or trailing dots
    $filename = trim($filename, '.');
    return $filename;
}

// Function to generate a unique filename
function generate_unique_filename($upload_dir, $filename) {
    $info = pathinfo($filename);
    $base_name = $info['filename'];
    $extension = isset($info['extension']) ? '.' . $info['extension'] : '';
    $counter = 0;
    
    while (file_exists($upload_dir . $filename)) {
        $counter++;
        $filename = $base_name . '_' . $counter . $extension;
    }
    
    return $filename;
}

// Check if a file was uploaded
if (isset($_FILES['image']) && $_FILES['image']['error'] == 0) {
    $original_filename = $_FILES['image']['name'];
    $tmp_name = $_FILES['image']['tmp_name'];
    
    // Sanitize the filename
    $safe_filename = sanitize_filename($original_filename);
    
    // Generate a unique filename
    $unique_filename = generate_unique_filename($upload_dir, $safe_filename);
    
    // Get file information
    $file_info = pathinfo($unique_filename);
    $filename_without_extension = $file_info['filename'];
    $extension = isset($file_info['extension']) ? $file_info['extension'] : '';
    
    // Attempt to move the uploaded file
    if (move_uploaded_file($tmp_name, $upload_dir . $unique_filename)) {
        // Success
        $response = [
            'status' => 'success',
            'original_filename' => $original_filename, // uploaded filename
            'saved_filename' => $unique_filename,      // dirified filename
            'extension' => $extension,
            'filename_without_extension' => $filename_without_extension,
            'data' => [
                'filePath' => $web_uri . $unique_filename
            ]
        ];

    } else {
        // Failure
        $response = [
            'status' => 'error',
            'message' => 'Failed to move uploaded file.'
        ];
    }

} else {
    // No file uploaded or upload error
    $response = [
        'status' => 'error',
        'message' => 'No file uploaded or upload error occurred.'
    ];
}

// Send JSON response
header('Content-Type: application/json');
echo json_encode($response);

A successfull upload returns the following JSON:

{
    "status": "success",
    "data": {
        "filePath": "\/my-full-path\/for-uploads-directory\/my-uploaded-file.png"
    }
}

Which will add the following markup:

![my-uploaded-file.png](/my-full-path/for-uploads-directory/my-uploaded-file.png)

[avsdev-cw]

There is a chunk of code in the javascript for processing the result from the server (afterImageUploaded). It is a HORRIBLE function (for many reasons) that only accepts the editor object and a URL for the uploaded image.

In the function it checks the extension of the URL and only adds the image tag replacement if it matches one of: 'png', 'jpg', 'jpeg', 'gif', 'svg', 'apng', 'avif', 'webp' else it will use a generic link style replacement instead. On top of that, the nasty implementation replaces the link and image insert buttons for the rest of the page life until it is reset by a refresh - ouch!

I ended up using the custom upload handler approach...

[Ionaru]

@avsdev-cw Some of those issues have been fixed in the @next build of the editor.

[avsdev-cw]

@Ionaru Thanks for the update.