0

OK So its kind of the same but not entirely. I had a function and variables that needed to be moved out of the document.ready function

This is my error;

Uncaught ReferenceError: ValidateFile is not defined I have looked at other solutions for this problem but none is working for me.

If I move the function ValidateFile() to the head section then I get an error that type is not defined.

What am I missing please? Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> 
<title>Choose a file to upload</title>
</head>
<body>

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/select2-bootstrap-css/1.4.6/select2-bootstrap.min.css">

<script type="text/javascript">

$(document).ready(function(){

    var file;
    var name; 
    var size;
    var type;

 window.addEventListener('message',function(event) {
    //if(event.origin !== 'http://demo.dev) return;
        alert('message received:  ' + event.data,event);
        event.source.postMessage('hola back !',event.origin);
    },false);
$('progress').hide();
$('#pleasewait').hide();

function ValidateFile(){
    var formData = new FormData($('form')[0]);
    var str=type.substring(0,5);
    if (str!='image'){
        alert( 'the file '+ name +' is not a valid image, Please upload only image files, thank you. The management!');
    }else{
        //alert(' I got the file : ' + formData + ' file: ' +file+' name: '+name+' size: '+size+' type: '+type );
        $('progress').show();
        $('#pleasewait').show();
    }
}

$(':file').change(function(){
    file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
}); 

});

</script>
<p><h1>Choose a file to upload</h1></p>
<form name="UploadForm" enctype="multipart/form-data" class="form" action="/api/v2/process_images" method="post" onsubmit="javascript: return ValidateFile();" >
File: <input type="file" name="file1" />


<input type="submit" value="upload" id="upload_image"/>
</form>
<progress ></progress>
        &nbsp;&nbsp;
    <h4 id='pleasewait'>Please wait a few seconds. Uploading and spliting your image into different sizes</h4>


</body>
</html>
whoopididoo
  • 411
  • 2
  • 10
  • 19
  • 2
    Move the function outside of `ready` to make it _public_. Right now it is _private_ of the ready callback. – Tushar Nov 18 '15 at 09:32
  • 1
    Possible duplicate of [Why can I not define functions in jQuery's document.ready()?](http://stackoverflow.com/questions/1055767/why-can-i-not-define-functions-in-jquerys-document-ready) – Shailendra Sharma Nov 18 '15 at 09:36

2 Answers2

2

Your function is defined within the scope of the $(document).ready() callback and cannot be seen from the outside. Either define the function outside the $(document).ready() scope of call it only from within.

put your ValidateFile() out side of document.ready will work

Shailendra Sharma
  • 6,976
  • 2
  • 28
  • 48
1

try

<script type="text/javascript">
   var file;
    var name; 
    var size;
    var type;
function ValidateFile(){
    var formData = new FormData($('form')[0]);
    var str=type.substring(0,5);
    if (str!='image'){
        alert( 'the file '+ name +' is not a valid image, Please upload only image files, thank you. The management!');
    }else{
        //alert(' I got the file : ' + formData + ' file: ' +file+' name: '+name+' size: '+size+' type: '+type );
        $('progress').show();
        $('#pleasewait').show();
    }
}

$(document).ready(function(){



 window.addEventListener('message',function(event) {
    //if(event.origin !== 'http://demo.dev) return;
        alert('message received:  ' + event.data,event);
        event.source.postMessage('hola back !',event.origin);
    },false);
$('progress').hide();
$('#pleasewait').hide();



$(':file').change(function(){
    file = this.files[0];
    name = file.name;
    size = file.size;
    type = file.type;
}); 

});

</script>
srinath madusanka
  • 582
  • 7
  • 20