Response not received in time

Question

Hi there, Iam trying to read file,and need to take that base64 value and pass it as input for some webservice. While doing this process,to read the file it is taking some time. Before reading my file it is going to further steps,and iam getting base64 value as empty. Any suggestion is highly appreciable for me.I tried to keep timeout while reading,but it is not working. Below is sample code   if (input.files.length!=0)      {         //file = input.files[i];       for (i=0;i    var  fileReader =  new  FileReader();    filname=input.files[i][ "name" ];        fileReader.readAsDataURL(input.files[i]);    //setTimeout(fileReader.readAsDataURL(input.files[i]), 10000);         fileReadContent = fileReader.result //here it is taking time to read the file     fileReadContent=fileReadContent.split( "," );    fileReadContent.shift(); //to get base64 value       if (fileReadContent!= "" )       storecontent();      else        alert( "Data not available" )      }      }

Asma Khalid · Accepted Answer

In HTML call as follow i.e. >    html >    head >       meta   charset = "utf-8" >       meta   name = "viewport"   content = "width=device-width" >       title > JS Multi File Upload title >    head >    body >      Please select a file and then hit Upload:           br />       br />       input   id = "file"   type = "file"  multiple />       br />       br />       button   id = "button" > Upload button >         body >    html >
Then in Javascript do following i.e.      // This is called when button is clicked.      document.getElementById( 'button' ).addEventListener( 'click' ,  function ()      {          // Add your code here.          ........         ........             var  files = document.getElementById( 'file' ).files;        if  (files.length > 0)        {          for (i = 0; i      {               getBase64(files[i]);         }       }               // Add your code here.          ........         ........          });          function  getBase64(file)     {           var  fileReader=  new  FileReader();          fileReader.readAsDataURL(file);          fileReader.onload =  function  ()        {          fileReadContent = fileReader.result.split( ',' )[1]          alert(fileReadContent );          };              fileReader.onerror =  function  (error)        {            alert( 'Error: ' , error);          };       }
I hope this will resolve the issue.   Do mark answer as accepted if helpful.

Asma Khalid · Answer

call below method in your loop i.e. function  getBase64(file)
{       var  fileReader=  new  FileReader();      fileReader.readAsDataURL(file);      fileReader.onload =  function  ()
{
fileReadContent = fileReader.result.split(',')[1]
alert( fileReadContent );      };
fileReader.onerror =  function  (error)
{        alert( 'Error: ' , error);      };   }
Dont forget to mark the answer as accepted, if helpful.

Ayesha Fathima · Answer

Hi Kaushik,   Thank you for your suggestion.

Ayesha Fathima · Answer

Hi Asma,   My issue got solved,i added a bit of code to ur code,iam calling function after 2 seconds(setTimeout(storecontent, 3000);).Then it is working fine..   Thank you so much for ur time.

Ayesha Fathima · Answer

Hi Asma,   This is my function,on click of upload button iam calling this.In this only i am calling one more function to which iam giving base64 value as input.   Here is my code. function  usefunc()   { //colvalueatt="";colvalueatt1="";colvalueatt2="";colvalueatt3="";filname="";fileext="";fullfile="";fullFilePath="";filenamearr="";attacharr="";flagval="";    fullFilePath=  "./../webroot/shared/IMS/File Uploads/" ;        var  input = document.getElementById( "file" );             //fileReadContent="";       attlength= "" ;      attachmentLinks =  "" ;       if (input.files.length!=0)      {         //file = input.files[i];       for (i=0;i    var  fileReader =  new  FileReader();    filname=input.files[i][ "name" ];    fileReader.readAsDataURL(input.files[i]);     fileReader.onload =  function  ()       {         fileReadContent = fileReader.result.split( ',' )[1]        alert(fileReadContent );        };           fileReader.onerror =  function  (error)       {          alert( 'Error: ' , error);        };     //setTimeout(fileReader.readAsDataURL(input.files[i]), 10000);          //fileReadContent = fileReader.result      //fileReadContentbase=fileReadContent.split(",");      //fileReadContentbase.shift();         fileext=filname.substr((~-filname.lastIndexOf( "." ) >>> 0) + 2);    fileext=fileext.toUpperCase();     fullfile=filname.substr(0,filname.lastIndexOf( "." ))+ "_" + new  Date().getTime()+ "." +fileext.toLowerCase();    flagval=fileReadContent;     colvalueatt+=fullfile+ "," ;     colvalueatt1+=filname+ "," ;     colvalueatt2+=fullFilePath+ "," ;     colvalueatt3+=flagval+ "," ;     attnamesforsend=colvalueatt1;     attachmentLinks +=  ".\..\webroot\shared\IMS\File Uploads\" +fullfile+" ,";     attlength=attachmentLinks.split( "," ).length;     attlength=attlength-1;     Array.prototype.clean =  function (deleteValue) {                       for  ( var  i = 0; i  this .length; i++) {                       if  ( this [i] == deleteValue) {                                this .splice(i, 1);                        i--;                       }                        }                        return   this ;                        };     filenamearr=colvalueatt1.split( "," ).clean( "" );     fullFilePatharr=colvalueatt2.split( "," ).clean( "" );     fullfilearr=colvalueatt.split( "," ).clean( "" );     attacharr=colvalueatt3.split( "," ).clean( "" );    modal.style.display =  "none" ;   combinedarray1=fullfilearr.map( function (value, index) {                        return  [(value),(filenamearr[index]),(fullFilePatharr[index]),(attacharr[index]) ];  // Combining arrays                         });                         if  ( $.fn.DataTable.isDataTable( '#attachmenttableforsendmail' ) ) {     $( '#attachmenttableforsendmail' ).DataTable().destroy();   }   $( '#attachmenttableforsendmail tbody' ).empty();                atttable=$( '#attachmenttableforsendmail' ).DataTable( {                retrieve:  true , //need to write this line otherwise it wil throw an error like "cannot reinitialize data table"                 paging:  false ,                searching: false ,           data: combinedarray1,           columns: [               { title:  "File Type" ,visible: false ,defaultContent:  "" },               { title:  "File Name" ,visible: true ,defaultContent:  "" , "render" :  function  ( data, type, row ) {                            return   ' +" '"+row[3]+"' "+" , '"+row[1]+"' "+')" >' + data +  ' ' ;                         }},               { title:  "File Path" ,visible: false ,defaultContent:  ""  },               { title:  "Base64" ,visible: false ,defaultContent:  ""  }           ]       } );        //storecontent();        $( '#attachmenttableforsendmail tbody' ).on(  'click' ,  'tr' ,  function  () {                       atttable.$( 'tr.selected' ).removeClass( 'selected' );               $( this ).addClass( 'selected' );                  } );        $( '#removeattbtn' ).click(  function  () {…

Asma Khalid · Answer

can you show code how you are calling?

Ayesha Fathima · Answer

Hi Asma,   Thank you so much for your help,but same thing is happening.It is calling my function before iam getting this value.

Ayesha Fathima · Answer

Hi Asma, Iam using Javascript

Kaushik Dhameliya · Answer

Hello  You need increase response timeout  check Below URL https://stackoverflow.com/questions/424358/increasing-the-timeout-value-in-a-wcf-service

Asma Khalid · Answer

What platform are you using? ASP.NET MVC or any other?