imagesecurity.js

<script>

  export default {

    props: {
      show: {
        type: Boolean,
        required: true,
        twoWay: true
      }
    },

    data() {
      
      return {
        data: {
          image: {
            blob: '',
            filename: '',
            size: '',
            type: '',
            lastModified: ''
          }
        },      
      };
    },

    methods: {

      onFileChange: function(e) 
      {
        let files = e.target.files || e.dataTransfer.files;

        if (!files.length){
          return;
        }
        
        this.createImage(files[0]);
      },

      splitFileName: function(fn)
      {
        let fileName = fn;
        let fileNameArr = fileName.split('.');

        if(fileNameArr.length > 2) {
          return false;
        } else {
          return fileNameArr;
        }
      },

      sanatizeFileName: function(fn)
      {
        let fnArray = this.splitFileName(fn);
        return Math.random().toString(36).substr(4, 10)+'.'+fnArray[1];
      },

      verifyFileExtension: function(fn)
      {
        let fileNameArr = this.splitFileName(fn);
        let allowedExtensions = ['jpeg','png','gif','jpg'];

        if(allowedExtensions.includes(fileNameArr[1]) != true) {
          return false;
        }
      },

      fileSecurity: function(fn,mt)
      {
        let fileName = fn;
        let mimeType = mt;

        let badExt = /(\.|\/)(bat|sh|exe|py|php2|gz|tgz|cpp|tcl|rp|deb|so|php3|php4|php5|cmd|sh|php|pl|cgi|386|dll|com|torrent|js|app|jar|pif|vb|vbscript|wsf|asp|cer|csr|jsp|drv|sys|ade|adp|bas|chm|cpl|crt|csh|fxp|hlp|hta|inf|ins|isp|jse|htaccess|htpasswd|ksh|lnk|mdb|mde|mdt|mdw|msc|msi|msp|mst|ops|pcd|prg|reg|scr|sct|shb|shs|url|vbe|vbs|wsc|wsf|wsh)$/i;

        if(fileName.match(badExt) != null || mimeType.match(badExt) != null || this.splitFileName(fileName) == false, this.verifyFileExtension(fileName) == false) {
          return false;
        } else {
          return true;
        };
      },

      createImage: function(file) 
      {
        let image = new Image();
        let reader = new FileReader();

        if(this.fileSecurity(file.name,file.type) === true) {
          this.data.image.size = file.size;
          this.data.image.type = file.type;
          this.data.image.filename = this.sanatizeFileName(file.name);
          this.data.image.lastModified = file.lastModified;          
        } else {
          this.data.safe = false;
        }
        
        reader.onload = (e) => {
          this.data.image.blob = e.target.result;
        };
        reader.readAsDataURL(file);
      },

      removeImage: function ()
      {
        this.data.image.blob = '';
        this.data.image.size = '';
        this.data.image.type = '';
        this.data.image.filename = '';
        this.data.image.lastModified = '';
      },

      upload: function() 
      {
        let showOffPayload = this.data.image;

        this.$http.post('showoff', {showOffPayload}).then(response => {
          this.removeImage();
          console.log('response ' + JSON.stringify(response.body));
          this.$parent.pushOnFeed(JSON.parse(JSON.stringify(response.body)));
        }).then(error => {
          console.log('upload' + error);
        });
      }

    }
  }