onload , in the wizard.component.ts

[shalvy]

Error Message

Type '(this: FileReader, e: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: FileReaderProgressEvent) => any'. Types of parameters 'e' and 'ev' are incompatible. Type 'FileReaderProgressEvent' is not assignable to type 'FileReaderEvent'. Property 'getMessage' is missing in type 'FileReaderProgressEvent'.

the error is int the line reader.onload

`readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader();

        reader.onload = function (e:FileReaderEvent) {
            $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
        }
        reader.readAsDataURL(input.files[0]);
    }
}`

[chelaruc]

@shalvy can you give me the hole wizard.component.ts file?

[shalvy]

@chelaruc ok, I'm attaching it.

wizard.zip

[chelaruc]

@shalvy sorry for the late response. What version do you have? The latest one is 1.1.0.

All the best, Ciprian

[iamnido]

I'm also getting the same error. Already using the latest 1.1.0 version.

[dev2colours]

@chelaruc yes I am using the latest version,

[shalvy]

@chelaruc yes I am using the latest version,

[chelaruc]

@shalvy in the latest version, the wizard component is looking like:

import { Component, OnInit, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core';
import { FormControl, FormGroupDirective, NgForm, Validators, FormGroup } from '@angular/forms';
// import * as $ from 'jquery';

declare var swal:any;
declare var $:any;

interface FileReaderEventTarget extends EventTarget {
    result:string
}
interface FileReaderEvent extends Event {
    target: FileReaderEventTarget;
    getMessage():string;
}

@Component({
    moduleId: module.id,
    selector: 'wizard-cmp',
    templateUrl: 'wizard.component.html'
})

export class WizardComponent implements OnInit, AfterViewInit{
  focus;
  focus1;
  focus2;
    readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();

            reader.onload = function (e:FileReaderEvent) {
                $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    onFinishWizard(){
        //here you can do something, sent the form to server via ajax and show a success message with swal
        swal("Good job!", "You clicked the finish button!", "success");
    }
    ngOnInit(){
      setTimeout(function() {
        $('.card.card-wizard').addClass('active');
      }, 600);

        // Code for the Validator
        const $validator = $('.card-wizard form').validate({
            rules: {
                firstname: {
                    required: true,
                    minlength: 3
                },
                lastname: {
                    required: true,
                    minlength: 3
                },
                email: {
                    required: true,
                    minlength: 3,
                }
            },

            highlight: function(element) {
              $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
            },
            success: function(element) {
              $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
            },
            errorPlacement : function(error, element) {
              $(element).append(error);
            }
        });
        // Wizard Initialization
        $('.card-wizard').bootstrapWizard({
            'tabClass': 'nav nav-pills',
            'nextSelector': '.btn-next',
            'previousSelector': '.btn-previous',

            onNext: function(tab, navigation, index) {
                var $valid = $('.card-wizard form').valid();
                if(!$valid) {
                    $validator.focusInvalid();
                    return false;
                }
            },

            onInit: function(tab: any, navigation: any, index: any){

              // check number of tabs and fill the entire row
              let $total = navigation.find('li').length;
              let $wizard = navigation.closest('.card-wizard');

              let $first_li = navigation.find('li:first-child a').html();
              let $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
              $('.card-wizard .wizard-navigation').append($moving_div);

              $total = $wizard.find('.nav li').length;
             let  $li_width = 100/$total;

              let total_steps = $wizard.find('.nav li').length;
              let move_distance = $wizard.width() / total_steps;
              let index_temp = index;
              let vertical_level = 0;

              let mobile_device = $(document).width() < 600 && $total > 3;

              if(mobile_device){
                  move_distance = $wizard.width() / 2;
                  index_temp = index % 2;
                  $li_width = 50;
              }

              $wizard.find('.nav li').css('width',$li_width + '%');

              let step_width = move_distance;
              move_distance = move_distance * index_temp;

              let $current = index + 1;

              if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
                  move_distance -= 8;
              } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
                  move_distance += 8;
              }

              if(mobile_device){
                  let x: any = index / 2;
                  vertical_level = parseInt(x);
                  vertical_level = vertical_level * 38;
              }

              $wizard.find('.moving-tab').css('width', step_width);
              $('.moving-tab').css({
                  'transform':'translate3d(' + move_distance + 'px, ' + vertical_level +  'px, 0)',
                  'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'

              });
              $('.moving-tab').css('transition','transform 0s');
           },

           onTabClick : function(tab: any, navigation: any, index: any){

               const $valid = $('.card-wizard form').valid();

               if (!$valid) {
                   return false;
               } else {
                   return true;
               }
           },

          onTabShow: function(tab: any, navigation: any, index: any) {
            var $total = navigation.find('li').length;
            var $current = index + 1;

            var $wizard = navigation.closest('.card-wizard');

            // If it's the last tab then hide the last button and show the finish instead
            if ($current >= $total) {
              $($wizard).find('.btn-next').hide();
              $($wizard).find('.btn-finish').show();
            } else {
              $($wizard).find('.btn-next').show();
              $($wizard).find('.btn-finish').hide();
            }

            let button_text = navigation.find('li:nth-child(' + $current + ') a').html();

            setTimeout(function() {
              $('.moving-tab').html(button_text);
            }, 150);

            var checkbox = $('.footer-checkbox');

            if (index == 0) {
              $(checkbox).css({
                'opacity': '0',
                'visibility': 'hidden',
                'position': 'absolute'
              });
            } else {
              $(checkbox).css({
                'opacity': '1',
                'visibility': 'visible'
              });
            }

            $total = $wizard.find('.nav li').length;
            let $li_width = 100 / $total;

            let total_steps = $wizard.find('.nav li').length;
            let move_distance = $wizard.width() / total_steps;
            let index_temp = index;
            let vertical_level = 0;

            let mobile_device = $(document).width() < 600 && $total > 3;

            if (mobile_device) {
              move_distance = $wizard.width() / 2;
              index_temp = index % 2;
              $li_width = 50;
            }

            $wizard.find('.nav li').css('width', $li_width + '%');

            let step_width = move_distance;
            move_distance = move_distance * index_temp;

            $current = index + 1;

            // if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
            //     move_distance -= 8;
            // } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
            //     move_distance += 8;
            // }

            if(mobile_device){
                let x: any = index / 2;
                vertical_level = parseInt(x);
                vertical_level = vertical_level * 38;
            }

            $wizard.find('.moving-tab').css('width', step_width);
            $('.moving-tab').css({
              'transform': 'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)',
              'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'

            });
          }
        });

        // Prepare the preview for profile picture
        $('#wizard-picture').change(function(){
            const input = $(this);

            if (input[0].files && input[0].files[0]) {
                const reader = new FileReader();

                reader.onload = function (e: FileReaderEvent) {
                    $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
                };
                reader.readAsDataURL(input[0].files[0]);
            }
        });

        $('[data-toggle="wizard-radio"]').click(function() {
          let wizard = $(this).closest('.card-wizard');
          wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
          $(this).addClass('active');
          $(wizard).find('[type="radio"]').removeAttr('checked');
          $(this).find('[type="radio"]').attr('checked', 'true');
        });

        $('[data-toggle="wizard-checkbox"]').click(function() {
          if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(this).find('[type="checkbox"]').removeAttr('checked');
          } else {
            $(this).addClass('active');
            $(this).find('[type="checkbox"]').attr('checked', 'true');
          }
        });

        $('.set-full-height').css('height', 'auto');

    }
    ngAfterViewInit() {

        $( window ).resize( () => { $('.card-wizard').each(function(){

            const $wizard = $(this);
            const index = $wizard.bootstrapWizard('currentIndex');
            let $total = $wizard.find('.nav li').length;
            let  $li_width = 100/$total;

            let total_steps = $wizard.find('.nav li').length;
            let move_distance = $wizard.width() / total_steps;
            let index_temp = index;
            let vertical_level = 0;

            let mobile_device = $(document).width() < 600 && $total > 3;

            if(mobile_device){
                move_distance = $wizard.width() / 2;
                index_temp = index % 2;
                $li_width = 50;
            }

            $wizard.find('.nav li').css('width',$li_width + '%');

            let step_width = move_distance;
            move_distance = move_distance * index_temp;

            let $current = index + 1;

            if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
                move_distance -= 8;
            } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
                move_distance += 8;
            }

            if(mobile_device){
                let x: any = index / 2;
                vertical_level = parseInt(x);
                vertical_level = vertical_level * 38;
            }

            $wizard.find('.moving-tab').css('width', step_width);
            $('.moving-tab').css({
                'transform':'translate3d(' + move_distance + 'px, ' + vertical_level +  'px, 0)',
                'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
            });

            $('.moving-tab').css({
                'transition': 'transform 0s'
            });
            });
        });
    }
    ngOnChanges(changes: SimpleChanges) {
        const input = $(this);

        if (input[0].files && input[0].files[0]) {
            const reader: any = new FileReader();

            reader.onload = function (e: FileReaderEvent) {
                $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
            };
            reader.readAsDataURL(input[0].files[0]);
        }
    }
}

