0

Django markdownx is a Markdown editor built for Django https://github.com/adi-/django-markdownx

Django markdownx

Previously i already created isssue before: https://github.com/adi-/django-markdownx/issues/36, as the owner says:

There is no easy way to do it “quick”, I think. You could change JS script a bit to be able to send images. This should be a simple change.

And finally i got it with custome simple javascript code inside file of dummy.html

<script src="/static/suit/js/jquery-1.8.3.min.js"></script>

<form enctype="multipart/form-data" method="POST" action=".">{% csrf_token %}
  {{ form.image }}
</form>

<script>
    // CSRF code
    function getCookie(name) {
        var cookieValue = null;
        var i = 0;
        if (document.cookie && document.cookie !== '') {
            var cookies = document.cookie.split(';');
            for (i; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) === (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }

    // Uploading the image if on change.
    $('input[name=image]').on('change', function(evt) {
      evt.preventDefault();
      var formData = new FormData($('form').get(0));
      formData.append("csrfmiddlewaretoken", getCookie('csrftoken'));

      $.ajax({
          url: '/markdownx/upload/',
          type: 'POST',
          data: formData,
          async: true,
          cache: false,
          contentType: false,
          enctype: 'multipart/form-data',
          processData: false,
          beforeSend: function() {
              console.log("uploading...");
          },
          success: function (response) {
              console.log(response['image_code']);
          },
          error: function(response) {
              console.log("error", response);
          }
      });
      return false;
    });
</script>

Hope it usefull..

javascript tricks solution problem django templates ajax module

Your Answer

blog comments powered by Disqus