Page 1 of 1

Unable to upload image in php using bootstrap module

Posted: Thu Sep 03, 2015 4:04 am
by javedhakim
I am trying to add a functionality of uploading image while adding new data but I am not able to achieve it. I will provide my code to you. Could you please help me to achieve it? Following is my code,

I have three files namely index.php, script.js, func_events.php

index.php is as below,

Code: Select all

   <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h3 class="modal-title" id="myModalLabel">Add event</h3>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="addEvent" method="post" role="form" action="func_events.php"  enctype="multipart/form-data">
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputTitle" style="padding:0px;">Title</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="text" id="inputTitle" class="form-control" maxlength="32" placeholder="Title" />
                                </div>
                                <label class="col-sm-2 control-label" for="inputTitle" style="padding:0px;">?????</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputLocation" style="padding:0px;">Location</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <!--<input type="text" id="inputLocation" class="form-control" maxlength="26" placeholder="Location" />-->
                                    <select id = "inputLocation">
                                        <option value = "Meeting Room">Meeting Room</option>
                                        <option value = "Training Room">Training Room</option>
                                        <option value = "GM Room">GM Room</option>
                                        <option value = "Other">Other</option>
                                    </select>
                                </div>
                                <label class="col-sm-2 control-label" for="inputLocation" style="padding:0px;">??????</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputDate" style="padding:0px;">From Date</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="text" id="inputDate" class="form-control" maxlength="10" placeholder="Date" />
                                </div>
                                <div id="datepicker"></div>
                                <label class="col-sm-2 control-label" for="inputDate" style="padding:0px;">?? ?????</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputTime" style="padding:0px;">From Time</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="text" id="inputTime" class="form-control" maxlength="5" placeholder="Time" />
                                </div>
                                <label class="col-sm-2 control-label" for="inputTime" style="padding:0px;">?? ???</label>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label" for="inputUploadFile" style="padding:0px;">Upload Image</label>
                                <div class="col-sm-5 col-sm-offset-1">
                                    <input type="file" id="fileToUpload" class="form-control" maxlength="32" placeholder="Upload File" />
                                </div>
                                <label class="col-sm-2 control-label" for="inputUploadFile" style="padding:0px;">Upload Image</label>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" id="add" class="btn btn-success" data-loading-text="Adding event...">CREATE</button>
                    </div>
                        </form>
                        </div>
                        //... I have closed all the divs
                        <script type="text/javascript" src="js/script.js"></script>
script.js file is as follows,

