<script language="SpeedScript">
PROCEDURE Output-Headers:
DEFINE VAR mpUploadedFile AS MEMPTR NO-UNDO.
DEFINE VAR chUploadedFileName AS CHAR NO-UNDO.
IF REQUEST_METHOD EQ 'POST' THEN
DO:
/* 'filename' refers to the name of the field in the form.
get-binary-data returns the contents of the file associated with the
form field named 'filename'. */
set-size(mpUploadedFile) = 0.
ASSIGN mpUploadedFile = get-binary-data("fileToUpload").
IF mpUploadedFile NE ? THEN DO:
/* if we got a valid pointer, save data to file. The value of the
field 'filename' is the file name posted */
ASSIGN chUploadedFileName = get-value("fileToUpload").
COPY-LOB FROM mpUploadedFile TO FILE chUploadedFileName NO-CONVERT.
END.
output-content-type("text/html":U).
IF SEARCH(chUploadedFileName) EQ ? THEN
{&OUT} SUBSTITUTE('File <quote><strong>&1</strong></quote> has <span style="color:red">failed</span> to upload correctly.',
chUploadedFileName).
ELSE
{&OUT} SUBSTITUTE('<strong>&1</strong> file has <span style="color:green">successfully</span> been uploaded.',
chUploadedFileName).
set-size(mpUploadedFile) = 0.
END.
RETURN.
END PROCEDURE.
IF REQUEST_METHOD EQ 'POST' THEN
RETURN.
</script>
<!DOCTYPE html>
<html>
<head>
<title>Upload Files using XMLHttpRequest </title>
<script type="text/javascript">
function fileSelected() {
var file = document.getElementById('fileToUpload').files[0];
if (file) {
var fileSize = 0;
if (file.size > 1024 * 1024)
fileSize = (Math.round(file.size * 100 / (1024 * 1024)) / 100).toString() + 'MB';
else
fileSize = (Math.round(file.size * 100 / 1024) / 100).toString() + 'KB';
document.getElementById('fileName').innerHTML = file.name;
document.getElementById('fileSize').innerHTML = fileSize;
document.getElementById('fileType').innerHTML = file.type;
}
};
function uploadFile() {
var fd = new FormData();
fd.append("fileToUpload", document.getElementById('fileToUpload').files[0]);
var xhr = new XMLHttpRequest();
xhr.upload.addEventListener("progress", uploadProgress, false);
xhr.addEventListener("load", uploadComplete, false);
xhr.addEventListener("error", uploadFailed, false);
xhr.addEventListener("abort", uploadCanceled, false);
xhr.open("POST", "`APPURL`/DocumentFileUpload.html");
xhr.send(fd);
document.getElementById('webspeedServerResponce').innerHTML = '';
document.getElementById('progressBar').style.display = '';
};
function uploadProgress(evt) {
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total);
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%';
document.getElementById('progressBar').width = percentComplete.toString() + '%';
if (percentComplete.toString() == '100') {
document.getElementById('webspeedServerResponce').innerHTML = '`PROVERSION` is processing the file. Please Wait';
}
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute';
}
};
function uploadComplete(evt) {
/* This event is raised when the server send back a response */
//alert(evt.target.responseText);
document.getElementById('webspeedServerResponce').innerHTML = evt.target.responseText;
// Just force it to display 100% to handle smaller files.
document.getElementById('progressNumber').innerHTML = '100%';
document.getElementById('progressBar').width = '100%';
};
function uploadFailed(evt) {
alert("There was an error attempting to upload the file.");
};
function uploadCanceled(evt) {
alert("The upload has been canceled by the user or the browser dropped the connection.");
};
</script>
</head>
<body>
<style type="text/css">
label {float:left;
width:180px;
text-align:right};
</style>
<form id="fileUploadForm" enctype="multipart/form-data" method="post" action="`APPURL`/DocumentFileUpload.html">
<div style="margin:10px">
<label for="fileToUpload">Select a File to Upload</label><br />
<input size="50" type="file" name="fileToUpload" id="fileToUpload" onchange="fileSelected();"/>
</div>
<label for="fileName">File Name:</label><div id="fileName"> </div>
<label for="fileSize">File Size:</label><div id="fileSize"> </div>
<label for="fileType">File Type:</label><div id="fileType"> </div>
<div style="margin:10px; clear:both">
<input type="button" onclick="uploadFile()" value="Upload" />
</div>
<label id="progressNumber">0%</label>
<div style="float:left; width:400px;height:24px; border:2px outset #888888; margin:0">
<table id="progressBar" width="0" style="display:none;margin:0;padding:0">
<tbody>
<tr>
<td bgcolor="#00CCFF" > </td>
</tr>
</tbody>
</table>
</div>
<div style="clear:both;margin:10px" id="webspeedServerResponce"></div>
</form>
</body>
</html>
