Adding custom image upload to Pagedown using PHP

One of my personal project using Pagedown ¹ for the markdown editor, so this is a working solutions and not just an example. Perhaps it slightly different with your needs but at least will give some insight on how to create similar solutions in your app.

I use jQuery UI and jQuery.AjaxFileUpload.js. ²

First we creating the image upload dialog and than hook it into the Pagedown and use PHP to upload the image.

The dialog form:

<div id="insertImageDialog" title="Insert Image">
    <h4>URL</h4>
    <input type="text" placeholder="Enter image URL" />
    <h4>Upload</h4>
    <form method="post" action="" enctype="multipart/form-data">
        <input type="file" name="file" id="file" />
    </form>
    <style>
        #insertImageDialog { display:none; padding: 10px; font-size:12px;}
        .wmd-prompt-background {z-index:10!important;}
    </style>
</div>

The script:

(function () {

    var converter = new Markdown.Converter();
    var editor = new Markdown.Editor(converter);
    var base_path = 'http://www.example.com';

    var $dialog = $('#insertImageDialog').dialog({ 
        autoOpen: false,
        closeOnEscape: false,
        open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); }
    });

    var $url = $('input[type=text]', $dialog);
    var $file = $('input[type=file]', $dialog);

    editor.hooks.set('insertImageDialog', function(callback) {

        var dialogClose = function() {
            $url.val('');
            $file.val('');
            $dialog.dialog('close');
        };

        $dialog.dialog({
            buttons :  { 
                "Insert" : {
                    text: "Insert",
                    id: "insert",
                    click: function(){
                        callback($url.val().length > 0 ? $url.val(): null);
                        dialogClose();
                    }   
                },
                "Cancel" : {
                    text: "Cancel",
                    id: "cancel",
                    click: function(){
                        dialogClose();
                        callback(null);
                    }   
                }       
            } 
        });

        var uploadComplete = function(response) {
            if (response.error == '0') {
                $url.val(base_path + response.path);
                $("#insert").trigger('click');
            } else {
                alert(response.error);
                $file.val('');
            }
        };

        $file.ajaxfileupload({
            'action': base_path + 'upload.php',
            'onComplete': uploadComplete,
        });

        $dialog.dialog('open');

        return true; // tell the editor that we'll take care of getting the image url
    });

    editor.run();

})();

The upload.php:

<?php

// Set the timezone
date_default_timezone_set('Asia/Jakarta');

$whitelist = array('jpg', 'jpeg', 'png', 'gif');
$name      = null;
$dir       = 'content/images/';
$error     = null;
$timestamp = date('YmdHis');
$path      = null;

if (!is_dir($dir)) {
    mkdir($dir, 0755, true);
}

if (isset($_FILES)) {
    if (isset($_FILES['file'])) {
        $tmp_name = $_FILES['file']['tmp_name'];
        $name     = basename($_FILES['file']['name']);
        $error    = $_FILES['file']['error'];
        $path     = $dir . $timestamp . '-' . $name;

        $check = getimagesize($tmp_name);

        if($check !== false) {
            if ($error === UPLOAD_ERR_OK) {
                $extension = pathinfo($name, PATHINFO_EXTENSION);
                if (!in_array($extension, $whitelist)) {
                    $error = 'Invalid file type uploaded.';
                } else {
                    move_uploaded_file($tmp_name, $dir . $timestamp . '-' . $name);
                }
            }
        } else {
            $error = "File is not an image.";
        }
    }
}

echo json_encode(array(
    'path' => $path,
    'name'  => $name,
    'error' => $error,
));

die();

I implement this solutions for HTMLy.