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

<!--
<div class="card">
    <div class="card-content">
        <div class="card-body">
            <h4 class="card-title">Add Video</h4>
        </div>

        <form class="md-form" method="POST" action="/member/upload" enctype="multipart/form-data">



            <input type="hidden" name="page_key" value="<?= $page_key ?>" >
            <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-group">
                <label for="feedback1" class="sr-only">Note Title</label>
                <input type="text" id="feedback1" class="form-control" placeholder="Name" name="name">
            </div>

            <div class="form-group">
                <label for="feedback1" class="sr-only">Note Title</label>
                <textarea id="feedback3" rows="4" class="form-control" name="message" placeholder="Description"></textarea>
            </div>




            <div class="file-field">
                <div class="btn btn-primary btn-sm float-left">
                    <span>Choose files</span>
                    <input type="file" name="uploadedFile" />
                </div>
                <div class="file-path-wrapper">
                </div>
            </div>

              <div class="form-actions">
                
                <input type="submit" class="btn btn-primary mr-1" name="uploadBtn" value="Upload" />
            </div>
        </form>

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

<section id="dropzone-examples">

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

                        <div style="padding-bottom: 10px;">
                            <p class="card-text">This example uploads a multiple files using dropzone js library. Using this method,
                                user gets an option to select th</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-group">
                            <label for="feedback1" class="sr-only">Note Title</label>
                            <input type="text" id="feedback1" class="form-control" placeholder="Name" name="name">
                        </div>

                        <div class="form-group">
                            <label for="feedback3" class="sr-only">Suggestion</label>
                            <textarea id="feedback3" rows="4" class="form-control" name="message" placeholder="Description"></textarea>
                        </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>

                            <!-- button type="submit" onclick="startUpload(<?= $_SESSION['member_id'] ?>, 0, );" class="btn btn-primary mr-1">Submit</button -->
                        </div>

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


                    </div>

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

</section>

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

<!-- script src="/assets2/vendors/js/extensions/dropzone.min.js"></script -->

<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();
                }
            })
        });

    });




    /********************************************
     *               Multiple Files              *
     ********************************************/
    //             Dropzone.options.dpzMultipleFiles = {
    //                 paramName: "file", // The name that will be used to transfer the file
    //                 maxFilesize: 0.5, // MB
    //                 clickable: true
    //            }


    /********************************************************
     *               Use Button To Select Files              *
     ********************************************************/
    new Dropzone(document.body, {// Make the whole body a dropzone
        url: "/member/upload", // Set the url
        previewsContainer: "#dropzoneFrom", // Define the container to display the previews
        clickable: "#select-files", // Define the element that should be used as click trigger to select files.
        autoProcessQueue: false,
        acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg,.mp4",
        maxFiles: 10,
        parallelUploads: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();
            });
        },

    });

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

    function startUpload(member_id, page_id) {

        $('#share_detail').html('Processing...');
        $('#acc' + page_id).prop('disabled', true);
        $.ajax({
            url: "/member/upload?proc=PROCESS&page_id=" + page_id + "&member_id=" + member_id
        }).done(function (data) {
            $('#share_detail').html(data);
            $('#acc' + page_id).prop('disabled', false);
        });
        return false;
    }





// -->
</script>