File Transfer

From 9c73a588d37f899ace438c54eabf123a9300cee2 Mon Sep 17 00:00:00 2001 From: Andrzej Popowski Date: Wed, 9 Dec 2015 14:15:49 +0100 Subject: [PATCH] [SampleApp] - implementation of filetransfer Change-Id: Iff4b5e9a80bd55bbcc18b3ace2c34fc26fc749e3 Signed-off-by: Andrzej Popowski --- sample/index.html | 2 +- sample/plugins/filetransfer/index.html | 60 ++++++ sample/plugins/filetransfer/js/index.js | 269 ++++++++++++++++++++++++++ sample/plugins/filetransfer/styles/main.css | 286 ++++++++++++++++++++++++++++ 4 files changed, 616 insertions(+), 1 deletion(-) create mode 100644 sample/plugins/filetransfer/index.html create mode 100644 sample/plugins/filetransfer/js/index.js create mode 100644 sample/plugins/filetransfer/styles/main.css diff --git a/sample/index.html b/sample/index.html index 385a595..f950649 100644 --- a/sample/index.html +++ b/sample/index.html @@ -42,7 +42,7 @@

Dialogs

Events

File

FileTransfer

Globalization

Media

Network Information

diff --git a/sample/plugins/filetransfer/index.html b/sample/plugins/filetransfer/index.html new file mode 100644 index 0000000..5ce572d --- /dev/null +++ b/sample/plugins/filetransfer/index.html @@ -0,0 +1,60 @@ + + + + + + + + + + + File Transfer + + + + +

+ + + +