So, you have the latest version?

[shalvy]

thus the same error I am getting on n both earlier version and the latest version, paper-dashboard-pro-angular-v1.1.0 😢 ERROR message below;

Type '(this: FileReader, e: FileReaderEvent) => void' is not assignable to type '(this: FileReader, ev: ProgressEvent) => any'. Types of parameters 'e' and 'ev' are incompatible. Type 'ProgressEvent' is not assignable to type 'FileReaderEvent'. Property 'getMessage' is missing in type 'ProgressEvent'.

On Thu, Oct 25, 2018 at 2:47 PM Chelaru Ciprian notifications@github.com wrote:

@shalvy https://github.com/shalvy in the latest version, the wizard component is looking like:

import { Component, OnInit, OnChanges, AfterViewInit, SimpleChanges } from '@angular/core'; import { FormControl, FormGroupDirective, NgForm, Validators, FormGroup } from '@angular/forms'; // import * as $ from 'jquery';

declare var swal:any; declare var $:any;

interface FileReaderEventTarget extends EventTarget { result:string } interface FileReaderEvent extends Event { target: FileReaderEventTarget; getMessage():string; }

@Component({ moduleId: module.id, selector: 'wizard-cmp', templateUrl: 'wizard.component.html' })

export class WizardComponent implements OnInit, AfterViewInit{ focus; focus1; focus2; readURL(input) { if (input.files && input.files[0]) { var reader = new FileReader();

