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)