~NAXC~

File Content: `editmainnews.php`

<?php 
ob_start();
?>
<?php 
	session_start(); 

	if (!isset($_SESSION['username'])) {
		$_SESSION['msg'] = "You must log in first";
		header('location: login.php');
	}

	if (isset($_GET['logout'])) {
		session_destroy();
		unset($_SESSION['username']);
		header("location: login.php");
	}

?>

<?php include "assets/includes/functions.php";?>


<?php include "assets/includes/header.php";?>
<style type="text/css">
    h2 {
    text-align: center;
    }
    .img_preview img{
    border: #E0E0E0 1px solid;
    }
    #selectImage {
        display: inline-block;
        border: #3d843e 1px solid;
        position: relative;
        background-color: #48944b;
        font-family: Arial, Helvetica, sans-serif;
        color: #FFF;
        text-align: center;
        padding: 10px 50px;
    }
    #imgChange input[type="file"] {
        bottom: 0;
        cursor: pointer;
        height: 100%;
        left: 0;
        margin: 0;
        opacity: 0;
        padding: 0;
        position: absolute;
        width: 100%;
        z-index: 0;
    }
    .progress-bar {
        font-family: Arial;
        font-size: 0.95em;
        padding: 3px 0px 0px 0px;
        width: 200px;
        margin: 10px auto;
        border: #E0E0E0 1px solid;
    }
    .progress-bar .bar {
        background-color: #FFA500;
        width: 0%;
        height: 4px;
    }
    .progress-bar .percent {
        display: inline-block;
        text-align: center;
        width: 100%;
    }
</style>
<style>
        input[type="file"] {
			display: block;
			}
			.imageThumb {
			max-height: 75px;
			border: 2px solid;
			padding: 1px;
			cursor: pointer;
			}
			.pip {
			display: inline-block;
			margin: 10px 10px 0 0;
			}
			.remove {
			display: block;
			background: #444;
			border: 1px solid black;
			color: white;
			text-align: center;
			cursor: pointer;
			}
			.remove:hover {
			background: white;
			color: black;
			}
    	</style>
<!-- Page content start -->
<div class="page-contentbar">

<!--left navigation start-->
<?php include "assets/includes/sidebar.php";?>
<!--left navigation end-->

<!-- START PAGE CONTENT -->