        reader.onload = function (e:FileReaderEvent) {
            $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
        }
        reader.readAsDataURL(input.files[0]);
    }
}
onFinishWizard(){
    //here you can do something, sent the form to server via ajax and show a success message with swal
    swal("Good job!", "You clicked the finish button!", "success");
}
ngOnInit(){
  setTimeout(function() {
    $('.card.card-wizard').addClass('active');
  }, 600);

    // Code for the Validator
    const $validator = $('.card-wizard form').validate({
        rules: {
            firstname: {
                required: true,
                minlength: 3
            },
            lastname: {
                required: true,
                minlength: 3
            },
            email: {
                required: true,
                minlength: 3,
            }
        },

        highlight: function(element) {
          $(element).closest('.form-group').removeClass('has-success').addClass('has-danger');
        },
        success: function(element) {
          $(element).closest('.form-group').removeClass('has-danger').addClass('has-success');
        },
        errorPlacement : function(error, element) {
          $(element).append(error);
        }
    });
    // Wizard Initialization
    $('.card-wizard').bootstrapWizard({
        'tabClass': 'nav nav-pills',
        'nextSelector': '.btn-next',
        'previousSelector': '.btn-previous',

        onNext: function(tab, navigation, index) {
            var $valid = $('.card-wizard form').valid();
            if(!$valid) {
                $validator.focusInvalid();
                return false;
            }
        },

        onInit: function(tab: any, navigation: any, index: any){

          // check number of tabs and fill the entire row
          let $total = navigation.find('li').length;
          let $wizard = navigation.closest('.card-wizard');

          let $first_li = navigation.find('li:first-child a').html();
          let $moving_div = $('<div class="moving-tab">' + $first_li + '</div>');
          $('.card-wizard .wizard-navigation').append($moving_div);

          $total = $wizard.find('.nav li').length;
         let  $li_width = 100/$total;

          let total_steps = $wizard.find('.nav li').length;
          let move_distance = $wizard.width() / total_steps;
          let index_temp = index;
          let vertical_level = 0;

          let mobile_device = $(document).width() < 600 && $total > 3;

          if(mobile_device){
              move_distance = $wizard.width() / 2;
              index_temp = index % 2;
              $li_width = 50;
          }

          $wizard.find('.nav li').css('width',$li_width + '%');

          let step_width = move_distance;
          move_distance = move_distance * index_temp;

          let $current = index + 1;

          if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
              move_distance -= 8;
          } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
              move_distance += 8;
          }

          if(mobile_device){
              let x: any = index / 2;
              vertical_level = parseInt(x);
              vertical_level = vertical_level * 38;
          }

          $wizard.find('.moving-tab').css('width', step_width);
          $('.moving-tab').css({
              'transform':'translate3d(' + move_distance + 'px, ' + vertical_level +  'px, 0)',
              'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'

          });
          $('.moving-tab').css('transition','transform 0s');
       },

       onTabClick : function(tab: any, navigation: any, index: any){

           const $valid = $('.card-wizard form').valid();

           if (!$valid) {
               return false;
           } else {
               return true;
           }
       },

      onTabShow: function(tab: any, navigation: any, index: any) {
        var $total = navigation.find('li').length;
        var $current = index + 1;

        var $wizard = navigation.closest('.card-wizard');

        // If it's the last tab then hide the last button and show the finish instead
        if ($current >= $total) {
          $($wizard).find('.btn-next').hide();
          $($wizard).find('.btn-finish').show();
        } else {
          $($wizard).find('.btn-next').show();
          $($wizard).find('.btn-finish').hide();
        }

        let button_text = navigation.find('li:nth-child(' + $current + ') a').html();

        setTimeout(function() {
          $('.moving-tab').html(button_text);
        }, 150);

        var checkbox = $('.footer-checkbox');

        if (index == 0) {
          $(checkbox).css({
            'opacity': '0',
            'visibility': 'hidden',
            'position': 'absolute'
          });
        } else {
          $(checkbox).css({
            'opacity': '1',
            'visibility': 'visible'
          });
        }

        $total = $wizard.find('.nav li').length;
        let $li_width = 100 / $total;

        let total_steps = $wizard.find('.nav li').length;
        let move_distance = $wizard.width() / total_steps;
        let index_temp = index;
        let vertical_level = 0;

        let mobile_device = $(document).width() < 600 && $total > 3;

        if (mobile_device) {
          move_distance = $wizard.width() / 2;
          index_temp = index % 2;
          $li_width = 50;
        }

        $wizard.find('.nav li').css('width', $li_width + '%');

        let step_width = move_distance;
        move_distance = move_distance * index_temp;

        $current = index + 1;

        // if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
        //     move_distance -= 8;
        // } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
        //     move_distance += 8;
        // }

        if(mobile_device){
            let x: any = index / 2;
            vertical_level = parseInt(x);
            vertical_level = vertical_level * 38;
        }

        $wizard.find('.moving-tab').css('width', step_width);
        $('.moving-tab').css({
          'transform': 'translate3d(' + move_distance + 'px, ' + vertical_level + 'px, 0)',
          'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'

        });
      }
    });

    // Prepare the preview for profile picture
    $('#wizard-picture').change(function(){
        const input = $(this);

        if (input[0].files && input[0].files[0]) {
            const reader = new FileReader();

            reader.onload = function (e: FileReaderEvent) {
                $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
            };
            reader.readAsDataURL(input[0].files[0]);
        }
    });

    $('[data-toggle="wizard-radio"]').click(function() {
      let wizard = $(this).closest('.card-wizard');
      wizard.find('[data-toggle="wizard-radio"]').removeClass('active');
      $(this).addClass('active');
      $(wizard).find('[type="radio"]').removeAttr('checked');
      $(this).find('[type="radio"]').attr('checked', 'true');
    });

    $('[data-toggle="wizard-checkbox"]').click(function() {
      if ($(this).hasClass('active')) {
        $(this).removeClass('active');
        $(this).find('[type="checkbox"]').removeAttr('checked');
      } else {
        $(this).addClass('active');
        $(this).find('[type="checkbox"]').attr('checked', 'true');
      }
    });

    $('.set-full-height').css('height', 'auto');

}
ngAfterViewInit() {

    $( window ).resize( () => { $('.card-wizard').each(function(){

        const $wizard = $(this);
        const index = $wizard.bootstrapWizard('currentIndex');
        let $total = $wizard.find('.nav li').length;
        let  $li_width = 100/$total;

        let total_steps = $wizard.find('.nav li').length;
        let move_distance = $wizard.width() / total_steps;
        let index_temp = index;
        let vertical_level = 0;

        let mobile_device = $(document).width() < 600 && $total > 3;

        if(mobile_device){
            move_distance = $wizard.width() / 2;
            index_temp = index % 2;
            $li_width = 50;
        }

        $wizard.find('.nav li').css('width',$li_width + '%');

        let step_width = move_distance;
        move_distance = move_distance * index_temp;

        let $current = index + 1;

        if($current == 1 || (mobile_device == true && (index % 2 == 0) )){
            move_distance -= 8;
        } else if($current == total_steps || (mobile_device == true && (index % 2 == 1))){
            move_distance += 8;
        }

        if(mobile_device){
            let x: any = index / 2;
            vertical_level = parseInt(x);
            vertical_level = vertical_level * 38;
        }

        $wizard.find('.moving-tab').css('width', step_width);
        $('.moving-tab').css({
            'transform':'translate3d(' + move_distance + 'px, ' + vertical_level +  'px, 0)',
            'transition': 'all 0.5s cubic-bezier(0.29, 1.42, 0.79, 1)'
        });

        $('.moving-tab').css({
            'transition': 'transform 0s'
        });
        });
    });
}
ngOnChanges(changes: SimpleChanges) {
    const input = $(this);

    if (input[0].files && input[0].files[0]) {
        const reader: any = new FileReader();

        reader.onload = function (e: FileReaderEvent) {
            $('#wizardPicturePreview').attr('src', e.target.result).fadeIn('slow');
        };
        reader.readAsDataURL(input[0].files[0]);
    }
}

}

So, you have the latest version?

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular/issues/19#issuecomment-433036536, or mute the thread https://github.com/notifications/unsubscribe-auth/AZrC5xAsrfFCU__TbbgCT25nMEPwBF48ks5uobLwgaJpZM4UiVXh .

[AnjaneyalnDatla]

same error for me as well on the pro dashboard

[Atalus]

same error

[chelaruc]

Guys, can you give me the steps to reproduce this error? @Atalus @AnjaneyalnDatla @shalvy @dev2colours @iamnido

[chelaruc]

fixed in v1.2.0