Add image replace API support

Please add support to replace an image when using callback for image insert or add a new image upload API.

Some plugins like summernote-image-attributes attempt to replace the image by using onImageUpload callback. However onImageUpload callback API doesn’t allow to pass additional arguments to properly complete image replace when upload is done.

One option is to allow to pass additional arguments to the onImageUpload that a replace plugin can configure to pass another callback or image source to replace. Another option is to add a dedicated onImageReplace callback. Though any other solution is welcome!

[mikefly95]

Let me know if I missed anything.

On Thu, Oct 3, 2019 at 5:19 AM Dennis Suitters [e-mail] wrote:

I just copied and pasted to fix the formatting to make it easier to read. I didn’t know that email responses aren’t supported for code formatting.

body += ’ <div class="tab-pane note-tab-pane fade in active" id="note-imageAttributes' + timestamp + '">’ + ’ <div class="note-form-group form-group note-group-imageAttributes-url">’ + ’ <label class="control-label note-form-label col-sm-3">’ + lang.imageAttributes.src + ‘</label>’ + ’ <div class="input-group note-input-group col-xs-12 col-sm-9">’ + ’ ’ + ‘<div class="row mt-2">’ + '<div class="col-md-8"> ’ + ‘’ + ‘</div>’ + '<div class="col-md-4"> ’ + ‘<button class="btn btn-primary btn-block note-imageAttributes-browse">Update</button>’ + ‘</div>’ + ‘</div>’ + ‘<div class="col-md-12 mt-2">’ +

$(document).on(‘click’, ‘.note-imageAttributes-browse’, function () { const fd = new FormData(); const file = document.getElementById(‘NewImage’).files[0]; fd.append(‘file’, file); $.ajax({ data: fd, type: “POST”, url: Your URL/Your Controller/uploadImage", cache: false, dataType: ‘json’, contentType: false, processData: false, success: function(url) { const imgLocation = YOUR URL + ‘/public/img/’ + url.imgURL; $(‘.note-imageAttributes-src’).val(imgLocation); } }); });

PHP Funtion

public function uploadImage() { if(empty($_FILES[‘file’])) { exit(); } $errorImgFile = “./img/img_upload_error.jpg”; $temp = explode(“.”, $_FILES[“file”][“name”]); $newfilename = round(microtime(true)) . ‘.’ . end($temp); $destinationFilePath = $_SERVER[‘DOCUMENT_ROOT’] . “/public/img/”.$newfilename ; if(!move_uploaded_file($_FILES[‘file’][‘tmp_name’], $destinationFilePath)){ $imgURL = [‘imgURL’ => $errorImgFile]; echo json_encode($imgURL); } else{ $imgURL = [‘imgURL’ => $newfilename]; echo json_encode($imgURL); } }

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/summernote/summernote/issues/2707?email_source=notifications&email_token=AKXM4IM2W25LWER4II4HXWDQMXBLNA5CNFSM4ERJDZU2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEAHXGSA#issuecomment-537883464, or mute the thread https://github.com/notifications/unsubscribe-auth/AKXM4IJZFLMPBZOUVQ4NPS3QMXBLNANCNFSM4ERJDZUQ .

[DiemenDesign]

I just copied and pasted to fix the formatting to make it easier to read. I didn’t know that email responses aren’t supported for code formatting.

body +=    '  <div class="tab-pane note-tab-pane fade in active" id="note-imageAttributes' + timestamp + '">' +
                   '    <div class="note-form-group form-group note-group-imageAttributes-url">' +
                   '      <label class="control-label note-form-label col-sm-3">' + lang.imageAttributes.src + '</label>' +
                   '      <div class="input-group note-input-group col-xs-12 col-sm-9">' +
                   '        <input class="note-imageAttributes-src  form-control note-form-control note-input" type="text" />' +
            '<div class="row mt-2">' +
            '<div class="col-md-8"> ' +
            '<input type="file" accept=".jpg, .JPG, .png, .PNG" name="NewImage" id="NewImage" class="form-control">' +
            '</div>' +
            '<div class="col-md-4"> ' +
            '<button class="btn btn-primary btn-block note-imageAttributes-browse">Update</button>' +
            '</div>' +
            '</div>' +
            '<div class="col-md-12 mt-2">' +


$(document).on('click', '.note-imageAttributes-browse', function ()
      {
        const fd = new FormData();
        const file = document.getElementById('NewImage').files[0];
        fd.append('file', file);
        $.ajax({
          data: fd,
          type: "POST",
          url: Your URL/Your Controller/uploadImage",
          cache: false,
          dataType: 'json',
          contentType: false,
          processData: false,
          success: function(url) {
            const imgLocation = YOUR URL + '/public/img/' + url.imgURL;
            $('.note-imageAttributes-src').val(imgLocation);
          }
        });

      });

PHP Funtion

public function uploadImage()
        {
            if(empty($_FILES['file']))
            {
                exit();
            }
            $errorImgFile = "./img/img_upload_error.jpg";
            $temp = explode(".", $_FILES["file"]["name"]);
            $newfilename = round(microtime(true)) . '.' . end($temp);
            $destinationFilePath = $_SERVER['DOCUMENT_ROOT'] . "/public/img/".$newfilename ;
            if(!move_uploaded_file($_FILES['file']['tmp_name'], $destinationFilePath)){
                $imgURL = ['imgURL' => $errorImgFile];
                echo json_encode($imgURL);
            }
            else{
                $imgURL = ['imgURL' => $newfilename];
                echo json_encode($imgURL);
            }
        }