Clicking the Dowload button downloads an image from the AppBuilder site and saves it on the device.
Clicking the Upload button allows you to pick an image and upload it to the server.
Clicking the Server URL button allows you to set a server URL address (default is http://www.filedropper.com/).

+ + + diff --git a/sample/plugins/filetransfer/js/index.js b/sample/plugins/filetransfer/js/index.js new file mode 100644 index 0000000..24b3022 --- /dev/null +++ b/sample/plugins/filetransfer/js/index.js @@ -0,0 +1,269 @@ +/* + * Copyright (c) 2014-2015 Telerik AD + * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +var imagePath = null; +var videoPath = null; +var serverURL = 'http://www.filedropper.com/'; + + +var onProgressCB = function (progEvt) { + document.getElementById('progress').innerHTML = Math.round((100 *progEvt.loaded / progEvt.total)) + '%'; + console.log(Math.round((100 * progEvt.loaded / progEvt.total)) + '%'); +}; + + +var downloadApp = function() { +} + + +downloadApp.prototype = { + run: function(imageUri, videoUri, imageFileName, videoFileName, folderName) { + var that = this, + filePath = ''; + + document.getElementById('imgOper').addEventListener('click', function() { + if (imagePath) { // upload + that.uploadImg(); + } else { // upload + that.getFilesystem( + function(fileSystem) { + console.log('gotFS'); + var filePath; + var urlPath = fileSystem.root.toURL(); + filePath = urlPath + '\/' + imageFileName; + that.transferImage(imageUri, filePath) + }, + function() { + console.log('failed to get filesystem'); + } + ); + } + }); + + document.getElementById('vidOper').addEventListener('click', function() { + if (videoPath) { // upload + that.uploadVid(); + } else { // upload + that.getFilesystem( + function(fileSystem) { + console.log('gotFS'); + var filePath; + var urlPath = fileSystem.root.toURL(); + filePath = urlPath + '\/' + videoFileName; + that.transferVideo(videoUri, filePath) + }, + function() { + console.log('failed to get filesystem'); + } + ); + } + }); + + document.getElementById('serverURL').addEventListener('click', function() { + document.getElementById('result').innerHTML = + '

' + + '

'; + document.getElementById('imgOper').disabled = true; + document.getElementById('vidOper').disabled = true; + document.getElementById('set_server_url').addEventListener('click', function() { + serverURL = document.getElementById('input_server_url').value; + document.getElementById('result').innerHTML = ''; + document.getElementById('imgOper').disabled = false; + document.getElementById('vidOper').disabled = false; + document.getElementById('downloaded').style.display = 'block'; + }); + document.getElementById('cancel_server_url').addEventListener('click', function() { + document.getElementById('result').innerHTML = ''; + document.getElementById('imgOper').disabled = false; + document.getElementById('vidOper').disabled = false; + document.getElementById('downloaded').style.display = 'block'; + }); + document.getElementById('downloaded').style.display = 'none'; + }); + }, + + getFilesystem:function (success, fail) { + window.requestFileSystem = window.requestFileSystem || window.webkitRequestFileSystem; + window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, success, fail); + }, + + getFolder: function (fileSystem, folderName, success, fail) { + fileSystem.root.getDirectory(folderName, {create: true, exclusive: false}, success, fail) + }, + + transferImage: function (uri, filePath) { + var transfer = new FileTransfer(); + transfer.onprogress = onProgressCB; + transfer.download( + uri, + filePath, + function(entry) { + imagePath = entry.toURL(); + + document.getElementById('downloaded').innerHTML = ''; + var image = document.getElementById('downloadedContent'); + image.src = imagePath; + image.style.display = 'block'; + image.display = imagePath; + + document.getElementById('progress').innerHTML = ''; + document.getElementById('result').innerHTML = 'File saved to: ' + imagePath; + document.getElementById('imgOper').innerHTML = 'Upload image'; + }, + function(error) { + document.getElementById('result').innerHTML = 'An error has occurred: Code = ' + error.code; + console.log('download error source ' + error.source); + console.log('download error target ' + error.target); + console.log('upload error code ' + error.code); + } + ); + }, + + transferVideo: function (uri, filePath) { + var transfer = new FileTransfer(); + transfer.onprogress = onProgressCB; + transfer.download( + uri, + filePath, + function(entry) { + videoPath = entry.toURL(); + document.getElementById('downloaded').innerHTML = '

'; + + document.getElementById('progress').innerHTML = ''; + document.getElementById('result').innerHTML = 'File saved to: ' + videoPath; + document.getElementById('vidOper').innerHTML = 'Upload video'; + }, + function(error) { + document.getElementById('result').innerHTML = 'An error has occurred: Code = ' + error.code; + console.log('download error source ' + error.source); + console.log('download error target ' + error.target); + console.log('upload error code ' + error.code); + } + ); + }, + + uploadImg: function() { + var options = new FileUploadOptions(); + options.fileKey = 'file'; + options.fileName = imagePath.substr(imagePath.lastIndexOf('/') + 1); + options.mimeType = 'image/png'; + options.params = {}; // if we need to send parameters to the server request + options.headers = { + Connection: 'Close' + }; + options.chunkedMode = false; + + var ft = new FileTransfer(); + ft.onprogress = onProgressCB; + ft.upload( + imagePath, + encodeURI(serverURL), + onFileUploadSuccess, + onFileTransferFail, + options); + + function onFileUploadSuccess (result) { + console.log('FileTransfer.upload'); + console.log('Code = ' + result.responseCode); + console.log('Response = ' + result.response); + console.log('Sent = ' + result.bytesSent); + console.log('Link to uploaded file: ' + serverURL + result.response); + var response = result.response; + + var destination = serverURL + response.substr(response.lastIndexOf('=') + 1); + + document.getElementById('result').innerHTML = 'File uploaded to: ' + + destination + + "
"; + } + + function onFileTransferFail (error) { + console.log('FileTransfer Error:'); + console.log('Code: ' + error.code); + console.log('Source: ' + error.source); + console.log('Target: ' + error.target); + } + }, + uploadVid: function() { + var options = new FileUploadOptions(); + options.fileKey = 'file'; + options.fileName = videoPath.substr(videoPath.lastIndexOf('/') + 1); + options.mimeType = "video/3gpp"; + options.params = {}; // if we need to send parameters to the server request + options.headers = { + Connection: 'Close' + }; + options.chunkedMode = false; + + var ft = new FileTransfer(); + ft.onprogress = onProgressCB; + ft.upload( + videoPath, + encodeURI(serverURL), + onFileUploadSuccess, + onFileTransferFail, + options); + + function onFileUploadSuccess (result) { + console.log('FileTransfer.upload'); + console.log('Code = ' + result.responseCode); + console.log('Response = ' + result.response); + console.log('Sent = ' + result.bytesSent); + console.log('Link to uploaded file: ' + serverURL + result.response); + var response = result.response; + + var destination = serverURL + response.substr(response.lastIndexOf('=') + 1); + + document.getElementById('result').innerHTML = 'File uploaded to: ' + + destination + + "
"; + } + + function onFileTransferFail (error) { + console.log('FileTransfer Error:'); + console.log('Code: ' + error.code); + console.log('Source: ' + error.source); + console.log('Target: ' + error.target); + } + } +} + + +function onDeviceReady() { + document.addEventListener('backbutton', function() { + window.history.back(); + }); + var that = this, + App = new downloadApp(), + imageFileName = 'sample.png', + videoFileName = 'sample.3gp', + imageUri = encodeURI('http://demo.joomlaworks.net/images/stories/demo/walkman/DSC00009.JPG'), + videoUri = encodeURI('http://www.sample-videos.com/video/3gp/240/big_buck_bunny_240p_1mb.3gp'), + folderName = 'test'; + + //navigator.splashscreen.hide(); + App.run(imageUri, videoUri, imageFileName, videoFileName, folderName); +} + + +//Initialize function +var init = function () { + document.addEventListener('deviceready', onDeviceReady, false); +}; + +window.onload = init; diff --git a/sample/plugins/filetransfer/styles/main.css b/sample/plugins/filetransfer/styles/main.css new file mode 100644 index 0000000..ae7ba14 --- /dev/null +++ b/sample/plugins/filetransfer/styles/main.css @@ -0,0 +1,286 @@ +/* + * Copyright (c) 2014-2015 Telerik AD + * Copyright (c) 2015 Samsung Electronics Co., Ltd All Rights Reserved + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* apply a natural box layout model to all elements */ +* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } + +html +{ + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + height:100%; +} + +body +{ + font-family: sans-serif, Arial, Segoe UI; + font-size: 16px; + margin: 0; + padding: 0; + height:100%; + padding: 60px 0px 24px 0px; + overflow:hidden; +} + +/*width, height*/ +.clear {clear:both;} + +.ch10 {height:10%;} +.ch20 {height:20%;} +.ch30 {height:30%;} +.ch40 {height:40%;} +.ch50 {height:50%;} +.ch60 {height:60%;} +.ch70 {height:70%;} +.ch80 {height:80%;} +.ch90 {height:90%;} +.ch100 {height:100%;} + +.cw10 {width:10%;} +.cw20 {width:20%;} +.cw30 {width:30%;} +.cw40 {width:40%;} +.cw50 {width:50%;} +.cw60 {width:60%;} +.cw70 {width:70%;} +.cw80 {width:80%;} +.cw90 {width:90%;} +.cw100 {width:100%;} + +/*header*/ +.header +{ + position:absolute; + top: 0px; + left:0px; + width:100%; + height: 60px; + border:none; + background: #dedfe1; + background: -moz-linear-gradient(top, #ffffff 0%, #e6e6e6 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e6e6e6)); + background: -webkit-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: -o-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: -ms-linear-gradient(top, #ffffff 0%,#e6e6e6 100%); + background: linear-gradient(to bottom, #ffffff 0%,#e6e6e6 100%); + box-shadow: 0px 1px 0px 0px #fff; + -webkit-box-shadow: 0px 1px 0px 0px #fff; + -moz-box-shadow: 0px 1px 0px 0px #fff; + border-bottom: 1px solid #9ca1a5; + color: #639ecd; +} +.header > h1 +{ + font-size: 30px; + font-weight: normal; + border-bottom: 4px solid #639ecd; + display: inline-block; + margin: 0 0 0 12px; + position:absolute; + bottom:0; + text-shadow: 0 1px 0 #fff; +} + +/*content*/ +.content +{ + background:#f0f0f0; + min-height:100%; + height:100%; + overflow:hidden; +} + +.content > .input-area, +.content > .result-area > .results > #result > .input-area, +.content > .action-area, +.content > .result-area { + width: 100%; + border-top: 1px solid #9ca1a5; + position:relative; +} +.content > .input-area, +.content > .action-area { + border-top-color:#fff; +} +.content > .input-area.ch100, +.content > .action-areach100, +.content > .result-area.ch100 { + border-top-color:transparent; +} + +.content > .input-area > .inputBox, +.content > .result-area > .results > #result > .input-area > .inputBox { + background-color: #fff; + font-size:20px; + color: #0c0c0c; + width: 290px; + padding: 7px 6px; + border-radius: 3px; + border-width: 1px; + border-style: solid; + border-color: rgb(180, 180, 180); + border-bottom-color: rgb(255, 255, 255); + box-shadow: 0 -1px 0 #3C3C3C; + margin-left:8px; + margin-top:10px; + position:relative; +} +.content > .input-area, +.content > .result-area > .results > #result > .input-area { + text-align: left; +} + +.content > .result-area > .results { + margin:0px; +} + +.content > .result-area > .results > .desc { + font-size:12px; + color:#a7a9ad; + margin-top:10px; + text-align:center; +} + +.content > .result-area > .results > .result-info > div:first-of-type { + color:#a7a9ad; + font-size:20px; + float:left; + text-align:right; + text-shadow: 0 1px 0 #fff; +} +.content > .result-area > .results > .result-info > div:first-of-type + div { + color:#414349; + font-size:20px; + margin-left:10px; + float:left; + text-shadow: 0 1px 0 #fff; +} + +/*separator*/ +.content > .result-area > .separator +{ + height: 12px; + border: none; + background: -moz-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(227, 227, 227, 1)), color-stop(100%, rgba(240, 240, 240, 1))); + background: -webkit-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -o-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: -ms-linear-gradient(top, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + background: linear-gradient(to bottom, rgba(227, 227, 227, 1) 0%, rgba(240, 240, 240, 1) 100%); + position: absolute; + top: 0px; + left: 0px; + right: 0px; + margin: 1px; +} + +/*footer*/ +.footer +{ + position:fixed; + bottom: 0px; + left:0px; + width:100%; + height: 24px; + background:#5f626a; + border-top:1px solid #42444a; + box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); + -webkit-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); + -moz-box-shadow: inset 0px 1px 7px 0px rgba(0,0,0,0.5); +} + +.footer div +{ + position:absolute; + right:12px; + top:4px;; + color: #afb1b5; + font-size:14px; +} + +/*button*/ +.button +{ + border: 1px solid #8d9096; + border-radius: 3px; + color: #4d5d6b; + background: transparent; + margin-left:8px; + margin-top:12px; + width: 80px; + height: 32px; + display: inline; + float: left; +} + +.button:active +{ + border: 1px solid #639ecd; + background-image: none; + background-color: #639ecd; + color: #fff; + box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); + -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); + -moz-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.3); +} + +.button:disabled, +.button:disabled:hover, +.button:disabled:active +{ + background: rgba(49, 52, 55, 0.1); + color: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(255, 255, 255, 0.5); +} +.button.dh { + height:60px; +} +.button.dw { + width:auto; + height:auto; +} +#downloadedContent { + margin: 6px auto; + max-width: 280px; + max-height: 220px; +} + +/* landscape */ +@media screen and (orientation:landscape) { + .button.dh { + height:32px; + width:120px; + } + #downloadedContent { + margin: 6px auto; + max-width: 220px; + max-height: 180px; + } +} + +/*specific*/ +.content > .result-area > .results > .desc { + font-size:16px; + color:#639ecd; + word-wrap:break-word; +} +.result-area +{ + text-align:center; +} +.left{ + text-align: left; +} -- 2.7.4