Croppie result to send to web server

Question

Can someone please help me with this? I'm not that versed at JavaScript and I've read the documentation over and over plus reviewed as many posts here as well as googled the problem. I'm not able to get my cropped result and send it to my web server. Here's my code.

HTML:

<form action="" method="post" enctype="multipart/form-data" id="formTest">
          <div id="modal">
            <div id="main-cropper"></div>
            <a class="button actionUpload">
              <span>Upload</span>
              <input type="file" id="upload" value="Choose Image" 
                    accept="image/*" name="imgf">
            </a>
            <button class="actionDone">Done</button>
            <button class="actionCancel">Cancel</button>
          </div>
      </form>

JS:

<script>

var basic = $('#main-cropper').croppie({
    viewport: { width: 300, height: 400, type: 'square' },
    boundary: { width: 700, height: 500 },
    showZoomer: true
});

function readFile(input) {
  if (input.files && input.files[0]) {
    var reader = new FileReader();

    reader.onload = function (e) {
      $('#main-cropper').croppie('bind', {
        url: e.target.result
      });
      $('.actionDone').toggle();
      $('.actionUpload').toggle();
    }

    reader.readAsDataURL(input.files[0]);
  }
}

$('.actionUpload input').on('change', function () { readFile(this); });
$('.actionDone').on('click', function(){


    $('#main-cropper').croppie('result', {
        type: 'canvas',
        size: 'viewport'
    }).then(function (resp) {
        $('#formTest').find('name=["imgf"]').val('src', resp);
    });

  $('.actionDone').toggle();
  $('.actionUpload').toggle();
});

</script>

score 3 · Answer 1 · answered Dec 01 '18 at 02:43

3

I did some additional research and found a solution through using AJAX. I tried it and it works. Need to do some clean up on the CSS but that's nothing major. Here is some of the modified code:

partial JavaScript:

$('.crop_image').click(function(event){
    image_crop.croppie('result', {
      type: 'canvas',
      size: 'viewport'
    }).then(function(response){
      $.ajax({
        url:"upload.php",
        type: "POST",
        data:{"image": response},
        success:function(data)
        {
          $('#uploadimageModal').modal('hide');
          $('#uploaded_image').html(data);
        }
      });
    })
  });

AJAX:

if(isset($_POST["image"]))
{
    $data = $_POST["image"];

    $image_array_1 = explode(";", $data);

    $image_array_2 = explode(",", $image_array_1[1]);

    $data = base64_decode($image_array_2[1]);

    $imageName = time() . '.png';

    file_put_contents("pg/$imageName", $data);

        echo '<img src="'.$imageName.'" class="img-thumbnail" />';

}

https://www.webslesson.info/2018/03/image-crop-and-upload-using-jquery-with-php-ajax.html

answered Dec 01 '18 at 02:43

SiriusGD

95
1
11

I'm sorry. I wasn't ignoring you. I just came upon your post. I'm not familiar with "Django" but if it's close to Php than I would look at the portion of code I included underneath the "Ajax:" tag. I had to use Javascript for all the preparation of the image and then send it to a php file (through AJAX) for uploading to the web server. As you can see I had to prep the image file first then sent it to the server via the "file_put_contents". If you can explain in more detail where you are having an issue I'll try my best to help. – SiriusGD Dec 31 '18 at 18:00
okay, Actually Django receive files data by request.FILES, which is a dictionary. So i receive image data by request.FILES['image'] , where image is the name of the input file. Croppie result returns image data in base64 like this data:image/png;base64,afdafasd... As it is not string so in server it raise MultiValueDictKeyError. So how can i send the image data to the server as string or something ..? Thanks for your time @SiriusGD – squal Dec 31 '18 at 20:01
1

Again, I'm not familiar with Django but if I understand your question correctly... Do you see under the "Ajax:" label (which is really php code) I had to parse (explode) out the information from the response into a couple arrays. Once I separated it into the second array I used the base64_decode function to generate the $data string. I wouldn't know if you have the same sort of function available to you. So the best I can say is look at those three lines of code and see if you can't do the same thing. Sorry I can't be better assistance. I'm still learning this myself. It works for me. – SiriusGD Jan 02 '19 at 06:24

Croppie result to send to web server

1 Answers1