File Uploads


Overview

In this example we're going to demonstrate performing file uploads using Browser Bucket.

Online File Manager Demo


Browser Script

If you're loading a remote script, be sure to set the Access-Control-Allow-Origin header to *. This is required

var BrowserID = -1;
var TabID = -1;
var TransferID = -1;
var FileUploadInterval; 
var IntervalCounter = 0; 
var SessionInfo;

if(window.location.href.indexOf("playground/fileupload.php") == -1)
{
 window.location.href = 'https://www.browserbucket.com/playground/fileupload.php';
}
else
{
 sendGETRequest('GetBrowserInfo', '', loading_step_0);
}


function loading_step_0(obj)
{
 BrowserID = obj.BrowserID;
 sendGETRequest('GetData',  ('&BrowserID='+obj.BrowserID), loading_step_1);
}


function loading_step_1(obj)
{
 SessionInfo = obj; 
 if(SessionInfo.hasOwnProperty("uploadattempted"))
 {
  sendGETRequest('ReleaseBrowser', ('&BrowserID=' + BrowserID), function(){});
 }
 else
 {
  sendGETRequest('GetTabs', ('&BrowserID='+BrowserID), loading_step_2);
 }
}

function loading_step_2(obj)
{
    
 TabID = obj.tabs[0].tabid;
 sendGETRequest('UploadFile', ("&BrowserID="+BrowserID+"&TabID="+TabID+"&File_Name=coolman.jpeg&Selector=" + encodeURIComponent("#fileBox") + "&File_URL=" + encodeURIComponent("https://www.browserbucket.com/playground/cat-picture.jpeg")), loading_step_3);
        
}

function loading_step_3(obj)
{

  TransferID = obj.TransferID;
  FileUploadInterval = setInterval(function(){
    
  sendGETRequest("GetFileTransferStatus", "&TransferID="+TransferID, loading_step_4); 
        
   }, 1000);
   
}


function loading_step_4(obj)
{

IntervalCounter++;
if(IntervalCounter > 6)
{
   console.log("Upload Failed");
   sendGETRequest('ReleaseBrowser', ('&BrowserID=' + BrowserID), function(){});
}

    if(obj.FileTransferStatus == 'Complete')
    {
     clearInterval(FileUploadInterval);
     SessionInfo.uploadattempted = true;
     sendPOSTRequest('SaveData',('&BrowserID='+BrowserID) , JSON.stringify(SessionInfo), loading_step_5)
    }
}

function loading_step_5(obj)
{
         document.getElementById('uploaddataform1').submit();
}

function sendGETRequest(endpoint, params, callback_is)
{

var authdata = "?Token=go7Y5ynGOtCgOkmeBZnxg04ShjMHLLW1&UserID=cbb28f187319784cd6be2aa53b053155";    
var url = 'https://api.browserbucket.com/' + endpoint + '/'+ authdata + params;    
 
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

console.log(this.responseText);
var obj = JSON.parse(this.responseText);

callback_is(obj);

}
};
xmlhttp.open('GET', url);
xmlhttp.send();
}


function sendPOSTRequest(endpoint, params, post_body, callback_is)
{

var authdata = "?Token=go7Y5ynGOtCgOkmeBZnxg04ShjMHLLW1&UserID=cbb28f187319784cd6be2aa53b053155";    
var url = 'https://api.browserbucket.com/' + endpoint + '/'+ authdata + params;    
    
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {

var obj = JSON.parse(this.responseText);

callback_is(obj);

}
};
xmlhttp.open('POST', url);
xmlhttp.send(post_body);
}