title: replace() in cropper js
body: <p>My project is about saving the cropped image and show it in the view.</p>
  
  <p>in my form when i cropped the image it works, but when i want to change the image so i crop it again and save. it create two rows with same image.
  and when i change the image 3 times it create 3 rows with the same image and so on.</p>
  
  <p>there is method called replace() that i have to use but i dont know how to use it.  </p>
  
  <p>this is my code</p>
  
  <pre><code> window.addEventListener('DOMContentLoaded', function () {
          var avatar = document.getElementById('avatar');
          var image = document.getElementById('image');
          var input = document.getElementById('input');
          var $progress = $('.progress');
          var $progressBar = $('.progress-bar');
          var $alert = $('.alert');
          var $modal = $('#modal');
          var cropper;
  
  
          var title = $('#title');
          var description = $('#description');
          var arabic_title = $('#arabic_title');
          var arabic_description = $('#arabic_description');
  
          $('[data-toggle="tooltip"]').tooltip();
  
          input.addEventListener('change', function (e) {
              var files = e.target.files;
              var done = function (url) {
                  input.value = '';
                  image.src = url;
               //  $alert.hide();
                  $modal.modal('show');
              };
              var reader;
              var file;
              var url;
  
              if (files &amp;&amp; files.length &gt; 0) {
                  file = files[0];
  
                  if (FileReader) {
                      reader = new FileReader();
                      reader.onload = function (e) {
                          done(reader.result);
                          console.log('ok2');
                      };
                      reader.readAsDataURL(file);
                      console.log('ok3');
  
  
                  }
              }
  
  
          });
  
  
          $modal.on('shown.bs.modal', function () {
              cropper = new Cropper(image, {
                  aspectRatio: 1.7,
                  viewMode: 3,
              });
  
          }).on('hidden.bs.modal', function () {
              cropper.destroy();
              cropper = null;
          });
  
          document.getElementById('crop').addEventListener('click', function () {
              var initialAvatarURL;
              var canvas;
  
              $modal.modal('hide');
  
              if (cropper) {
                  canvas = cropper.getCroppedCanvas({
                      width: 400,
                      height: 400,
                  });
  
                  initialAvatarURL = avatar.src;
                  avatar.src = canvas.toDataURL();
  
                  $progress.show();
                  $alert.removeClass('alert-success alert-warning');
  
                  document.getElementById('save').addEventListener('click', function () {
  
                      canvas.toBlob(function (blob) {
                          var formData = new FormData();
  
                          formData.append('avatar', blob);
                          formData.append('title', title.val());
                          formData.append('description', description.val());
                          formData.append('arabic_title', arabic_title.val());
                          formData.append('arabic_description', arabic_description.val());
  
  
  
                          if (title.val() !== '' &amp;&amp; description.val() !== '' &amp;&amp; arabic_title.val() !== '' &amp;&amp; arabic_description.val() !== '') {
  
  
                          for (let pair of formData.entries()) {
                              console.log(pair[0] + ', ' + pair[1]);
  
                          }
                              $.ajaxSetup({
                                  headers: {
                                      'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                                  }
                              });
  
                              $.ajax("{{url('admin/services')}}", {
                                  method: 'POST',
                                  data: formData,
                                  processData: false,
                                  contentType: false,
  
                                  xhr: function () {
                                      var xhr = new XMLHttpRequest();
  
                                      xhr.upload.onprogress = function (e) {
                                          var percent = '0';
                                          var percentage = '0%';
  
                                          if (e.lengthComputable) {
                                              percent = Math.round((e.loaded / e.total) * 100);
                                              percentage = percent + '%';
                                              $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
                                          }
                                      };
  
                                      return xhr;
                                  },
  
                                  success: function (data) {
                                      $alert.show().addClass('alert-success').text('Upload success');
                                      console.log(data);
  
                                  },
  
                                  error: function (error) {
                                      avatar.src = initialAvatarURL;
                                      $alert.show().addClass('alert-warning').text('Upload error');
                                      console.log(error);
                                  },
  
                                  complete: function () {
                                      $progress.hide();
                                  },
                              });
                          }
  
  
                      });
  
  
                  });
              }
          });
      });
  </code></pre>