<div id="page-right-content">
<div class="container">
<div class="row">
   <div class="col-md-7"><br>
        <!-- =============================== -->
        <div class="panel panel-color panel-primary">
        <div class="panel-heading">
        <h3 class="panel-title">Add Main News   [ <span class="required" style="text-align: right"> *</span>= Required ]</h3>
        </div>

        <div class="panel-body" >
        <div class="container" id="addmember">
            <input type="hidden" id="imgw" value="" >
            <input type="hidden" id="imgh" value="" >
            <p class="statusMsg"></p>
            <form  enctype="multipart/form-data"  id="add_name" method="post">

                <?php 
                if (isset($_GET['edit'])) {
                $the_cat_id = $_GET['edit'];
                $query = "select * from mainnews WHERE id = {$the_cat_id}";
                $select_edits = mysqli_query($connection,$query);
                while($row1 = mysqli_fetch_assoc($select_edits))
                {
                $post_rid = $row1['id'];
                $post_cat = $row1['section'];
                $post_sub = $row1['status'];
                $post_heading = $row1['heading'];
                $post_pic = $row1['newspic'];
                $post_content = $row1['newscontent'];
                $post_main = $row1['maincategory']; 
                $post_picmedium = $row1['picthumbnail'];
                $post_picsmall = $row1['picthumbnailsmall'];
                $post_slug = $row1['slug'];

                ?>
                <input type="hidden" id="imgsmall" name="imgsmall" value="<?php  echo $post_picsmall; ?>">
                <input type="hidden" id="imgmedium" name="imgmedium" value="<?php  echo $post_picmedium; ?>">
                <input type="hidden" id="imglarge" name="imglarge" value="<?php  echo $post_pic; ?>">      
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="userName"> Sections in Home Page<span class="text-danger"></span></label>
                            <select name="PostSection" class="form-control" id="PostSection" required="">
                                <option value="<?php  echo $post_cat; ?>"><?php  echo $post_cat; ?></option>
                                <option value="Entertainments">Entertainments,Sports,Auto & Travel</option>
                                <option value="Science">Science & Tech</option>
                                <option value="Chuttuvattam">Chuttuvattam</option>
                            </select>
                        </div> 
                    </div>
                </div>
                <div class="form-group" id="enter">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="userName"> Main Category<span class="text-danger"></span></label>
                            <select name="PostCategoryId" class="form-control" id="PostCategoryId" required="">
                                <option value="<?php  echo $post_main; ?>"><?php  echo $post_main; ?></option>
                                <option value="Main News">Main News</option>
                                <option value="Sub News">Sub News</option>
                            </select>
                        </div> 
                    </div>
                </div>


                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="PostTitle<span Class=required>*</span>" class="col-md-3 control-label">Title<span Class=required  style='color:#F00;'> * </span></label>  
                            <input name="PostTitle" class="form-control" maxlength="256" type="text" id="PostTitle" required=""  value="<?php  echo $post_heading; ?>"/>
                        </div> 
                    </div>
                </div>
                <div class="form-group">
                            <div class="row">
                                <div class="col-md-12">
                                    <label for="PostTitle<span Class=required>*</span>" class="col-md-5 control-label">Keywords / URL<span Class=required  style='color:#F00;'> * </span></label>  
                                    
                                    <input class="form-control" type="text" name="pslug" placeholder="URL / slug / Keyword" id="pslug" value="<?php  echo $post_slug; ?>"  oninput="myFunction();"  onfocusout="slugcheck();">
                                    <input class="form-control" type="text" name="slugstatus" id="slugstatus" readonly >
  
                                    <!-- onkeypress="slugcheck();" -->
                                </div> 
                            </div>
                        </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <!-- <label for="PostImage<spanClass=required></span>" id="l1" class="col-md-3 control-label">Image<span Class=required  style='color:#F00;'> * </span>[ size: 368 x 300 ]</label> 
                            <label for="PostImage<spanClass=required></span>" id="l2" class="col-md-3 control-label" style="display: none;">Image<span Class=required  style='color:#F00;'> * </span>[ size: 100 x 80 ]</label>

                            <input type="file" name="file" class="form-control" id="PostImage"  onchange="checkFileDetails()" />
                            </div>
                            <div class="col-md-4"> -->
                            <img class="img_thumbnail" src="uploads/medium/main/<?php echo $post_pic; ?>" width="300px" height="200px">
                        </div> 
                    </div>
                </div>
                <div class="form-group">
                    <div class="row">
                        <div class="col-md-12">
                            <label for="PostContent<spanClass=required>*</span>" class="col-md-3 control-label">Content<span Class=required> * </span></label>
                                 <br> <span > [ Use the ' www.example.com ' or ' https://www.example.com ' format for giving website links.] </span>

                            <textarea name="PostContent" class="form-control" rows="12" cols="30" id="PostContent" required=""><?php  echo $post_content; ?></textarea>
                        </div>
                    </div>
                </div>
                <!-- ================================================= -->
                    <div class="form-group">
                            <div class="row">
                                <h6 class="txt-dark capitalize-font">Upload News Images here</h6>
                                <span>click here to upload pictures [ Upload atleast 2 photos of your news ]</span>
                                <div class="col-md-12">
                                    <!-- =============================== -->
                                    <input class="field form-control" type="file" name='files[]' id="files"  accept="image/x-png,image/gif,image/jpeg" multiple >
                                    <div id='preview'></div>
                                    <!-- ============================================= -->
                                </div>
                            </div>
                    </div>
                    <!-- ============================================= -->

                <div class="form-group">
                    <div class="row">
                        <div  class="col-md-12">
                            <label for="userName">Status<span class="text-danger"></span></label>
                            <select class="form-control select2" name="istatus" id="istatus" style="font-family:inherit;width:100%; height:50px; float:left; padding:5px; line-height:40px; text-align:left;" required="">
                                <option value="<?php  echo $post_sub; ?>"><?php  echo $post_sub; ?></option>
                                <option value="Active">Active</option>
                                <option value="Inactive">Inactive</option>
                            </select> 
                        </div>
                    </div>
                </div> 


                <div class="form-group text-right m-b-0">
                    <input type="submit" name="submit" class="btn btn-primary submitBtn" value="Submit"/>
                    <button type="button" name="cancel" id="cancel" class="btn btn-default waves-effect m-l-5">
                    Cancel
                    </button>
                </div>
                <?php
                if(isset($_POST['submit']))
                {
                $section=$_POST["PostSection"];
                $category=$_POST["PostCategoryId"];
                $PostTitle=$_POST["PostTitle"];
                $PostContent=$_POST["PostContent"];
                 // =========================
                                        //  $output3 =nl2br($PostContent);
                                        //  $string = linkify($output3);
                                        //  $fstring=makeClickableLinks($string);
                                        //   $PostContent = $fstring;
                                    
                $status=$_POST["istatus"];
                date_default_timezone_set ("Asia/Calcutta");
                $postdate= date("M d,Y h:i:s a");
                $PostImagelarge=$_POST["imglarge"];
                $PostImagemedium=$_POST["imgmedium"];
                $PostImagesmall=$_POST["imgsmall"];
                $Postslug="";
                if (isset($_POST["pslug"])){
                $Postslug=$_POST["pslug"];}

                // if ($PostImage == "" || empty($PostImage))
                // {
                // $PostImage= $post_pic;
                // } {
                // $target = "assets/images/mainnews/".basename($_FILES['file']['name']);
                // move_uploaded_file($_FILES['file']['tmp_name'], $target);   
                // }
                $sql="update mainnews set section='". mysqli_real_escape_string($connection,$section)."',status='" . mysqli_real_escape_string($connection,$status)."',
                heading='" . mysqli_real_escape_string($connection,$PostTitle)."',newscontent='" . mysqli_real_escape_string($connection,$PostContent)."',
                newspic='" . mysqli_real_escape_string($connection,$PostImagelarge)."',maincategory='" . mysqli_real_escape_string($connection,$category)."',
                picthumbnail='" . mysqli_real_escape_string($connection,$PostImagemedium)."',picthumbnailsmall='" . mysqli_real_escape_string($connection,$PostImagesmall)."',
                slug='" . mysqli_real_escape_string($connection,$Postslug)."' WHERE id = {$the_cat_id}";


                if ($connection->query($sql) === TRUE) {
                echo "New record created successfully";
                header("Location: mainnews.php");
                } else {
                echo "Error: " . $sql . "<br>" . $connection->error;
                }
                  // =======================================
$upload_dir = 'uploads/extranewspics/' ;
$allowed_types = array('jpg', 'png', 'jpeg', 'gif');
$maxsize = 2 * 1024 * 1024;

foreach ($_FILES['files']['name'] as $key => $value) {
     if(!empty($_FILES['files']['tmp_name'][$key])) {

    $file_tmpname = $_FILES['files']['tmp_name'][$key];
    $file_name = $_FILES['files']['name'][$key];
    $file_size = $_FILES['files']['size'][$key];
    $file_ext = pathinfo($file_name, PATHINFO_EXTENSION);
    $file = pathinfo($_FILES['files']['tmp_name'][$key]);

    $file_name=rand(222, 888) . time() . $file_name;
      $filepath = $upload_dir . $file_name;
      echo  $filepath ;
      if ($file_size > $maxsize) {
            echo "File size should not exceed 2 MB";
      }  
      if ($file_size < $maxsize) {

            $filepath = $upload_dir . $file_name;
            if (move_uploaded_file($file_tmpname, $filepath)) {
                echo "{$file_name} successfully uploaded <br />";
            } else {
                echo "{$file_name} not uploaded <br />";
            }
      }

      $sql = "INSERT INTO news_extra_pics (newsid,newstype,imgname,created) values
      ('" . mysqli_real_escape_string($connection, $the_cat_id) . "','Main News',
      '" . mysqli_real_escape_string($connection, $file_name) . "','" . mysqli_real_escape_string($connection, $postdate) . "')";

          if ($connection->query($sql) === true) {
              echo "Images created successfully";}
              else {
                echo "Error: " . $sql . "<br>" . $connection->error;
            }
     }

}

// ===================================
                } 

                ?>   


                <?php
                }}
                ?>       
            </form>
        </div>
        
          <div class="container">					
			        <hr>
                    	<h3>Already uploaded pictures</h3>
                    	<table class="table table-bordered data-table data-table-default">
                                <thead>
                                    <tr>
                                                        <th style="width:5%">#</th>
                                                        <th style="width:35%">Picture</th>
                                                      
                                                        <th style="width:10%">Action</th>
                                    </tr>
                                </thead>
                                <tbody>
                                <?php 
                                                    showimg(); 
                                                ?>                                
                                                <?php 
                                                    deleteimg();
                                                ?> 
                                   
                                 
                                    
                                </tbody>
                                <tfoot>
                                    <tr>
                                    <th style="width:5%">#</th>
                                                        <th style="width:35%">Picture</th>
                                                      
                                                        <th style="width:10%">Action</th>
                                    </tr>
                                </tfoot>
						</table>
							<?php
							$the_cat_id = $_GET['edit'];
							function showimg()
							{
							global $connection;
								$query = "select * from news_extra_pics where newsid= '" . $_GET['edit'] . "' and newstype='Main News'";
								$select_posts = mysqli_query($connection,$query);
								$i=0;
								while($row = mysqli_fetch_assoc($select_posts))
								{
								$id= $row['id'];
								$post_title = $row['imgname'];
								
								$i=$i+1;
								echo "<tr>";
								echo "<td>$i</td>";
								echo "<td><img src='uploads/extranewspics/$post_title' width='10%'>&nbsp;&nbsp;$post_title </td>";
							
								echo "<td>
								<a href='editheadnews.php?delete={$id}&edit={$_GET["edit"]}' class='btn btn-danger'>Delete</a></td>";
										
								echo "</tr>";
								}
							}
							function deleteimg()
							{
								global $connection; 
								if(isset($_GET['delete']))
								{
									// $the_cat_id = $_GET['edit'];
									echo "hiii";
									$the_del_id = $_GET['delete'];

									$query = "select * from news_extra_pics WHERE id = '". $the_del_id ."'";
									$select_posts = mysqli_query($connection,$query);
									while($row = mysqli_fetch_assoc($select_posts))
									{
										$imgname = $row['imagename'];
										unlink('uploads/extranewspics/'. $imgname);
									}



									$query="DELETE FROM news_extra_pics WHERE id = '". $the_del_id ."'";
									$delete_query=mysqli_query($connection,$query);
									if(!$delete_query)
										{
											die('QUERY FAILED' . mysqli_error($connection));
										}

									header("Location: editsidebarnews.php?edit={$_GET['edit']}");

								}  
							}

							?>
        </div>
        </div>
        </div>
        <!-- ======================================== -->
    </div>
    <div class="col-md-5">
       <br>
        <div class="panel panel-color panel-primary">
            <div class="panel-heading">
                <h3 class="panel-title">Add Main News Picture Here   [  Required ]</h3>
            </div>

            <div class="panel-body" >
                <div class="container">
                    <div class="row">
                            <form enctype="multipart/form-data" action="image_upload_submit_main.php"
                            method="post" name="image_upload_form" id="image_upload_form">
                                <p>Please Select your image for this news</p>
                                <div id="selectImage">
                                    <div id="imgChange">
                                        <span>Choose Image</span> <input type="file" class="form-control" accept="image/*"
                                        name="image_file_input" id="image_file_input"  required="">
                                    </div>
                                </div>
                                <br>
                                <div class="progress-bar">
                                    <div class="percent">0%</div>
                                    <div class="bar"></div>
                                </div>
                            </form>
                        </div><hr><hr>
                        <div class="row">
                            <p>Create three images of dimension...100 x 80 , 368 x 300 , 770 x 380</p>   
                            <div class="img_preview" id="image-holder" style="display: none">
                                <img width="100" height="80" id="small-preview" src="#"
                                alt="small image" /> <br><br><img width="150" height="130"
                                id="medium-preview" src="#" alt="medium image" /> <br><br>
                                 <img width="200"
                                height="180" id="large-preview" src="#" alt="big image" />
                            </div>
                        </div>
                </div> 
            </div>
        </div> 
    </div>


