-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathfileUpload.htm
130 lines (118 loc) · 5.53 KB
/
fileUpload.htm
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/kamranahmedse/jquery-toast-plugin/master/src/jquery.toast.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kamranahmedse/jquery-toast-plugin/master/src/jquery.toast.css">
<script type="text/javascript"
src="//api.filestackapi.com/filestack.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>foozyDude - Upload File!</title>
</head>
<body>
<style>
body {
background: #18bc9c;
}
.bodyContainer {
font-family: "Lato","Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 15px;
line-height: 1.42857143;
color: #2c3e50;
background-color: #ffffff;
background: #18bc9c;
}
.navbar-default {
background-color: #2c3e50;
border-color: transparent;
}
.bodyContent {
margin-bottom: 30px;
padding: 30px 50px;
color: inherit;
}
</style>
<div class="bodyContainer">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<!--<img alt="Brand" src="..."> -->
foozyDude
</a>
</div>
</div>
</nav>
<div class="bodyContent">
<div style="max-width: 700px; margin:0 auto;">
<h1>Upload File!</h1>
<p>Upload your file to Cloud without any hickup!</p>
<div class="row">
<div class="col-lg-12">
<div class="input-group">
<input type="text" class="form-control" placeholder="http://" id="txtUrl">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="uploadFile();">Upload!</button>
</span>
</div><!-- /input-group -->
</div><!-- /.col-lg-6 -->
</div>
</div>
</div>
</div>
<script>
function uploadFile() {
var strUrl = $("#txtUrl").val();
if (strUrl.length < 5) {
alert("Please put valid URl.");
return;
}
var filename = strUrl.split('/').pop()
filepicker.setKey("AvIdmY4FvQ3QoBOeFsxRQz")
filepicker.exportFile(
strUrl,
{
suggestedFilename: filename
},
function (Blob) {
console.log(Blob.url);
uploadSuccess()
});
}
function uploadSuccess() {
$("#txtUrl").val("");
$.toast({
text: "Your file is successfully been uploaded to Cloud storage!", // Text that is to be shown in the toast
heading: 'Success', // Optional heading to be shown on the toast
icon: 'success', // Type of toast icon
showHideTransition: 'fade', // fade, slide or plain
allowToastClose: true, // Boolean value true or false
hideAfter: 7000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
stack: 5, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
position: 'top-right', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
textAlign: 'left', // Text alignment i.e. left, right or center
loader: true, // Whether to show loader or not. True by default
loaderBg: '#9EC600', // Background color of the toast loader
});
}
function uploadFailure() {
$.toast({
text: "There was some Error! Please try again.", // Text that is to be shown in the toast
heading: 'Failure', // Optional heading to be shown on the toast
icon: 'error', // Type of toast icon
showHideTransition: 'fade', // fade, slide or plain
allowToastClose: true, // Boolean value true or false
hideAfter: 7000, // false to make it sticky or number representing the miliseconds as time after which toast needs to be hidden
stack: 5, // false if there should be only one toast at a time or a number representing the maximum number of toasts to be shown at a time
position: 'top-right', // bottom-left or bottom-right or bottom-center or top-left or top-right or top-center or mid-center or an object representing the left, right, top, bottom values
textAlign: 'left', // Text alignment i.e. left, right or center
loader: true, // Whether to show loader or not. True by default
loaderBg: '#9EC600', // Background color of the toast loader
});
}
</script>
</body>
</html>