Summernote Save Upload Images on Server #php #js

Summernote Upload Images on Client Side.js

   $('#textarea').summernote({
	    	height: 250,   //set editable area's height
	    	callbacks: { // it must be like this in new version
		    	onImageUpload: function(files, editor, $editable) {
		            sendFile(files[0],editor,$editable);
		        }
		    }
		});
		
		function sendFile(file,editor,welEditable) {
	      data = new FormData();
		    data.append("file", file);

		    $.ajax({
		        url: 'ajax/upload_images.php', // path to PHP upload controller
		        data: data,
		        cache: false,
		        contentType: false,
		        processData: false,
		        type: 'POST',
		        success: function(data){
		            console.log(data);
		            $('#text_content_2').summernote("editor.insertImage", data, 'filename');
		        },
		        error: function(jqXHR, textStatus, errorThrown) {
		            console.log(textStatus+" "+errorThrown);
		        }
		    });
	    }

Summernote Upload Images on Server Side.php

<?php    
    $allowed = array('png', 'jpg', 'jpeg', 'gif');  /// allowed images file extensions

    if ( isset($_FILES['file']) && $_FILES['file']['error'] == 0 ) {
        $extension = pathinfo($_FILES['file']['name'], PATHINFO_EXTENSION);

        if ( !in_array(strtolower($extension), $allowed) ) {
            echo '{"status":"error"}';
            exit;
        }

        if ( move_uploaded_file($_FILES['file']['tmp_name'],'../../content/images/'.$_FILES['file']['name']) ) { // path tmp_file + path folder upload
            echo '../../content/images/'.$_FILES['file']['name']; // this display img source in text editor on client side
            exit;
        }
    }
    echo '{"status":"error"}';
    exit;