SHARE
TWEET

Untitled

a guest Jun 25th, 2019 51 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <label type="button" class="btn btn-primary" style="margin-bottom:0px;" for="input2-<cfoutput>#ProdPhotoID#</cfoutput>" title="Upload image file">
  2. <input type="file" class="sr-only" id="input2-<cfoutput>#ProdPhotoID#</cfoutput>" name="image2-<cfoutput>#ProdPhotoID#</cfoutput>" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
  3.       <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Replace this Image">
  4.       <span class="fa fa-upload"></span> Upload and Crop a new Midsize Image
  5. </span>
  6. </label>
  7.  
  8.  
  9. <!-- Modal -->
  10. <div class="modal fade" id="midsizeImageModal-<cfoutput>#ProdPhotoID#</cfoutput>" tabindex="-1" role="dialog" aria-labelledby="midsizeImageModalLabel" aria-hidden="true">
  11.   <div class="modal-dialog" role="document">
  12.     <div class="modal-content">
  13.       <div class="modal-header">
  14.         <h5 class="modal-title" id="midsizeImageModalLabel">Midsize Image</h5>
  15.         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
  16.           <span aria-hidden="true">&times;</span>
  17.         </button>
  18.       </div>
  19.       <div class="modal-body">
  20.          <img id="image2-<cfoutput>#ProdPhotoID#</cfoutput>" src="../../images/products/midsize/<cfoutput>#ProdPhotoMidsize#</cfoutput>">
  21.       </div>
  22.       <div class="modal-footer">
  23.         <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
  24.  
  25.         <button type="button" class="btn btn-primary" id="close1_open2">Upload a Replacement</button>
  26.  
  27.         <label class="btn btn-primary btn-upload" for="input2-<cfoutput>#ProdPhotoID#</cfoutput>" title="Upload image file">
  28.            <input type="file" class="sr-only"  id="" name="image2-<cfoutput>#ProdPhotoID#</cfoutput>" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff">
  29.             <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="Replace this Image">
  30.               <span class="fa fa-upload">Upload and Crop a new Midsize Image</span>
  31.             </span>
  32.           </label>
  33.  
  34.       </div>
  35.     </div>
  36.   </div>
  37. </div>
  38.  
  39.  
  40.  
  41.  
  42.  
  43. <script>
  44.  window.addEventListener('DOMContentLoaded', function () {
  45.       var midsize = document.getElementById('image2-<cfoutput>#ProdPhotoID#</cfoutput>');
  46.       var image = document.getElementById('image2-<cfoutput>#ProdPhotoID#</cfoutput>');
  47.       var input = document.getElementById('input2-<cfoutput>#ProdPhotoID#</cfoutput>');
  48.       var $progress = $('.progress');
  49.       var $progressBar = $('.progress-bar');
  50.       var $alert = $('.alert');
  51.       var $modal = $('#modal2-<cfoutput>#ProdPhotoID#</cfoutput>');
  52.       var cropper;
  53.  
  54.       $('[data-toggle="tooltip"]').tooltip();
  55.  
  56.       input.addEventListener('change', function (e) {
  57.         var files = e.target.files;
  58.         var done = function (url) {
  59.           input.value = '';
  60.           image.src = url;
  61.           $alert.hide();
  62.           $modal.modal('show');
  63.         };
  64.         var reader;
  65.         var file;
  66.         var url;
  67.  
  68.         if (files && files.length > 0) {
  69.           file = files[0];
  70.             $("#midsizeImageModal-<cfoutput>#ProdPhotoID#</cfoutput>").modal('hide');  <!-- close 1st window if new image selected to crop-->
  71.           if (URL) {
  72.             done(URL.createObjectURL(file));
  73.           } else if (FileReader) {
  74.             reader = new FileReader();
  75.             reader.onload = function (e) {
  76.               done(reader.result);
  77.             };
  78.             reader.readAsDataURL(file);
  79.           }
  80.         }
  81.       });
  82.  
  83.       $modal.on('shown.bs.modal', function () {
  84.         cropper = new Cropper(image, {
  85.           aspectRatio: 1,
  86.           viewMode: 3,
  87.         });
  88.       }).on('hidden.bs.modal', function () {
  89.         cropper.destroy();
  90.         cropper = null;
  91.  
  92.       });
  93.  
  94.       document.getElementById('crop2-<cfoutput>#ProdPhotoID#</cfoutput>').addEventListener('click', function () {
  95.         var initialmidsizeURL;
  96.         var canvas;
  97.  
  98.         $modal.modal('hide');
  99.  
  100.         if (cropper) {
  101.           canvas = cropper.getCroppedCanvas({
  102.             width: 560,
  103.             height: 460,
  104.           });
  105.           initialmidsizeURL = midsize.src;
  106.           midsize.src = canvas.toDataURL();
  107.           $progress.show();
  108.           $alert.removeClass('alert-success alert-warning');
  109.           canvas.toBlob(function (blob) {
  110.             var formData = new FormData();
  111.  
  112.             formData.append('midsize', blob, 'midsize.jpg');
  113.             formData.append('imageName', "<cfoutput>#imgname2#</cfoutput>");
  114.             formData.append('prodID', "<cfoutput>#URL.prodid#</cfoutput>");
  115.             formData.append('photoID', "<cfoutput>#ProdPhotoID#</cfoutput>");
  116.  
  117.             $.ajax('inc/_image_midsize_ajax.cfm', {
  118.               method: 'POST',
  119.               data: formData,      
  120.               processData: false,
  121.               contentType: false,
  122.  
  123.               xhr: function () {
  124.                 var xhr = new XMLHttpRequest();
  125.  
  126.                 xhr.upload.onprogress = function (e) {
  127.                   var percent = '0';
  128.                   var percentage = '0%';
  129.  
  130.                   if (e.lengthComputable) {
  131.                     percent = Math.round((e.loaded / e.total) * 100);
  132.                     percentage = percent + '%';
  133.                     $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
  134.                   }
  135.                 };
  136.  
  137.                 return xhr;
  138.               },
  139.  
  140.               success: function () {
  141.                 $alert.show().addClass('alert-success').text('Upload success');
  142.               },
  143.  
  144.               error: function () {
  145.                 midsize.src = initialmidsizeURL;
  146.                 $alert.show().addClass('alert-warning').text('Upload error');
  147.               },
  148.  
  149.               complete: function () {
  150.                 $progress.hide();
  151.               },
  152.  
  153.  
  154.  
  155.  
  156.  
  157.             });
  158.           });
  159.         }
  160.       });
  161.     });
  162. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top