Adding custom image upload to Pagedown using PHP

One of my personal project using Pagedown 1 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. 2

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.


  1. PageDown is the version of Attacklab's Showdown and WMD as used on Stack Overflow and the other Stack Exchange sites. The Pagedown homepage on Google Code. ↩︎

  2. jQuery plugin to make file inputs upload via ajax. The Project page on Github. ↩︎


Author: danpros

A self-proclaimed geek, business owner, and part-time blogger.

Comments on “Adding custom image upload to Pagedown using PHP”