</div>           

</div>
                    <!-- end container -->

    
   
                    <div class="footer">
                        <div class="pull-right hidden-xs">
                            Project Completed <strong class="text-custom">99%</strong>.
                        </div>
                        <div>
                          <strong>C Media</strong> - Copyright &copy; 2021
                        </div>
                    </div> <!-- end footer -->

                </div>
                <!-- End #page-right-content -->

            </div>
            <!-- end .page-contentbar -->
        </div>
        <!-- End #page-wrapper -->



        <!-- js placed at the end of the document so the pages load faster -->
        <script src="assets/js/jquery-2.1.4.min.js"></script>
        <script src="assets/js/bootstrap.min.js"></script>
        <script src="assets/js/metisMenu.min.js"></script>
        <script src="assets/js/jquery.slimscroll.min.js"></script>

        <script src="assets/plugins/bootstrap-tagsinput/js/bootstrap-tagsinput.min.js"></script>
        <script src="assets/plugins/select2/js/select2.min.js" type="text/javascript"></script>
        <script src="assets/plugins/bootstrap-filestyle/js/bootstrap-filestyle.min.js" type="text/javascript"></script>
        <script src="assets/plugins/switchery/switchery.min.js"></script>
        <script type="text/javascript" src="assets/plugins/parsleyjs/parsley.min.js"></script>

        <script src="assets/plugins/moment/moment.js"></script>
     	<script src="assets/plugins/timepicker/bootstrap-timepicker.js"></script>
     	<script src="assets/plugins/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>
     	<script src="assets/plugins/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
     	<script src="assets/plugins/clockpicker/js/bootstrap-clockpicker.min.js"></script>
     	<script src="assets/plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
        <script src="assets/plugins/summernote/summernote.min.js"></script>

        <!-- form advanced init js -->
        <script src="assets/pages/jquery.form-advanced.init.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <!-- App Js -->
         <script src="assets/js/jquery.app.js"></script> 
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="vendor/jquery/jquery.form.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $('.form-validation').parsley();
                $('.summernote').summernote({
                    height: 350,                 // set editor height
                    minHeight: null,             // set minimum height of editor
                    maxHeight: null,             // set maximum height of editor
                    focus: false                 // set focus to editable area after initializing summernote
                });
            });
        </script>
        <script type="text/javascript">
        $(document).ready(function(){
         // ==========================================
                var section_id = $('#PostSection').val();

                if(section_id =="Entertainments")
                {
                    $("#enter").show();
                     $('#PostCategoryId').change(function(){
                            var location_id = $('#PostCategoryId').val();

                            if(location_id =="Main News")
                            {
                                $("#l1").show();
                                $("#l2").hide();
                               $("#imgw").val("368");
                               $("#imgh").val("300");
                            }
                            else
                            {
                                $("#l1").hide();
                                $("#l2").show();
                                 $("#imgw").val("100");
                               $("#imgh").val("80");
                            }
                        })
        

                }
                else if(section_id =="Science")
                {
                     $("#enter").hide();
                      $("#l1").show();
                    $("#l2").hide();
                     $("#imgw").val("368");
                               $("#imgh").val("300");
                    
                }
                else if(section_id =="Chuttuvattam")
                {
                     $("#enter").hide();
                      $("#l1").hide();
                    $("#l2").show();
                     $("#imgw").val("100");
                               $("#imgh").val("80");
                    
                }



         // ==============================================
            
            $("#l1").show();
            $("#l2").hide();
            // $("#enter").show();
            $('#PostSection').change(function(){
                var section_id = $('#PostSection').val();

                if(section_id =="Entertainments")
                {
                    $("#enter").show();
                     $('#PostCategoryId').change(function(){
                            var location_id = $('#PostCategoryId').val();

                            if(location_id =="Main News")
                            {
                                $("#l1").show();
                                $("#l2").hide();
                               $("#imgw").val("368");
                               $("#imgh").val("300");
                            }
                            else
                            {
                                $("#l1").hide();
                                $("#l2").show();
                                 $("#imgw").val("100");
                               $("#imgh").val("80");
                            }
                        })
        

                }
                else if(section_id =="Science")
                {
                     $("#enter").hide();
                      $("#l1").show();
                    $("#l2").hide();
                     $("#imgw").val("368");
                               $("#imgh").val("300");
                    
                }
                else if(section_id =="Chuttuvattam")
                {
                     $("#enter").hide();
                      $("#l1").hide();
                    $("#l2").show();
                     $("#imgw").val("100");
                               $("#imgh").val("80");
                    
                }
            })


        });
        
         function myFunction()// TO REPLACE SPACE WITH HIPEN
        {
        var str = $('#pslug').val(); 
        var res = str.split(' ').join('-');
        $('#pslug').val(res);
        }


        function slugcheck()
        {
            var x =  $('#pslug').val();
            var y ="trendingnews";
            var input = {
                            "pid" : x,
                            "tname" : y
                        };
            console.log(input);

                $.ajax({
                            url : 'ajaxslugcheck.php',
                            type : 'POST',
                            data : input,
                            success : function(response)
                             {
                              
                              if (response=="Slug Exist"){
                                var ut = "";
                                $('#pslug').val(ut);
                                $('#slugstatus').val(response);
                                $('#pslug').focus();
                                }else {
                                    $('#slugstatus').val("Congrats. Added new slug");
                                }
                              
                            }
                        });

        }
    </script>

 <script>
