CoreGrade/www/application/views/member/addpages/VIDEOCARD.php

<?
$startPage = 100;
$startPage = isset($start_page) ? $start_page : 100;
?>

<section id="start_100">

    <!-- button file upload starts -->
    <div class="row">
        <div class="col-12">
            <div class="card">
                <div class="card-header">
                    <h4 class="card-title">Media & Video Contents</h4>
                </div>
                <div class="card-content">
                    <div class="card-body">
                        <div id="start_10099">

                            <? if (100 == $startPage) { ?>
                                <form class="form" id="startForm">
                                    <input type="hidden" id='member_id' name='member_id' value="<?= $_SESSION["member_id"] ?>" />
                                    <input type="hidden" id='page_id' name='page_id' value="<?= $page_id ?>" />

                                    <div class="form-body">
                                        <div class="form-group">
                                            <label for="feedback1" class="sr-only">Note Title</label>
                                            <input type="text" id="feedback1" class="form-control" placeholder="Title" name="title" value="<?= isset($title) ? $title : '' ?>" required>
                                        </div>


                                        <div class="form-group">
                                            <label for="feedback3" class="sr-only">Detail</label>
                                            <textarea id="feedback3" rows="6" class="form-control" name="detail" placeholder="Note Detail" required=""><?= isset($details) ? $details : '' ?></textarea>
                                        </div>
                                    </div>

                                    <div class="form-actions" style="text-align:right;">
                                        <div id="save_detail"></div>  <button type="submit" class="btn btn-primary mr-1" id="pagebt" onclick="return startUploadPageMedia(this.form);">Next</button>
                                    </div>      

                                </form>

                                   
<script type="text/javascript">
<!--

    function startUploadPageMedia(form) {
        $('#save_detail').html('Adding');
        $('#pagebt').prop('disabled', true);

        alert(form.member_id.value);
        var post_data = {
            'member_id': form.member_id.value,
            'title': form.title.value,
            'detail': form.detail.value,
            'page_id': form.page_id.value
        };
        // alert(1);
        // Get some values from elements on the page:
        var url = "/member/addPageCards";
        // Send the data using post
        var posting = $.post(url, post_data);
        // Put the results in a div
        posting.done(function (data) {
            $('#start_100').html(data);
           // $('#start_100').html(null);
            $('#pagebt').prop('disabled', false);
        });
        return false;
    }


// -->
</script>

                            <? } ?>

                            <? if (200 == $startPage) { ?>
                                <div class="form-group">
                                    <b>Title : jdjds fjdsf;lds;lkdsdfklds f;ldslkds g;ldsglds</b> 
                                    <br>
                                    <b>Description :  gds lkfjdslfkds sd;lkds ;lsgkdsg ;lkds;gdsgd ;lkkd sdgk  gklkddkjhagajsnsa as fskf akf a'alfalf</b> 
                                </div>


                                <div style="padding-bottom: 10px;">
                                    <p class="card-text">Add the media and video files at below - the max file size if 50 MB, you may add up to 15 files. </p>
                                    <button id="select-files" class="btn btn-primary mb-1"><i class="icon-file2"></i> Click me to select
                                        files</button>
                                    <form action="/member/upload" class="dropzone dropzone-area" id="dropzoneFrom">
                                        <div class="dz-message">Drop Files Here To Upload</div>
                                    </form>
                                </div>


                                <div class="form-actions" style="text-align:right;">
                                    <button type="reset" class="btn btn-outline-warning">Cancel</button>
                                    <button type="button" class="btn btn-info" id="submit-all">Submit</button>
                                </div>

                                <br />
                                <div id="preview"></div>
                                <br />
                                
                                

<script type="text/javascript">
<!--

    $(document).ready(function () {
        Dropzone.options.dropzoneFrom = {
            autoProcessQueue: false,
            acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
            maxFiles: 10,
            init: function () {
                var submitButton = document.querySelector('#submit-all');
                myDropzone = this;
                submitButton.addEventListener("click", function () {
                    alert(3333);
                    myDropzone.processQueue();
                });
                this.on("complete", function () {
                    if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
                    {
                        var _this = this;
                        _this.removeAllFiles();
                    }
                    //    list_image();
                });
            },
        };

        list_image();



        $(document).on('click', '.remove_image', function () {
            var name = $(this).attr('id');
            $.ajax({
                url: "/member/upload",
                method: "POST",
                data: {name: name},
                success: function (data)
                {
                    list_image();
                }
            })
        });

    });



    new Dropzone(document.body, {
        url: "/member/upload", // Set the url
        previewsContainer: "#dropzoneFrom", // Define the container to display the previews
        clickable: "#select-files", 
        autoProcessQueue: false,
        acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.mp4",
        maxFiles: 15,
        parallelUploads: 15,
        init: function () {
            var submitButton = document.querySelector('#submit-all');
            myDropzone = this;
            submitButton.addEventListener("click", function () {
                myDropzone.processQueue();
            });
            this.on("complete", function () {
                if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0)
                {
                    var _this = this;
                    _this.removeAllFiles();
                }
                //    list_image();
            });
        },

    });

    function list_image()
    {
        $.ajax({
            url: "/member/upload",
            success: function (data) {
                $('#preview').html(data);
            }
        });
    }


    //let member_id = '<?= $_SESSION["member_id"] ?>';



// -->
</script>


                                
                            <? } ?>      


                        </div>



                    </div>

                </div>
            </div>
        </div>
    </div>

</section>

<!-- div id="dropzone"></div -->