Help with adding gif to launch on 'submit'

Ask about general coding issues or problems here.

Moderators: egami, macek, gesf

Post Reply
Chrisj
New php-forum User
New php-forum User
Posts: 18
Joined: Thu Oct 07, 2004 10:04 am

Mon Aug 06, 2018 2:20 pm

I'd like to add a 'gif' to launch upon submit, so the submitter knows something is happening until the page redirects. Can you help me add some code to do that? I believe the 'submit button is on line 90. Thanks.

Code: Select all

<div class="wo_about_wrapper_parent">
    <div class="wo_about_wrapper">
        <div class="hero hero-overlay" style="background-color: #d84c47;">
            <div class="container">
                <h1 class="text-center">{{LANG upload_new_video}}</h1>
            </div>
        </div>
        <svg id="wave" viewBox="0 0 100 15"><path fill="#d84c47" opacity="0.5" d="M0 30 V15 Q30 3 60 15 V30z"></path><path fill="#d84c47" d="M0 30 V12 Q30 17 55 12 T100 11 V30z"></path></svg>
    </div>
</div>
<div class="col-md-2"></div>
<div class="col-md-8 pt_page_margin">
    <div class="content pt_shadow">
        <div class="col-md-12 pt_upload_vdo">
            <?php if ($pt->user->admin == 1) { ?>
                <div class="alert alert-warning">
                    <h4>Just admins can see this message</h4>
                    <p>Note: Your server max upload size is: <?php echo ini_get('upload_max_filesize')?>, means you can't upload files that are larger than: <?php echo ini_get('upload_max_filesize')?><br><br> If you want to increase the limit or If you can't upload large files, go to Admin Settings > Settings > Site Settings > Max upload size and increase the value, if you still can't upload large files, please contact your host provider and let them increase the upload limit and max_execution_time.</p>
                </div>
            <?php } ?>
            <div class="upload" onclick="PT_OpenUploadForm();" data-block="video-drop-zone">
                <div>
                    <svg fill="currentColor" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg" class="feather feather-upload"><path d="M14,13V17H10V13H7L12,8L17,13M19.35,10.03C18.67,6.59 15.64,4 12,4C9.11,4 6.6,5.64 5.35,8.03C2.34,8.36 0,10.9 0,14A6,6 0 0,0 6,20H19A5,5 0 0,0 24,15C24,12.36 21.95,10.22 19.35,10.03Z" /></svg>
                    <h4>{{LANG darg_drop_video}}</h4>
                    <p>{{LANG or}} {{LANG click_2choose_file}}</p>
                    <button class="btn btn-main">{{LANG upload}}</button>
                </div>
            </div>
            <div class="progress hidden">
                <span class="percent">0%</span>
                <div class="progress_bar_parent">
                    <div class="bar upload-progress-bar progress-bar active"></div>
                </div>
                <div class="clear"></div>
                <div class="text-center pt_prcs_vdo"></div>
            </div>
       
            <form action="" method="POST" id="upload-video" class="hidden">
                <input type="file" name="video" accept="video/*" class="upload-video-file">
            </form>
    
            <div class="col-md-12 hidden" id="upload-form">
                <form action="" class="form-horizontal setting-panel pt_forms" method="POST">
                    <div class="form-group">
                        <label class="col-md-12" for="title">{{LANG video_title}}</label> 
                        <div class="col-md-12">
                            <input id="title" name="title" type="text" placeholder="" class="form-control input-md">
                            <span class="help-block">{{LANG video_title_help}}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-12" for="description">{{LANG video_descritpion}}</label> 
                        <div class="col-md-12">
                            <textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-12" for="category_id">{{LANG category}}</label> 
                        <div class="col-md-12">
                            <select name="category_id" id="category_id" class="form-control">
                                <?php foreach($pt->categories as $key => $category) {?>
                                <option value="<?php echo $key?>"><?php echo $category?></option>
                                <?php } ?>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-12" for="tags">{{LANG tags}}</label> 
                        <div class="col-md-12">
                            <input id="mySingleFieldTags" name="tags" type="text" placeholder="" class="form-control input-md">
                            <span class="help-block">{{LANG tags_help}}</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-12" for="thumbnail">{{LANG thumbnail}}</label> 
                        <div class="col-md-12">
                            <div class="upload-product-image pull-left" onclick="document.getElementById('thumbnail').click(); return false">
                                <div class="upload-image-content">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
                                </div>
                            </div>
                            <div style="overflow-x: auto;width: calc(100% - 112px);">
                                <div id="productimage-holder"></div>
                            </div>
                            <input id="thumbnail" name="thumbnail" type="file" class="hidden" accept="image/*">
                            <span class="help-block">jpg, png, gif</span>
                        </div>
                    </div>
                    <div class="last-sett-btn modal-footer" style="margin: 0px -40px -10px -40px;">
                        <button type="submit" id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg> {{LANG publish}}</button>
                    </div>
                    <input type="hidden" name="video-location" id="video-location" value="">
                </form>
            </div>
            <div class="clear"></div>
        </div>
        <div class="clear"></div>
    </div>
