How to Hide Cancel all Uploads Button

Last post 07-04-2011, 1:23 PM by Eric. 6 replies.
Sort Posts: Previous Next
  •  06-21-2011, 8:51 AM 68075

    How to Hide Cancel all Uploads Button

    Hello, I have few questions...
    1. How can I hide "Cancel all Uploads"  Button While uploading the files?
    2. How can I disable "Upload Multiple Files" Button  
    Button While uploading the files? [used to select files]
    3. I have a Manual 'Upload'  [when we click this, only then the uploading begins]. How to Hide this Button Until selecting files?
    4. Can I change the Progress bar color from Green to Blue?
     
    Please Reply me ASAP
     
    Thx,
    Adyboy 
  •  06-21-2011, 11:54 AM 68077 in reply to 68075

    Re: How to Hide Cancel all Uploads Button

    Hi adyboy369,
     
    Please try the following code:
     

    how to hide some buttons when uploading:


    <?php require_once "phpuploader/include_phpuploader.php" ?>
    <?php session_start(); ?>
    <!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>
    <title>Form - Start uploading manually</title>
    <link href="demo.css" rel="stylesheet" type="text/css" />
    <style>
    .AjaxUploaderCancelAllButton {
     display: none !important;
    }
    </style>
    <script type="text/javascript">
     function doStart()
     {
      var hidden=this;
      document.getElementById("temptest").style.display="none";     
      var uploadobj = document.getElementById('myuploader');
      if (uploadobj.getqueuecount() > 0)
      {
       uploadobj.startupload();
      }
      else
      {
       alert("Please browse files for upload");
      }
     }
     </script>
    </head>
    <body>
    <div class="demo">
    <h2>Start uploading manually</h2>
    <p>This sample demonstrates how to start uploading manually after file
    selection vs automatically.</p>
    <P>Allowed file types: <span style="color: red">jpg, gif, txt, png, zip</span></p>
    <!-- do not need enctype="multipart/form-data" -->
    <form id="form1" method="POST">
    <?php
    $uploader=new PhpUploader();
    $uploader->MaxSizeKB=1023340;
    $uploader->Name="myuploader";
    $uploader->InsertText="Select multiple files (Max 10M)";
    $uploader->AllowedFileExtensions="*.jpg,*.png,*.gif,*.txt,*.zip,*.rar";
    $uploader->MultipleFilesUpload=true;
    $uploader->ManualStartUpload=true;
    //you can change the image color to blue or something else
    $uploader->ProgressPicture="phpuploader/resources/button.png";
    $uploader->Render();
    ?>
    <div id="temptest">
    <button id="cancelallbtn" style='display: none; color: red;'
     onclick="CancelAll();return false;">Cancel All</button>
    </div>
    <button id="submitbutton" onclick="doStart();return false;">Start
    Uploading Files</button>
    </form>
    <br />
    <?php
    $fileguidlist=@$_POST["myuploader"];
    if($fileguidlist)
    {
     $guidlist=explode("/",$fileguidlist);
     echo("<div style='font-family:Fixedsys;'>");
     echo("Uploaded ");
     echo(count($guidlist));
     echo(" files:");
     echo("</div>");
     echo("<hr/>");
     foreach($guidlist as $fileguid)
     {
      $mvcfile=$uploader->GetUploadedFile($fileguid);
      if($mvcfile)
      {
       echo("<div style='font-family:Fixedsys;border-bottom:dashed 1px gray;padding:6px;'>");
       echo("FileName: ");
       echo($mvcfile->FileName);
       echo("<br/>FileSize: ");
       echo($mvcfile->FileSize." b");
       echo("</div>");
      }
     }
    }
    ?></div>
    <script type="text/javascript">
        function CuteWebUI_AjaxUploader_OnQueueUI(list)  
        {  
            var cancelallbtn=document.getElementById("cancelallbtn");
            if(list.length<2)
            {  
              cancelallbtn.style.display="none";  
                return;  
            }  
             cancelallbtn.style.display=""; 
        }
    function CuteWebUI_AjaxUploader_OnTaskComplete(task)
     {
      var div=document.createElement("DIV");
      div.innerHTML=task.FileName + " is uploaded!";
      document.body.appendChild(div);
     }
        function CancelAll()
     {
         var uploader=document.getElementById('myuploader');
         uploader.cancelall();  
     }
        function CuteWebUI_AjaxUploader_OnStart()
        {
          var hidden=this;
           hidden.internalobject.insertBtn.style.display="none";
           hidden.internalobject.cancelBtn.style.visibility="hidden";
            hidden.internalobject.cancelBtn.style.display="none";
        }
       </script>
    </body>
    </html>
    Thanks for asking
  •  06-22-2011, 1:43 AM 68083 in reply to 68077

    Re: How to Hide Cancel all Uploads Button

    Hi Eric,
     
    Thanks A Lot. This Code Works fine now. It is Working Exactly the way I want.
    I'll try with all these softwares from cutesoft.net
     
     
    Thanks for your support. 
     
    Cheers,
    Adyboy369 
  •  06-28-2011, 6:43 AM 68191 in reply to 68077

    Re: How to Hide Cancel all Uploads Button

    Hi Eric,
     
    In the above code,
     
    I have tried using
     
    $uploader->CancelUploadMsg="Cancel Current Upload"; 
     
    This will cancel the current uploading file and continues with uploading next file in Queue .
     
    The Problem Comes here. When I select only one file and click on upload, If I click on  
    Cancel Current Upload,
     
    Uploading is stopped. But, I can't find any option to select other  files[i cannot see 
    Select multiple files (Max 10M)  Button]. 
     
    Also if I select multiple files and if I click on cancel current upload for each and every file,  even then I cannot find option to select new set of files.
     
    Can you assist me in fixing this issue?
     
    Thanks in Adv,
    adyboy369 
     
  •  06-28-2011, 8:41 AM 68197 in reply to 68191

    Re: How to Hide Cancel all Uploads Button

    Hi adyboy369,
     
    Please try the following snippet:
    <?php require_once "phpuploader/include_phpuploader.php" ?>
    <?php session_start(); ?>
    <!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>
    <title>Form - Start uploading manually</title>
    <link href="demo.css" rel="stylesheet" type="text/css" />
    <style>
    .AjaxUploaderCancelAllButton {
     display: none !important;
    }
    </style>
    <script type="text/javascript">
     function doStart()
     {
      var hidden=this;
      document.getElementById("temptest").style.display="none";     
      var uploadobj = document.getElementById('myuploader');
      if (uploadobj.getqueuecount() > 0)
      {
       uploadobj.startupload();
      }
      else
      {
       alert("Please browse files for upload");
      }
     }
     </script>
    </head>
    <body>
    <div class="demo">
    <h2>Start uploading manually</h2>
    <p>This sample demonstrates how to start uploading manually after file
    selection vs automatically.</p>
    <P>Allowed file types: <span style="color: red">jpg, gif, txt, png, zip</span></p>
    <!-- do not need enctype="multipart/form-data" -->
    <form id="form1" method="POST">
    <?php
    $uploader=new PhpUploader();
    $uploader->MaxSizeKB=1023340;
    $uploader->Name="myuploader";
    $uploader->InsertText="Select multiple files (Max 10M)";
    //$uploader->AllowedFileExtensions="*.jpg,*.png,*.gif,*.txt,*.zip,*.rar";
    $uploader->MultipleFilesUpload=true;
    $uploader->ManualStartUpload=true;
    $uploader->CancelUploadMsg="Cancel Current Upload"; 
    //you can change the image color to blue or something else
    $uploader->ProgressPicture="phpuploader/resources/button.png";
    $uploader->Render();
    ?>
    <div id="temptest">
    <button id="cancelallbtn" style='display: none; color: red;'
     onclick="CancelAll();return false;">Cancel All</button>
    </div>
    <button id="submitbutton" onclick="doStart();return false;">Start
    Uploading Files</button>
    </form>
    <br />
    <?php
    $fileguidlist=@$_POST["myuploader"];
    if($fileguidlist)
    {
     $guidlist=explode("/",$fileguidlist);
     echo("<div style='font-family:Fixedsys;'>");
     echo("Uploaded ");
     echo(count($guidlist));
     echo(" files:");
     echo("</div>");
     echo("<hr/>");
     foreach($guidlist as $fileguid)
     {
      $mvcfile=$uploader->GetUploadedFile($fileguid);
      if($mvcfile)
      {
       echo("<div style='font-family:Fixedsys;border-bottom:dashed 1px gray;padding:6px;'>");
       echo("FileName: ");
       echo($mvcfile->FileName);
       echo("<br/>FileSize: ");
       echo($mvcfile->FileSize." b");
       echo("</div>");
      }
     }
    }
    ?>
    </div>
    <script type="text/javascript">
        function CuteWebUI_AjaxUploader_OnQueueUI(list)  
        {  
            var cancelallbtn=document.getElementById("cancelallbtn");
            if(list.length<2)
            {  
              cancelallbtn.style.display="none";  
                return;  
            }  
             cancelallbtn.style.display=""; 
        }
    function CuteWebUI_AjaxUploader_OnTaskComplete(task)
     {
      var div=document.createElement("DIV");
      div.innerHTML=task.FileName + " is uploaded!";
      document.body.appendChild(div);
     }
        function CancelAll()
     {
         var uploader=document.getElementById('myuploader');
         uploader.cancelall();  
     }
        function CuteWebUI_AjaxUploader_OnStart()
        {
          var hidden=this;
           hidden.internalobject.insertBtn.style.display="none";
           //hidden.internalobject.cancelBtn.style.visibility="hidden";
           //hidden.internalobject.cancelBtn.style.display="none";
        }
        function CuteWebUI_AjaxUploader_OnStop()  
        {
         var hidden=this;
         hidden.internalobject.insertBtn.style.display="";
        }    
       </script>
    </body>
    </html>
    Thanks for asking
     
  •  07-04-2011, 9:26 AM 68340 in reply to 68197

    Re: How to Hide Cancel all Uploads Button

    Hi Eric,
     
    The Code posted by you works fine. But it seems it doesn't suit  for my code.
     
    Here is my code. Kindly let me know what I have to do for this? 
     
    The Problem is when I click on cancel current upload, Select Upload Files Button is visible. If I select the files, I cannot see Start Upload Button.
     
    <!-- Uploading Progress bar code STARTS here -->
    <style>
    .AjaxUploaderCancelAllButton {
     display: none !important;
    }
    </style>
    <script type="text/javascript">    
        function doStart()    
        {    
    var hidden=this;
    document.getElementById("temptest2").style.display="none";
    var hidden=this;
    document.getElementById("temptest").style.display="none"; 
            var uploadobj = document.getElementById('myuploader');    
            if (uploadobj.getqueuecount() > 0)    
            {    
                uploadobj.startupload();    
            }    
            else   
            {    
                alert("Please browse files for upload");    
            }   
        }    
        </script> 
    <?php require_once "phpuploader/include_phpuploader.php" ?>   
    <div align="center">
    <?php 
    $uploader=new PhpUploader();
    $uploader->MaxSizeKB=1023340;
    $uploader->Name="myuploader";
    $uploader->InsertText="Select multiple files (Max 10M)";
    //$uploader->AllowedFileExtensions="*.jpg,*.png,*.gif,*.txt,*.zip,*.rar";
    $uploader->MultipleFilesUpload=true;
    $uploader->ManualStartUpload=true;
    $uploader->CancelUploadMsg="Cancel Current Upload"; 
    //you can change the image color to blue or something else
    $uploader->ProgressPicture="phpuploader/resources/button.png";
    $uploader->Render();
    ?>
    <br>
    <div id="temptest">
    <button id="cancelallbtn" style='display: none; color: black; cursor: pointer;'
    onclick="CancelAll();return false;">Cancel All</button>
    </div>
    <br><br>
    <div id="temptest2">
    <button id="submitbutton" style='display: none; cursor: pointer;'
    onclick="doStart();return false;">Upload</button>
    </div>
    </div>
    <script type="text/javascript"> 
        function CuteWebUI_AjaxUploader_OnQueueUI(list)   
        {   
            var cancelallbtn=document.getElementById("cancelallbtn"); 
    var submitbutton=document.getElementById("submitbutton");
    if(list.length<1)
            {   
              submitbutton.style.display="none";   
                return;   
            }   
             submitbutton.style.display="";
            if(list.length<2)
            {   
              cancelallbtn.style.display="none";   
                return;   
            }   
             cancelallbtn.style.display="";
        } 
    function CuteWebUI_AjaxUploader_OnTaskComplete(task)
     {
      var div=document.createElement("DIV");
      div.innerHTML=task.FileName + " is uploaded!";
      document.body.appendChild(div);
     } 
        function CancelAll()
     {
         var uploader=document.getElementById('myuploader'); 
         uploader.cancelall(); 
    cancelallbtn.style.display="none";  
     } 
    function CuteWebUI_AjaxUploader_OnStart()
        {
          var hidden=this;
           hidden.internalobject.insertBtn.style.display="none";
      hidden.internalobject.submitbutton.style.visibility="hidden";
           hidden.internalobject.submitbutton.style.display="none";
           hidden.internalobject.cancelBtn.style.visibility="hidden";
           hidden.internalobject.cancelBtn.style.display="none";
      
        }
    function CuteWebUI_AjaxUploader_OnStop()   
        {
    var hidden=this;
         hidden.internalobject.insertBtn.style.display=""; 
         
        }    
     </script>
     <!-- Uploading Progress bar code ENDS here --> 
  •  07-04-2011, 1:23 PM 68341 in reply to 68340

    Re: How to Hide Cancel all Uploads Button

    Hi adyboy369,
     
     
    change:
     
    function CuteWebUI_AjaxUploader_OnStop()  
        {
    var hidden=this;
         hidden.internalobject.insertBtn.style.display="";  
        
        } 
     
    to
     
    function CuteWebUI_AjaxUploader_OnStop()  
        {
    var hidden=this;
         hidden.internalobject.insertBtn.style.display="";  
        hidden.internalobject.submitbutton.style.display="";
        
        } 
     
    http://ajaxuploader.com/document/scr/JavaScript-API.htm , after you choose files,   CuteWebUI_AjaxUploader_OnSelect() will be fired.
     
    Thanks for asking
View as RSS news feed in XML