CropperJS : Images stored in server (Django)

Viewed 61

How to crop images stored in server? I'm not using a form since I'm not uploading the image. How can this be done?

Django View

from .models import Image

def main_view(request):
    
    obj = Image.objects.get(pk=1)
    context = {'obj':obj}
    return render(request, 'main.html',context)

HTML + CROPPERJS

<img src="{{obj.file.url}}" id="image" width="400px" >
{% csrf_token %}
<input type="button" id="confirm-btn" value="Start cropping" />


<script>

const csrf = document.getElementsByName('csrfmiddlewaretoken')
console.log(csrf)
const image = document.getElementById('image');
const confirmBtn = document.getElementById('confirm-btn')
console.log(image)


const cropper = new Cropper(image, {
  aspectRatio: NaN,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
    /*const canvas = cropper.getCroppedCanvas();
    console.log(canvas)*/

}

});


    confirmBtn.addEventListener('click', ()=>{
    cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        console.log(formData)
        formData.append('csrfmiddlewaretoken', csrf[0].value)
        formData.append('file', blob, 'my-image.png' );
        console.log(formData)

        $.ajax({
            method: 'POST',
            enctype: 'multipart/form-data',
            data: formData,
            processData: false,
            contentType: false,
            success() {
              console.log('Upload success');
            },
            error() {
              console.log('Upload error');
            },
          });
        }/*, 'image/png' */);

    });


Edit 1 :

I have arrived to the point where I get: Forbidden (CSRF token missing or incorrect.). There has to be an {% csrf_token %} associated to the post ... something's missing

Edit 2:

Not receiving a csrf error anymore. I receive the post but the image is not being loaded to the media file. Getting closer though.

1 Answers

It can be done. It is a matter of taking into account the csrf_token, knowing how to implement AJAX and receiving properly the post request and save it into a form. See ya!

const csrf = document.getElementsByName('csrfmiddlewaretoken')
console.log(csrf)
const image = document.getElementById('image');
const confirmBtn = document.getElementById('confirm-btn')
console.log(image)


const cropper = new Cropper(image, {
  aspectRatio: NaN,
  crop(event) {
    console.log(event.detail.x);
    console.log(event.detail.y);
    console.log(event.detail.width);
    console.log(event.detail.height);
    console.log(event.detail.rotate);
    console.log(event.detail.scaleX);
    console.log(event.detail.scaleY);
    /*const canvas = cropper.getCroppedCanvas();
    console.log(canvas)*/

}

});


confirmBtn.addEventListener('click', ()=>{
    cropper.getCroppedCanvas().toBlob((blob) => {
        const formData = new FormData();
        console.log(formData)
        formData.append('csrfmiddlewaretoken', csrf[0].value)
        formData.append('file', blob, 'my-image.png' );
        console.log(formData)

        $.ajax({
            method: 'POST',
            enctype: 'multipart/form-data',
            data: formData,
            processData: false,
            contentType: false,
            success() {
              console.log('Upload success');
            },
            error() {
              console.log('Upload error');
            },
          });
        }/*, 'image/png' */);

    });
Related