$(document).ready(function(e){
    $('#cancel').delegate('','click change',function(){
    window.location = "mainnews.php";
    return false;
});
});
</script>      
 <!-- ===================     -->
 <script>
    function checkFileDetails() {
  
        var fi = document.getElementById('PostImage');
        if (fi.files.length > 0) {      // FIRST CHECK IF ANY FILE IS SELECTED.
 
            for (var i = 0; i <= fi.files.length - 1; i++) {
                var fileName, fileExtension, fileSize, fileType, dateModified;

                // FILE NAME AND EXTENSION.
                fileName = fi.files.item(i).name;
                fileExtension = fileName.replace(/^.*\./, '');

                // CHECK IF ITS AN IMAGE FILE.
                // TO GET THE IMAGE WIDTH AND HEIGHT, WE'LL USE fileReader().
                if (fileExtension == 'png' || fileExtension == 'jpg' || fileExtension == 'jpeg') {
 
                   readImageFile(fi.files.item(i));             // GET IMAGE INFO USING fileReader().
                }
                else {
                    // IF THE FILE IS NOT AN IMAGE.
                        
                    fileSize = fi.files.item(i).size;  // FILE SIZE.
                    fileType = fi.files.item(i).type;  // FILE TYPE.
                    dateModified = fi.files.item(i).lastModifiedDate;  // FILE LAST MODIFIED.

                    document.getElementById('fileInfo').innerHTML =
                        document.getElementById('fileInfo').innerHTML + '<br /> ' +
                            'Name: <b>' + fileName + '</b> <br />' +
                            'File Extension: <b>' + fileExtension + '</b> <br />' +
                            'Size: <b>' + Math.round((fileSize / 1024)) + '</b> KB <br />' +
                            'Type: <b>' + fileType + '</b> <br />' +
                            'Last Modified: <b>' + dateModified + '</b> <br />';
                }
            }

            // GET THE IMAGE WIDTH AND HEIGHT USING fileReader() API.
            function readImageFile(file) {
   
                var reader = new FileReader(); // CREATE AN NEW INSTANCE.
                var imgw = $('#imgw').val();
                var imgh = $('#imgh').val();
                reader.onload = function (e) {
                    var img = new Image();      
                    img.src = e.target.result;

                    img.onload = function () {
                        var w = this.width;
                        var h = this.height;
                    if (w == imgw  && h== imgh){
                        document.getElementById('fileInfo').innerHTML =
                            document.getElementById('fileInfo').innerHTML + '<br /> ' +
                                'Name: <b>' + file.name + '</b> <br />' +
                                'File Extension: <b>' + fileExtension + '</b> <br />' +
                                'Size: <b>' + Math.round((file.size / 1024)) + '</b> KB <br />' +
                                'Width: <b>' + w + '</b> <br />' +
                                'Height: <b>' + h + '</b> <br />' +
                                'Type: <b>' + file.type + '</b> <br />' +
                                'Last Modified: <b>' + file.lastModifiedDate + '</b> <br />';
                            }else
                            {
                               
                                alert("Image Dimension Should be " + imgw + " x " + imgh)
                                 $("#PostImage").val('');
            return false;
                            }
                    }
                };
                reader.readAsDataURL(file);
            }
        }
    }
