How i does custom html choose image upload?

[agusmakmun]

This markdownx use drag & drop to upload the image. but how i can implement it with html choose image? example:

{% extends 'base.html' %}

{% block content %}
    <form role="form" method="POST" action="">{% csrf_token %}
        {{ form.as_p }}
        <input type="file" class="upload-img" accept="image/*" placeholder="Choose image or drag & drop...">
    </form>
    {{ form.media }}

    <script>
        $('.upload-img').on('change', function() {
            //what i can do here?
        });
    </script>
{% endblock %}

Another problem, how i can implement it at django admin page?

[adi-]

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.

[agusmakmun]

How i can do it? can u give me an example?

[agusmakmun]

Finally i got it.. 😄

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>