Skip to content

Commit 1eddf55

Browse files
illyaVvengrov
authored andcommitted
File Service examples (#58) (Closes #43)
Closes #43
1 parent 1eb547a commit 1eddf55

File tree

3 files changed

+199
-34
lines changed

3 files changed

+199
-34
lines changed

examples/file-service/css/fileService.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
1-
body {
1+
body {
22
padding-bottom: 0px;
33
color: #5a5a5a;
44
}
5+
6+
input[type="file"] {
7+
line-height: 1;
8+
}
59
/* CUSTOMIZE THE CAROUSEL
610
-------------------------------------------------- */
711

examples/file-service/index.html

Lines changed: 20 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
1-

2-
<!DOCTYPE html>
1+
<!DOCTYPE html>
32
<html lang="en">
43
<head>
54
<meta charset="utf-8">
6-
<title>File Service API Demo</title>
5+
<title>File Service Example</title>
76
<meta name="viewport" content="width=device-width, initial-scale=1.0">
87
<meta name="description" content="">
98
<meta name="author" content="">
@@ -24,13 +23,15 @@
2423

2524
<body>
2625

27-
<div class="navbar navbar-inverse navbar-static-top" >
26+
<div class="navbar navbar-inverse navbar-static-top">
2827
<div class="navbar-inner">
29-
       <div class="container">
30-
<a class="lead" href="#myCarousel" data-slide-to="0">Upload file</a>
31-
<a class="lead" href="#myCarousel" data-slide-to="1" onclick="refreshItemsList()">Browse uploaded</a>
32-
       </div>
33-
   </div>
28+
       
29+
<div class="container">
30+
<a class="lead" href="#myCarousel" data-slide-to="0">Upload file</a>
31+
<a class="lead" href="#myCarousel" data-slide-to="1" id="browse-uploaded-link">Browse uploaded</a> 
32+
</div>
33+
   
34+
</div>
3435
</div>
3536

3637
<div id="myCarousel" class="carousel slide" interval="false">
@@ -39,9 +40,13 @@
3940
<div class="container">
4041
<div class="carousel-caption">
4142
<div class="container">
42-
<input type="file" id="files" name="files[]" multiple />
43+
<input type="file" id="files" multiple/>
4344
<output id="list"></output>
44-
<div><input class="btn btn-large btn-primary" type="button" onclick="uploadFileFunc(); return false;" value="Upload File"/></div>
45+
<div>
46+
<button id="upload-btn" class="btn btn-primary" type="button"/>
47+
Upload File
48+
</button>
49+
</div>
4550
</div>
4651
</div>
4752
</div>
@@ -52,7 +57,9 @@
5257
<div class="carousel-caption">
5358

5459
<div class="container">
55-
<div><input class="btn btn-large btn-primary" type="button" onclick="deleteSelectedFiles(); return false;" value="Delete Files"/></div>
60+
<div>
61+
<button id="delete-btn" class="btn btn-primary" type="button">Delete Files</button>
62+
</div>
5663
<div>
5764
<ul class="thumbnails">
5865
</ul>
@@ -67,7 +74,7 @@
6774
<div class="carousel-caption">
6875
<div class="container">
6976
<h2 class="lead" id="message">Test Message</h2>
70-
<a onclick="location.reload()" style="padding:10px;background:#5a5a5a;font-size:16px;border-radius:5px;color:#fff;position: relative;top: 30px;">Back</a>
77+
<a onclick="location.reload()" class="btn btn-default">Back</a>
7178
</div>
7279
</div>
7380
</div>
Lines changed: 174 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,174 @@
1-
var APPLICATION_ID = '';
2-
var SECRET_KEY = '';
3-
var VERSION = 'v1';
4-
5-
var DEVICE_ID = "fileServiceTest";
6-
var TEST_FOLDER = "testFolder";
7-
var files;
8-
9-
if( !APPLICATION_ID || !SECRET_KEY || !VERSION )
10-
alert( "Missing application ID and secret key arguments. Login to Backendless Console, select your app and get the ID and key from the Manage > App Settings screen. Copy/paste the values into the Backendless.initApp call located in FilesExample.js" );
11-
12-
$().ready( function()
13-
{
14-
init();
15-
});
16-
17-
function init() {
18-
$('.carousel').carousel({interval: false});
19-
Backendless.initApp(APPLICATION_ID, SECRET_KEY, VERSION);
20-
}
1+
(function (Backendless, $) {
2+
3+
var APPLICATION_ID = '';
4+
var SECRET_KEY = '';
5+
var VERSION = 'v1';
6+
7+
var DEVICE_ID = 'fileServiceTest';
8+
var TEST_FOLDER = 'testFolder';
9+
var files = [];
10+
11+
if (!APPLICATION_ID || !SECRET_KEY || !VERSION)
12+
alert("Missing application ID and secret key arguments. Login to Backendless Console, select your app and get the ID and key from the Manage > App Settings screen. Copy/paste the values into the Backendless.initApp call located in files-example.js");
13+
14+
function init() {
15+
$('.carousel').carousel({interval: false});
16+
17+
Backendless.enablePromises();
18+
Backendless.initApp(APPLICATION_ID, SECRET_KEY, VERSION);
19+
20+
initHandlers();
21+
}
22+
23+
function initHandlers() {
24+
$('#files').on('change', handleFileSelect);
25+
$('.thumbnails').on('click', '.thumbnail', onClickFileItem);
26+
$('#browse-uploaded-link').on('click', refreshItemsList);
27+
$('#upload-btn').on('click', uploadFile);
28+
$('#delete-btn').on('click', deleteSelectedFiles);
29+
}
30+
31+
function protectXSS(val) {
32+
return val.replace(/(<|>|\/)/g, function (match) {
33+
return match == '<' ? '<' : match == '>' ? '>' : '/';
34+
});
35+
}
36+
37+
function handleFileSelect(evt) {
38+
var output = [];
39+
for (var i = 0, f; f = evt.target.files[i]; i++) {
40+
output.push('<li><strong>', protectXSS(f.name), '</strong> (', f.type || 'n/a', ') - ',
41+
f.size, ' bytes, last modified: ',
42+
f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
43+
'</li>');
44+
files.push(f)
45+
}
46+
$('#list').append('<ul>' + output.join('') + '</ul>');
47+
$('#files').val('');
48+
}
49+
50+
function FileItem() {
51+
this.url = '';
52+
this.deviceId = DEVICE_ID;
53+
}
54+
55+
function createNewItem(fileUrl) {
56+
var record = new FileItem();
57+
record.url = fileUrl;
58+
59+
return Backendless.Persistence.of(FileItem).save(record);
60+
}
61+
62+
function deleteItem(id) {
63+
return Backendless.Persistence.of(FileItem).remove(id);
64+
}
65+
66+
function onClickFileItem() {
67+
$(this).toggleClass('selectedThumbnail');
68+
}
69+
70+
function refreshItemsList() {
71+
getItemsFromPersistance().then(function(result) { renderItems(result.data); });
72+
}
73+
74+
function renderItems(items) {
75+
$('.thumbnails').empty();
76+
77+
$.each(items, function (index, value) {
78+
var name = getRelativeFileName(value.url);
79+
var li = (
80+
'<li class="span4">' +
81+
'<div class="thumbnail">' +
82+
'<img class="dataPicture" id="' + value.objectId + '" src="' + value.url + '" alt=""/>' +
83+
'<div align="center">' +
84+
'<a href="' + value.url + '" >' + decodeURIComponent(protectXSS(name)) + '</a>' +
85+
'</div>' +
86+
'</div>' +
87+
'</li>'
88+
);
89+
90+
$('.thumbnails').append(li);
91+
});
92+
}
93+
94+
function getRelativeFileName(str) {
95+
var rest = str.substring(0, str.lastIndexOf(TEST_FOLDER + '/') + 1);
96+
return str.substring(str.lastIndexOf('/') + 1, str.length);
97+
}
98+
99+
function getItemsFromPersistance() {
100+
return Backendless.Persistence.of(FileItem).find().catch(function (e) {
101+
alert(e.code == 1009 ? 'Please upload a file first' : e.message);
102+
return [];
103+
});
104+
}
105+
106+
function uploadFile() {
107+
if (files.length === 0) {
108+
return;
109+
}
110+
111+
$('#upload-btn').text('Uploading...');
112+
113+
var requests = files.map(function (file) {
114+
return Backendless.Files.upload(file, TEST_FOLDER, true).then(
115+
function (result) {
116+
return createNewItem(result.fileURL);
117+
}
118+
);
119+
});
120+
121+
Promise.all(requests).then(
122+
function () {
123+
showInfo('Files successfully uploaded.');
124+
files = [];
125+
$('#list').empty();
126+
},
127+
function (err) {
128+
showInfo(err.message);
129+
}
130+
).then(function(){
131+
$('#upload-btn').text('Upload File');
132+
});
133+
}
134+
135+
function deleteSelectedFiles() {
136+
var $selectedElements = $('.selectedThumbnail img');
137+
138+
if ($selectedElements.length === 0) {
139+
return;
140+
}
141+
142+
var removeRequests = [];
143+
144+
$('#delete-btn').text('Deleting...');
145+
146+
$selectedElements.each(function (index, element) {
147+
removeRequests.push(Backendless.Files.remove(element.src).then(
148+
function () {
149+
return deleteItem(element.id);
150+
}
151+
));
152+
});
153+
154+
Promise.all(removeRequests).then(
155+
function () {
156+
showInfo('Objects successfully removed.');
157+
},
158+
function (err) {
159+
showInfo(err.message)
160+
}
161+
).then(function() {
162+
$('#delete-btn').text('Delete Files');
163+
});
164+
}
165+
166+
function showInfo(text) {
167+
$('#message').text(text);
168+
var carousel = $('.carousel');
169+
carousel.carousel(2);
170+
carousel.carousel('pause');
171+
}
172+
173+
$().ready(init);
174+
})(Backendless, jQuery);

0 commit comments

Comments
 (0)