</script>
<script>
$(document).on('change', '#image_file_input', function () {   
    var progressBar = $('.progress-bar');
    var bar = $('.progress-bar .bar'); 
    var percent = $('.progress-bar .percent');
    var percentVal;
    $('#image_upload_form').ajaxForm({
        beforeSend: function() {
                progressBar.fadeIn();
            percentVal = '0%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
            percentVal = percentComplete + '%';
            bar.width(percentVal)
            percent.html(percentVal);
        },
        success: function(html, statusText, xhr, $form) {
            obj = $.parseJSON(html);    
                if(obj.status){     
                    percentVal = '100%';
                    bar.width(percentVal)
                    percent.html(percentVal);
                    $("#imgsmall").val(obj.small);
                    $("#imgmedium").val(obj.medium);
                    $("#imglarge").val(obj.large);
                    $("#small-preview").prop('src',obj.smallpath);      
                    $("#medium-preview").prop('src',obj.mediumpath);        
                    $("#large-preview").prop('src',obj.largepath);      
                    $(".img_preview").show();   
                }    
        }
    }).submit();        

});
</script>
<script type="text/javascript">
    $(document).ready(function() {
        function readFileAsText(file){
            return new Promise(function(resolve,reject){
                let fr = new FileReader();

                fr.onload = function(){
                    resolve(fr.result);
                };

                fr.onerror = function(){
                    reject(fr);
                };

                fr.readAsText(file);
            });
        }
        if (window.File && window.FileList && window.FileReader) {

            $("#files").on("change", function(e) {
                fileName123 = Array.from(this.files).map(({name}) => name + '<br/>');
                var files = e.target.files,
                filesLength = files.length;
                for (var i = 0; i < filesLength; i++) {
                    var f = files[i]
                    var fgh=fileName123[i];
                    var fileReader = new FileReader();
                    fileReader.onload = (function(e) {
                        var file = e.target;
                        console.log(file);
                        $("<span class=\"pip\">" +
                        "<img class=\"imageThumb\" src=\"" + e.target.result + "\" title=\"" + e.target.result + "\"   data-fileid=\"" + e.target.result + "\"/>").insertAfter("#files");


                        $(".remove").click(function(){
                            $(this).parent(".pip").remove();
                        });
                    });
                    fileReader.readAsDataURL(f);

                }
            console.log(files);
            });


        } else {
            alert("Your browser doesn't support to File API")
        }


    });
</script>
    </body>
</html> 
    
    
   <?php 
ob_end_flush();
?>
File Content: editmainnews.php

File Content: `editmainnews.php`
