What is meta? ×
Meta Stack Exchange is where users like you discuss bugs, features, and support issues that affect the software powering all 130 Stack Exchange communities.

I am looking for the code for the Web Markdown (WMD) editor that implements the file upload feature currently provided by Stack Overflow. I tried using the code at http://github.com/derobins/wmd, but it does not have the image upload feature.
Can someone please provide me a link to the latest version of the code?

share|improve this question
6  
The image upload feature is heavily tied to the external image hosting service SO is using. It could well be that this part of the code is not Open Source –  Pëkka Oct 21 '10 at 10:43
3  
+1 @Pekka; see meta.stackexchange.com/questions/4376/… –  Pops Oct 21 '10 at 12:05
    
Hm, see also meta.stackexchange.com/questions/4168/… –  Pops Oct 21 '10 at 13:02
    
Seems like if it is just using the imgurl API. It may be closed source, but the image-storage side of it wouldn't necessarily have to be. –  Jordan Reiter Jul 20 '11 at 17:43

1 Answer 1

The following hack requires use of jQuery, jQuery UI and Mike Alsup's jQuery Form Plugin for performing AJAX file uploads. The hack works with the linked versions (jQ 1.7.2 and jQUI 1.8.20). I can't guarantee compatibility with other versions.


In your <head>, you'll need to include the dependencies:

<script type='text/javascript' src='jquery.min.js'></script>
<link href='theme/jquery-ui.css' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='jquery-ui.js'></script>
<script type='text/javascript' src='wmd/showdown.js'></script>
<script type='text/javascript' src='wmd/wmd.js'></script>
<link type='text/css' rel='stylesheet' href='wmd/wmd.css'/>
<script type='text/javascript' src='jquery.form.js'></script>

We actually need to make a single change to wmd.js.
Go on in there and search (ctrl+f) for var form = doc.createElement("form");
Immediately following this line, assign the form an id, dialogform will do: form.id = "dialogform";.


Now on the front end, run:

$(document).ready(function(){
    $("#wmd-image-button").live("click",function(){
        setTimeout(function(){
            $(".wmd-prompt-dialog").css({"opacity": "0", display: "none"});
        }, 100);
        var $div = $("<div>");
        var $form = $("<form>").attr({action: "submit_image.php", method: "post"})
        var $file = $("<input/>").attr({type: "file", name: "image"});
        var $name = $("<input/>").attr({type: "text", name: "name", placeholder: "Name"});
        var $submit = $("<input/>").attr("type", "submit");
        $form.append($name, $file, $submit)
        .ajaxForm(function(r) {
            r = $.parseJSON(r);
            if(r.success){
                $("#dialogform input[type='text']").val(r.filename);
                $("#dialogform input[value='OK']").trigger("click");
                $div.dialog("close");
            }
        });
        $div.append($form).dialog({title: "Upload Image"});
    });
    $("#wmd-link-button").live("click", function(){
        setTimeout(function(){
            $(".wmd-prompt-dialog").css("opacity", "1");
        }, 100);
    });
});

Remember, the post was written for jQuery 1.7.2, and live() has since been deprecated. Please switch to on() if you're using a more recent version of jQuery


And on the backend, in submit_image.php:

    $f = $_FILES['image'];
    $p = $_POST;
    $allowedTypes = array(IMAGETYPE_PNG, IMAGETYPE_JPEG, IMAGETYPE_GIF);
    $detectedType = exif_imagetype($f['tmp_name']);
    if(in_array($detectedType, $allowedTypes)){
        $pi = pathinfo($f['name']);
        $ext = $pi['extension'];
        $target = "img/" . strtolower(str_replace(" ", "-", $p['name'])) . "." . $ext;
        if(move_uploaded_file($f['tmp_name'], $target)){
            $returnArr = array(
                "success" => true,
                "filename" => site_url($target)
            );
            echo json_encode($returnArr);
        }
    else echo json_encode(array("success" => false));
    }
    else echo json_encode(array("success" => false, "msg" => "Invalid File Type."));

Hopefully that will get you started. This was written a couple of years ago, when my javascript skills were sub-par! Haha. I previously had this on a blog (which is now dead), with step-by-step instructions and explanations; lots of unnecessary fluff. Thanks @Kamiccolo for bringing this link to my attention. I had to consult the way-back-machine in order to revive it.

share|improve this answer
1  
Works great! I used the bootstrap WMD editor and the Laravel framework so I had to change a thing or 2. But I used your idea. –  Mood Mar 15 '13 at 5:24

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .