Enter search queries below or use the tag links to the right to browse the knowledge base by category (Show All Tags).
Adding a resumablejs upload widget to a non-Robo-FTP Server website
An upload widget for a Robo-FTP Server can be used from a non-Robo-FTP HTTP server by loading it in an iframe.
On the Robo-FTP Server, place the upload_widget.html file (included below) in the "C:\Program Files (x86)\Robo-FTP Server\ProgramData\html" directory. You may need to remove the " (x86)" part. Then, on a separate and arbitrary server, place the iframe_container.html file (included below) wherever you'd like, and rename it as you see fit.
The iframe_container.html example contains a hardcoded username for the account to which the files will be uploaded ('var username = "ANONYMOUS_ACCOUNT_NAME";'). This should be set to the name of a proper anonymous user account, as configured in the Robo-FTP Server Console. Take care to make this an anonymous account (under "User Type" when adding the account) or you will be prompted for a username and password when you attempt to load the page.
The iframe_container.html example also contains a hardcoded URL for the upload widget itself, which you should set appropriately (var uploadWidgetUrl).
Note that you may need to enable 3rd party cookies. See your web browser's documentation on how to do so.
Once all is working to your satisfaction, you can modify each of these files as appropriate to your needs.
Any additional variables attached to the URL for iframe_container.html will be sent through to upload_widget.html. For example, loading http://www.YOURSERVER.com/upload/iframe_container.html?VARIABLE1=VALUE1&VARIABLE2=VALUE2 will result in upload_widget.html also receiving VARIABLE1 and VARIABLE2 (and their associated values). upload_widget.html does not use any such variables, but can be modified to do so as needed.
When using server event scripts, these variables can then be accessed through the %event_uploadarg variable. For example, using the variables specified above, you can access their values in an Upload Begin event script:
%event_uploadarg["VARIABLE1"]
%event_uploadarg["VARIABLE2"]
You may not wish to allow the user to see such variables in their browser's URL bar, in which case you can directly include the variables that need to be passed when loading the iframe. File iframe_container_explicit_vars.html (included below) gives an example of how to do that (modify function withQueryString() as needed).
Lastly, see upload_begin_event.s for an example use case in how these variables may be used (included below).
################################### upload_widget.html #######################################
<HTML>
<HEAD>
<TITLE>Robo-FTP Server</TITLE>
<link rel="stylesheet" href="resumablejs/resumable_widget.css">
<META charset="UTF-8">
<style type="text/css">
body {
margin: 0;
padding: 0;
}
</style>
</HEAD>
<BODY>
<script src="jquery/1.11.1/jquery.min.js"></script>
<script src="resumablejs/resumable.js"></script>
<script src="resumablejs/resumable_widget.js"></script>
<div class="resumablejs-queue" style="visibility: hidden"></div>
<script>
$(document).ready(function(){
function activateUploadWidget() {
var resumableOptions = {
target:'../roboftp_http_resumable.cgi'
, relDir: '../'
, method:'octet'
, simultaneousUploads: 1
, testChunks: true
, chunkSize: 1048576*50
};
var w = new ResumableJSWidget();
w.instantiate(resumableOptions, {
fileAdded: function() { $('.resumablejs-queue').css('visibility', 'visible');
$('.resumablejs_submitButton').css('visibility', 'visible');
$('.resumablejs_clearAllButton').css('visibility', 'visible');
$('.resumablejs_clearCompleteButton').css('visibility', 'visible');
$('html, body').animate( { scrollTop: $(document).height() }, 'fast');
}
, fileSuccess: function() { $('.listing').load(window.location.href + ' .listing'); }
});
}
activateUploadWidget();
});
</script>
</BODY>
</HTML>
################################### iframe_container.html ####################################
<html>
<head>
<style type="text/css" media="screen">
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
iframe {
width: 100%;
height: 100%;
overflow: hidden;
border: none;
}
</style>
<META charset="UTF-8">
</head>
<body id="body">
<script>
var username = "ANONYMOUS_ACCOUNT_NAME";
var uploadWidgetUrl = "https://localhost:543/" + username + "/robohtml/upload_widget.html";
function withQueryString(src)
{
var qs = window.location.search;
if (!qs) {
qs = "";
}
return src + qs;
}
var body = document.getElementById("body");
var iframe = document.createElement("iframe");
iframe.src = withQueryString(uploadWidgetUrl);
iframe.scrolling = "no";
document.body.appendChild(iframe);
</script>
</body>
</html>
################################### iframe_container_explicit_vars.html ####################################
<html>
<head>
<style type="text/css" media="screen">
body,
html {
width: 100%;
height: 100%;
overflow: hidden;
}
* {
padding: 0;
margin: 0;
}
iframe {
width: 100%;
height: 100%;
overflow: hidden;
border: none;
}
</style>
<META charset="UTF-8">
</head>
<body id="body">
<script>
var username = "ANONYMOUS_ACCOUNT_NAME";
var uploadWidgetUrl = "https://localhost:543/" + username + "/robohtml/upload_widget.html";
function withQueryString(src)
{
return src + "?VARIABLE1=VALUE1&VARIABLE2=VALUE2";
}
var body = document.getElementById("body");
var iframe = document.createElement("iframe");
iframe.src = withQueryString(uploadWidgetUrl);
iframe.scrolling = "no";
document.body.appendChild(iframe);
</script>
</body>
</html>
################################### upload_begin_event.s ####################################
; TO PROPERLY USE THIS SCRIPT:
; (A) set variables "inc_id" and "contactid" directly in the URL
; (as in the iframe_container.html example in http://kb.robo-ftp.com/kb/show/369)
; Example: http://www.YOURSERVER.com/upload/iframe_container.html?inc_id=1783981&contactid=271
; ; or
; (B) set variables "inc_id" and "contactid" directly in function withQueryString()
; (as in the iframe_container_explicit_vars.html example in http://kb.robo-ftp.com/kb/show/369)
; Example: http://www.YOURSERVER.com/upload/iframe_container_explicit_vars.html
; with
; function withQueryString(src)
; {
; return src + "?inc_id=1783981&contactid=271";
; }
SET log_filename = %event_kind + ".log"
LOG log_filename /append /maxsize=5000 /backups=5
SET log_str = "User " & %event_logonname & " is preparing upload of file " & %event_uploadarg[filename] & " with inc_id = " & %event_uploadarg[inc_id] & " and contactid = " & %event_uploadarg[contactid]
LOGMSG log_str
RETURN $ERROR_SUCCESS
Article last updated: 2021-01-18
Tags: resumablejs upload widget