0

I'm using Filestack v3, I want to compare words number of DOC/DOCX files with number of pages. With the premise: "Each page has 200 words" I want to formulate that, for example: "If a doc/docx file has 2 pages, in theory, that file has 400 words, if it has 400 or more than 400 words is OK, otherwise is WRONG".

So, I have this:

HTML

<html>
<body>

<button id="files">UPLOAD</button>
<textarea id="dkd"></textarea>
<div id="result"></div>
<input type="text" id="cnw">
<input type="text" id="cnp">

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://static.filestackapi.com/v3/filestack.js"></script>
</body>
</html>

And my JS code is:

$("#files").click(function(){
  var client = filestack.init('myAPI');

  client.pick({
    accept: ['image/jpeg','image/png','image/gif','application/pdf','application/msword','application/vnd.openxmlformats-officedocument.wordprocessingml.document'],
    fromSources: ['local_file_system','googledrive','gmail','facebook','dropbox','onedrive','webcam'],
    lang: 'es',     
    maxSize: 2097152,
    maxFiles: 100
  }).then(function(Blobs) {

  var result = JSON.parse(JSON.stringify(Blobs));

  for(var i=0; i<result.filesUploaded.length; i++){

    if(result.filesUploaded[i].mimetype=="application/msword" || result.filesUploaded[i].mimetype=="application/vnd.openxmlformats-officedocument.wordprocessingml.document"){

        var dataFile = "https://cdn.filestackcontent.com/output=docinfo:true/"+result.filesUploaded[i].handle;
        var handlee = result.filesUploaded[i].handle;
        var lcconvert = "https://process.filestackapi.com/output=format:txt/"+result.filesUploaded[i].handle;

        //GET NUMBER OF WORDS
        $("#dkd").load(lcconvert, function(){               
            $.post("load2.php",{
                url: $("#dkd").val()
            }).success(function(response){

                document.getElementById('result').innerHTML += "<input type='hidden' name='mswcount' value='"+response+"'>";
                var arr = document.getElementsByName('mswcount');
                var tot=0;
                for(var i=0;i<arr.length;i++){
                    if(parseInt(arr[i].value))
                        tot += parseInt(arr[i].value);

                }                       

                document.getElementById('cnw').value = tot;

            });
        });

        //GET NUMBER OF PAGES
        $.post("numpage.php",{
            dF: dataFile
        }).success(function(response){

            var numpages = $.trim(response);// number of pages
            $("#cnp").val(numpages);

        });//post
    }//if
  }//for

  inspire();

 });//client.pick
});//files


//COMPARISON
function inspire(){

   var pag = $("#cnp").val();//pages
   var pagpal = pag*200; //number of pages * 200 = number of words
   var pal = $("#cnw").val();//words

   console.log("Pages: "+pag);
   console.log("Words: "+pal);

   if(pal>=pagpal){
      console.log("OK");
   } else {
      console.log("WRONG");
   }
}

I want function called inspire do the comparison with input values and show the result in console (number of pages, number of words and final message), but the problem is inspire function executes before Filestack process finishes and I want Filestack process finishes first putting values on inputs and then function executes.

How can I fix it?

NekoLopez
  • 579
  • 1
  • 9
  • 28

1 Answers1

0

Put the code that you want to run in the client.pick(/**/).then() callback. Or use await/async to wait for client.pick to return a value: https://javascript.info/async-await

Brian Kung
  • 3,957
  • 4
  • 21
  • 30