Make image croppie before sending to server

1

It had a simple code that was just:

<form action="upload.php" method="post" enctype="multipart/form-data">
    <input type="text" name="description" />
    <input type="file" name="file" />
    <input type="submit" value="Enviar" />
</form>

It sent me a post with a file that I used on my server, however it was necessary to treat this image before sending it to the server.

I created the following code:

var Demo = (function() {

  function popupResult(result) {
    var html;
    if (result.html) {
      jQuery("#cropped").attr("src", html);
    }
    if (result.src) {
      jQuery("#cropped").attr("src", result.src);
    }

  }

  function demoUpload() {
    var $uploadCrop;

    function readFile(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          jQuery('.upload-demo').addClass('ready');
          $uploadCrop.croppie('bind', {
            url: e.target.result
          }).then(function() {
            console.log('jQuery bind complete');
          });

        }

        reader.readAsDataURL(input.files[0]);
      } else {
        alert("Sorry - you're browser doesn't support the FileReader API");
      }
    }

    $uploadCrop = jQuery('#upload-demo').croppie({
      // url: 'https://httpsimage.com/lock.png',
      viewport: {
        width: 100,
        height: 100,
        type: 'circle'
      },
      enableExif: true
    });

    jQuery('#upload').on('change', function() {
      readFile(this);
    });
    jQuery('.upload-result').on('click', function(ev) {
      $uploadCrop.croppie('result', {
        type: 'canvas',
        size: 'viewport'
      }).then(function(resp) {
        popupResult({
          src: resp
        });
      });
    });
  }

  function init() {
    demoUpload();
  }

  return {
    init: init
  };
})();

Demo.init();
input[type="file"] {
  cursor: pointer;
}
button:focus {
  outline: 0;
}
.file-btn {
  position: relative;
}
.file-btn input[type="file"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.upload-demo .upload-demo-wrap,
.upload-demo .upload-result,
.upload-demo.ready .upload-msg {
  display: none;
}
.upload-demo.ready .upload-demo-wrap {
  display: block;
}
.upload-demo.ready .upload-result {
  display: inline-block;
}
.upload-demo-wrap {
  width: 300px;
  height: 300px;
  margin: 0 auto;
}
.upload-msg {
  text-align: center;
  padding: 50px;
  font-size: 22px;
  color: #aaa;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  border: 1px solid #aaa;
}
<link type="text/css" rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.0/croppie.css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js"></script><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.4.0/croppie.js"></script><formaction="upload.php" method="post" enctype="multipart/form-data">
  <!--
            <input type="text" name="description" />
			<input type="file" name="file" />
            -->
  <img id="cropped" name="cropped" />
  <div class="demo-wrap upload-demo">
    <div class="container">
      <div class="grid">
        <div class="actions">
          <a class="btn file-btn">
            <span>Selecionar Imagem</span>
            <input type="file" id="upload" name="upload" value="Choose a file" accept="image/*" />
          </a>
          <button class="upload-result">Cortar imagem</button>
        </div>
        <div class="upload-msg">
          Selecione uma imagem para cortar
        </div>
        <div class="upload-demo-wrap">
          <div id="upload-demo"></div>
        </div>
      </div>
    </div>
    <input type="submit" value="Enviar" />
  </div>
</form>

In the <img id="cropped" name="cropped" /> element I get a base64 of type:

<img id="cropped" name="cropped" src="data:image/png;base64,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">

Now I need to know how to send this image to the base64 pro server and work with it to be in the form of a input type file

    
asked by anonymous 26.12.2016 / 14:20

1 answer

2

You can include a hidden field in your form, and update it automatically:

<input type="hidden" name="imagem" id="imagem" value="">

And in JS update the field automatically:

if (result.src) {
  jQuery("#cropped").attr("src", result.src);
  jQuery("#imagem").attr("value", result.src);
}

In this way, when sending the form, the result will be in the "image" field.

Tip: If you are to store the image in a DB, it is probably best to decode the base64 and store the original data in a BLOB, and the mime-type correct in a separate field, or better yet, convert to image file .

Saving data to base64 almost always indicates lack of technique.

    
26.12.2016 / 14:42