filetype validation before crop image using jQuery

Question

I have this code for crop image using jquery croppie plugin and upload using bootstrap modal. in my case i work with FileReader

$(document).ready(function(){

    $image_crop = $('#image_demo').croppie({
        enableExif: true,
        viewport: {
            width:200,
            height:300,
            type:'square' //circle
        },
        boundary:{
            width:300,
            height:300
        }
    });
    var fileTypes = ['jpg', 'jpeg', 'png'];
    $('#upload_image').on('change', function(){
        var reader = new FileReader();
        reader.onload = function (event) {
            $image_crop.croppie('bind', {
                url: event.target.result
            }).then(function(){
                console.log('jQuery bind complete');
            });
        }
        reader.readAsDataURL(this.files[0]);
        $('#uploadimageModal').modal('show');
    });

    $('.crop_image').click(function(event){
        $image_crop.croppie('result', {
            type: 'canvas',
            size: 'viewport'
        }).then(function(response){
            $.ajax({
                url:"../account/edit/profileimage",
                type: "POST",
                //dataType:"json",
                data:{"image": response},
                success:function(data)
                {
                    /*
                    if(response.status === 'error'){
                        $('#uploadimageModal').animate({ scrollTop: $('#uploaderror').offset().top }, 500);
                        $('#uploaderror').html(response.message);
                    }
                    else {
                    */
                        $('#uploadimageModal').modal('hide');
                        $('#uploaded_image').html(data);
                     /*
                    }
                    */
                }
            });
        })
    });

});

Now in action i need to check filetype validation and show alert before load modal box. how do can i show alert message?!

Check the file's MIME type, not file extension: https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload — Rory McCrossan, Nov 14 '18 at 11:54

score 2 · Accepted Answer · answered Nov 14 '18 at 11:56

Have a look at the code below. Hope it helps

var fileTypes = ['jpg', 'jpeg', 'png'];
$('#upload_image').on('change', function() {
  var reader = new FileReader();
  var file = this.files[0]; // Get your file here
  var fileExt = file.type.split('/')[1]; // Get the file extension

  if (fileTypes.indexOf(fileExt) !== -1) {
    reader.onload = function(event) {
      $image_crop.croppie('bind', {
        url: event.target.result
      }).then(function() {
        console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(file);
    $('#uploadimageModal').modal('show');
  } else {
    alert('File not supported');
  }
});

filetype validation before crop image using jQuery

1 Answers1