</div>
<div class="col-md-2"></div>
<script>
$(document).ready(function() {
    $("#thumbnail").on('change', function() {
    //Get count of selected files
    var product_countFiles = $(this)[0].files.length;
    var product_imgPath = $(this)[0].value;
    var extn = product_imgPath.substring(product_imgPath.lastIndexOf('.') + 1).toLowerCase();
    var product_image_holder = $("#productimage-holder");
    product_image_holder.empty();
    if (extn == "gif" || extn == "png" || extn == "jpg" || extn == "jpeg") {
        if (typeof(FileReader) != "undefined") {
        //loop for each file selected for uploaded.
        for (var i = 0; i < product_countFiles; i++)
        {
            var product_reader = new FileReader();
            product_reader.onload = function(e) {
                $("<img />", {
                    "src": e.target.result,
                    "class": "thumb-image"
                  }).appendTo(product_image_holder);
                }
                product_image_holder.show();
                product_reader.readAsDataURL($(this)[0].files[i]);
              }
            } else {
              product_image_holder.html("<p>This browser does not support FileReader.</p>");
            }
         }
    });
});

$(function () {
    $("#mySingleFieldTags").tagit({
        allowSpaces: true
    });
    var bar         = $('.bar');
   var percent     = $('.percent');
   var prcsvdo        = $('.pt_prcs_vdo');
   var is_uploaded = false;

   var video_drop_block = $("[data-block='video-drop-zone']");

   if (typeof(window.FileReader)){
      video_drop_block[0].ondragover = function() {
         video_drop_block.addClass('hover');
         return false;
      };
         
      video_drop_block[0].ondragleave = function() {
         video_drop_block.removeClass('hover');
         return false;
      };

      video_drop_block[0].ondrop = function(event) {
         event.preventDefault();
         video_drop_block.removeClass('hover');
         var file = event.dataTransfer.files;
         $('#upload-video').find('input').prop('files', file);
      };
   }

    $('#upload-video').submit(function(event) {
      let file_size = $(".upload-video-file").prop('files')[0].size;
      if (file_size > "{{CONFIG max_upload}}") {
         swal({
            title: '{{LANG error}}',
            text:  "{{LANG file_is_too_big}} <?php echo pt_size_format($pt->config->max_upload); ?>",
            type: 'error',
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'OK',
            buttonsStyling: true,
            confirmButtonClass: 'btn btn-success',
         }).then(function(){
            swal.close();
            $('.upload-video-file').val('');
         },
         function() {
            swal.close();
            $('.upload-video-file').val('');
         });
         return false;
      }
      else{
         var filename = $('.upload').val().split('\\').pop();
         $('#title').val(filename);
         $('#upload-form').removeClass('hidden');
         $('.upload').addClass('hidden');
      }
   });

   $('#upload-video').ajaxForm({
        url: '{{LINK aj/upload-video}}?hash=' + $('.main_session').val(),
       dataType:'json',
        beforeSend: function() {
               $('.progress').removeClass('hidden');
            var percentVal = '0%';
            bar.width(percentVal);
            percent.html(percentVal);
        },
        uploadProgress: function(event, position, total, percentComplete) {
             if(percentComplete > 50) {
                percent.addClass('white');
             }
            var percentVal = percentComplete + '%';
            bar.width(percentVal);
            percent.html(percentVal);

            if (percentComplete == 100) {
               prcsvdo.html('<svg width="30" height="10" viewBox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="#000"><circle cx="15" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="60" cy="15" r="9" fill-opacity="0.3"><animate attributeName="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcMode="linear" repeatCount="indefinite" /></circle><circle cx="105" cy="15" r="15"><animate attributeName="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcMode="linear" repeatCount="indefinite" /><animate attributeName="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcMode="linear" repeatCount="indefinite" /></circle></svg> {{LANG porcessing_video}}');
               $('.progress').find('.bar').removeClass('upload-progress-bar');
            }
        },
        success: function(data) {
               percentVal = '0%';
               bar.width(percentVal);
            $('.progress').addClass('hidden');
            if (data.status == 200) {
                $('#video-location').val(data.file_path);
                Snackbar.show({text: '<i class="fa fa-check"></i> ' + data.file_name + ' {{LANG successfully_uplaoded}}'});
                $('#submit-btn').attr('disabled', false);
                $('.upload-video-file').val('');
                $('#title').val(data.file_name);
            }
            else if(data.status == 401){
               swal({
                  title: '{{LANG oops}}!',
                  text: "{{LANG upload_limit_reached}}!",
                  type: 'info',
                  showCancelButton: true,
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: '{{LANG upgrade_now}}',
                  cancelButtonText: '{{LANG cancel}}',
                  confirmButtonClass: 'btn btn-success margin-right',
                  cancelButtonClass: 'btn',
                  buttonsStyling: false
               }).then(function(){
                  //Go pro
                  window.location.href = '{{LINK go_pro}}';
               },
               function() {
                  window.location.href = '{{LINK }}';
               });
            }
            else if(data.status == 402){
               swal({
                  title: '{{LANG error}}',
                  text: data.message,
                  type: 'error',
                  confirmButtonColor: '#3085d6',
                  cancelButtonColor: '#d33',
                  confirmButtonText: 'OK',
                  buttonsStyling: true,
                  confirmButtonClass: 'btn btn-success',
               }).then(function(){
                  swal.close();
                  $('.upload-video-file').val('');
               },
               function() {
                  swal.close();
                  $('.upload-video-file').val('');
               });
            }
            else {
                Snackbar.show({showAction: false,backgroundColor: '#e22e40',text: '<div>'+ data.error +'</div>'});
            }
        }
    });

    $('#upload-form form').ajaxForm({
        url: '{{LINK aj/submit-video}}?hash=' + $('.main_session').val(),
        beforeSend: function() {
            $('#submit-btn').attr('disabled', true);
            $('#submit-btn').val("{{LANG please_wait}}");
        },
        success: function(data) {
            if (data.status == 200) {
                window.location.href = data.link;
            }
         else if(data.status == 402){
            swal({
               title: '{{LANG error}}',
               text: data.message,
               type: 'error',
               confirmButtonColor: '#3085d6',
               cancelButtonColor: '#d33',
               confirmButtonText: 'OK',
               buttonsStyling: true,
               confirmButtonClass: 'btn btn-success',
            }).then(function(){
               window.location.href = '{{LINK upload-video}}';
            },
            function() {
               window.location.href = '{{LINK }}';
            });
         }
         else {
                $('#submit-btn').attr('disabled', false);
                $('#submit-btn').val('{{LANG publish}}');
                Snackbar.show({text: '<div>'+ data.message +'</div>'});
            }
        }
    });

    $('.upload-video-file').on('change', function() {
       $('#upload-video').submit();
    });
});

function PT_OpenUploadForm() {
    $('#upload-video').find('input').trigger('click');
}
</script>
<style>.upload-s3-progressing{background: #4c9dd3;}</style>

Post Reply