0

I have been working on a project, using Summernote. My project is like a blog system and I need to upload contents and images.

I have checked the other posts here and other places and managed to insert images to the file with ajax where I want to save the images. However, when I am editing, an image is there but once I click "update button" (submit button in a form), the images won't be there anymore.

I also check the inspect and resource says

Request URL: http://localhost/cms/admin/includes/images/42a0e188f5033bc65bf8d78622277c4e.JPG

This is the right path but after updating, I get a message like

Request URL: http://localhost/%22includes/images/42a0e188f5033bc65bf8d78622277c4e.JPG/%22

Also status code says

Status Code: 403 Forbidden

Here is my code

$('#summernote').summernote({
  callbacks: {
      onImageUpload: function(files) {
          for(let i=0; i < files.length; i++) {
              $.upload(files[i]);
          }
      }
  },
  height: 300,
});

$.upload = function (file) {
  let out = new FormData();
  out.append('file', file, file.name);

  $.ajax({
      method: 'POST',
      url: './includes/editor-upload.php',
      contentType: false,
      cache: false,
      processData: false,
      data: out,
      success: function(url) {
        $('#summernote').summernote("insertImage", url, 'filename');
      },
      error: function (jqXHR, textStatus, errorThrown) {
          console.error(textStatus + " " + errorThrown);
      }
  });
};

And this is my php code (editor-upload.php)

if ($_FILES['file']['name']) {
        if (!$_FILES['file']['error']) {
           $name = md5(rand(100, 200));
           $ext = explode('.', $_FILES['file']['name']);
           $filename = $name . '.' . $ext[1];
           $destination = 'images/' . $filename; //change this directory
           $location = $_FILES["file"]["tmp_name"];
           move_uploaded_file($location, $destination);
           echo 'includes/images/' . $filename;//change this URL
        }
        else
        {
         echo  $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['file']['error'];
        }
 }

Insert uploaded image to summernote editor Summernote image upload Summernote 0.8.12 Image Upload And Delete

I have tried these but nothing worked for me. I have of course Summernote js and css file and am using Summernote 0.8.18

I am sure I am doing something wrong but I can't figure this out yet.

I am hoping somebody can help me out.

user18707487
  • 1

1 Answers1

0

If the images folder is inside of the includes folder, change the following line:

$destination = 'images/' . $filename;

to

$destination = './includes/images/' . $filename;

Next, enter the full URL name and the full path to the image instead of echo 'includes/images/' . $filename;

Also, the editor-upload.php file in your Ajax upload script may be causing the 403 errors. if the upload file is not in the same folder as your form and index.php page, it can prove problematic.

Try moving the file to the same folder as your form with the summer note editor, and enter the file in your Ajax script as 'editor-upload.php'

Abdulla Nilam
  • 36,589
  • 17
  • 64
  • 85
jabari
  • 1
  • 2
  • Thanks for the answer. I actually found the problem. I was "escaping" the textarea, that caused this issue and won't let me show any images. I had to use prepared statement, instead. – user18707487 Aug 09 '22 at 20:20