Code: Select all

 function addEvent(date) {
    $(".modal-header").html(modalAddEvent.header);
    $(".modal-body").html(modalAddEvent.body);
    $(".modal-footer").html(modalAddEvent.footer).addClass("addEvent");
    $("#inputDate").datepicker({ firstDay: 1 });
    $("#inputTime").timepicker();
    date = new Date(date);
    date = (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "/" +
           (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + "/" +
           date.getFullYear();
    $("#inputDate").val(date);
    $("button#add").on("click", function() {
        form = { title: $("#inputTitle").val(),
                 location: $("#inputLocation option:selected").val(),
                 date: $("#inputDate").val(),
                 time: $("#inputTime").val()};
        title = form.title;
        loc = form.location;
        date = new Date(form.date);
        date = date.getFullYear() + "-" +
               (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-" +
               (date.getDate() < 10 ? "0" + date.getDate() : date.getDate());
        time = form.time + ":00";
        timestamp = date + " " + time;
        if ((title && loc && timestamp) != '') {
            form_data = { 1: title, 2: loc, 3: timestamp};
            /* ,filename: form_data[19] */
            $.ajax({
                type: "POST",
                data: { action: "insert",
                        title: form_data[1],
                        loc: form_data[2],
                        timest: form_data[3]},
                url: "calendar/admin/php/func_events.php",
                beforeSend: function() { $("button#add").button('loading'); },
                success: function() {
                    $("#myModal").modal('hide');
                    alert("Event added correctly. Your request has been forwarded to the PR Department. Pending for Approval.");
                    sessionStorage.clear();
                    window.location.reload();
                },
                error: function() { alert("There was an error trying to add the event."); }
            });
        }
        else {
            alert("You must complete all the fields.");
        }
    });}

Code: Select all

$action = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['action'])));
    $title = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['title'])));
    $location = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['loc'])));
    $timestamp = trim(htmlspecialchars(mysqli_real_escape_string($link, $_POST['timest'])));
    if ($action == "select") {
        $sql = "SELECT *, DATE_FORMAT(timestamp, '%M %e, %Y %H:%i') selector,  DATE_FORMAT(toTimestamp, '%M %e, %Y %H:%i') selector1 FROM events ";
                if ($_POST['y'] !== null && $_POST['m'] !== null) {
                // Sort by Year and Month
                    $sql .= " WHERE DATE_FORMAT(timestamp, '%Y %c') = '".$_POST['y']." ".$_POST['m']."' ";
                }
                else if (isSet($_POST['y']) && $_POST['y'] !== null) {
                // Sort by Year
                    $sql .= " WHERE DATE_FORMAT(timestamp, '%Y') = '".$_POST['y']."' ";
                }
                else if (isSet($_POST['m']) && $_POST['m'] !== null) {
                // Sort by Month
                    $sql .= " WHERE DATE_FORMAT(timestamp, '%c') = '".$_POST['m']."' ";
                }
                // Search
                (isSet($_POST['search_q']) ? $sql .= " WHERE title LIKE '%".trim($_POST['search_q'])."%' " : '').
        $sql .= " ORDER BY timestamp ASC";
        $query = mysqli_query($link, $sql);
        if (mysqli_num_rows($query) > 0) {
            $data = array(); $index = 0;
            while ($recset = mysqli_fetch_array($query)){
                $data[$index] = $recset;
                $index++;
            }
            echo json_encode($data);
        }
    }
    else if ($action == "insert") {
        /* $startdate = substr($timestamp,0,10); //date('Y-m-d', $timestamp);// or your date as well
        $enddate = substr($totimestamp,0,10); //date('Y-m-d', $totimestamp); //strtotime("2010-01-01");
        $datediff = $end - $start;
        $date1 = $startdate;
        $date2 = $enddate;
        $diff = abs(strtotime($date2) - strtotime($date1));
        $years = floor($diff / (365*60*60*24));
        $months = floor(($diff - $years * 365*60*60*24) / (30*60*60*24));
        $days = floor(($diff - $years * 365*60*60*24 - $months*30*60*60*24)/ (60*60*24));
        if($days == "0")
        { */
        $sql = "INSERT INTO events (timestamp, title, location) VALUES ('".$timestamp."', '".$title."', '".$location."')";
        $query = mysqli_query($link, $sql); 
        /* }
        else
        {
           print "".++$days."";
        } */
        //File Upload
        $target_dir = "calendar/";
        $target_file = $target_dir.basename($_FILES["fileToUpload"]["name"]);
        $console::log($target_file);
        $uploadOk = 1;
        $imageFileType = pathinfo($target_file,PATHINFO_EXTENSION);
        // Check if image file is a actual image or fake image
        if(isset($_POST["submit"])) {
            $check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
            if($check !== false) {
                echo "File is an image - " . $check["mime"] . ".";
                $uploadOk = 1;
            } else {
                echo "File is not an image.";
                $uploadOk = 0;
            }
        }
        // Check if file already exists
        if (file_exists($target_file)) {
            echo "Sorry, file already exists.";
            $uploadOk = 0;
        }
        // Check file size
        if ($_FILES["fileToUpload"]["size"] > 500000) {
            echo "Sorry, your file is too large.";
            $uploadOk = 0;
        }
        // Allow certain file formats
        if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
        && $imageFileType != "gif" ) {
            echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
            $uploadOk = 0;
        }
        // Check if $uploadOk is set to 0 by an error
        if ($uploadOk == 0) {
            echo "Sorry, your file was not uploaded.";
            // if everything is ok, try to upload file
        } else {
            if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
                echo "The file ". basename( $_FILES["fileToUpload"]["name"]). " has been uploaded.";
            } else {
                echo "Sorry, there was an error uploading your file.";
            }
        } 
    }
    ?>