Alpine single upload with croppie

alpine-single-upload-with-croppie.markdown

Alpine single upload with croppie

A Pen by Tina Hammar on CodePen.

License.

index.html

 <div class="flex items-center justify-center text-gray-500">
   <div class="w-full">
     <h3 class="mb-4 text-xl text-center text-white">TALL-stack form generator</h3>

     <!--the input wrapper-->
     <div class="w-full max-w-2xl p-8 mx-auto bg-white rounded-lg relative hover:shadow-outline-gray">

       <div x-data="imageData()" x-init="initCroppie()" class="active:shadow-sm active:border-blue-500">

         <!--show the input-->
         <div x-show="!showCroppie && !hasImage">

           <input type="file" name="fileinput" accept="image/*" class="absolute inset-0 z-50 m-0 p-0 w-full h-full outline-none opacity-0" x-ref="input" x-on:change="updatePreview()" x-on:dragover="$el.classList.add('active')" x-on:dragleave="$el.classList.remove('active')" x-on:drop="$el.classList.remove('active')">

           <div class=" flex flex-col space-y-2 items-center justify-center">
             <i class="fas fa-cloud-upload-alt fa-3x text-currentColor"></i>
             <label for="fileinput" class="cursor-pointer text-center uppercase text-bold py-2">
               Drag an image here or click in this area.
             </label>
             <button type="button" x-on:click="javascript:void(0)" class="flex items-center mx-auto py-2 px-4 text-white text-center font-medium border border-transparent rounded-md outline-none bg-teal-700">Select a file</button>
           </div>

         </div>

         <!--show the cropper-->
         <div x-show="showCroppie">
           <div class="mx-auto"><img src alt x-ref="croppie" class="display-block w-full"></div>
           <div class="py-2 flex justify-between items-center">
             <button type="button" class="bg-red-500 text-white p-2 rounded" x-on:click="clearPreview()">Delete</button>
             <button type="button" class="bg-teal-500 text-white p-2 rounded" x-on:click="saveCroppie()">Save</button>
           </div>
         </div>

         <!--show result -->
         <div x-show="!showCroppie && hasImage" class="relative w-full h-full bg-blue-300">
           <div class="z-10 absolute m-auto top-0 right-0 p-8">
             <button type="button" class="bg-red-500 text-white p-2 rounded" x-on:click="swap()">Swap</button>

             <button type="button" class="bg-teal-500 text-white p-2 rounded" x-on:click="edit()">Edit</button>
           </div>
           <div><img src alt x-ref="result" class="display-block"></div>

         </div>
       </div>
     </div>

     <div class="mt-4 text-center text-white">
       Livewire file upload with image cropper
     </div>
   </div>
 </div>

script.js

function imageData() {
  return {
    showCroppie: false,
    hasImage: false,
    originalSrc: "",
    croppie: {},

    updatePreview() {
      var reader,
        files = this.$refs.input.files;

      reader = new FileReader();

      reader.onload = (e) => {
        this.showCroppie = true;
        this.originalSrc = e.target.result;
        this.bindCroppie(e.target.result);
      };

      reader.readAsDataURL(files[0]);
    },
    initCroppie() {
      this.croppie = new Croppie(this.$refs.croppie, {
        viewport: { width: 420, height: 340, type: "square" }, //circle
        boundary: { width: 420, height: 340 }, //default boundary container
        showZoomer: true,
        enableResize: false
      });
    },
    clearPreview() {
      this.$refs.input.value = null;
      this.showCroppie = false;
    },
    swap() {
      this.$refs.input.value = null;
      this.showCroppie = false;
      this.hasImage = false;
      this.$refs.result.src = "";
      //update som kind of array
    },
    edit() {
      this.$refs.input.value = null;
      this.showCroppie = true;
      this.hasImage = false;
      this.$refs.result.src = "";
      this.bindCroppie(this.originalSrc); //this.$refs.result.src //or some array value
      //update som kind of array
    },
    saveCroppie() {
      this.croppie
        .result({
          type: "base64",
          size: "original"
        })
        .then((croppedImage) => {
          this.$refs.result.src = croppedImage;
          this.showCroppie = false;
          this.hasImage = true;
          //update some kind of array
        });
    },
    bindCroppie(src) {
      setTimeout(() => {
        //avoid problems with croppie container not being visible when binding
        this.croppie.bind({
          url: src
        });
      }, 200);
    }
  };
}

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/alpinejs/2.6.0/alpine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>

style.scss

body {
  padding: 10rem;
  background-color: #00283f;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.7.3/tailwind.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" rel="stylesheet" />