Improve frontend and add "How to use" (#3)

This commit is contained in:
Beu 2019-04-28 22:30:23 +02:00
parent 8252be8fed
commit 96cd7b18f6
4 changed files with 62 additions and 7 deletions

View File

@ -8,11 +8,26 @@
</head>
<body>
<div class=dragndrop ondrop="upload_file(event);" ondragover="return false" >
<h1>File Transfer</h1>
<div id=dragzone class=dragndrop ondrop="upload_file(event);" ondragover="return false" ondragenter="change_color_ondrag('ondragenter');" ondragleave="change_color_ondrag('ondragleave');" >
Drag and Drop your file or <input type="button" value="Select File" onclick="file_explorer();">
<input type="file" id="uploadfile" hidden>
<br><br><br><br>
<div id=divresponse></div><button id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button>
</div>
<div class=infobox>
This tool is usable with <b>curl</b> or <b>wget</b>.<br><br>
To upload : <br>
<li> curl --upload-file ./hello.txt <?php print(_HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . 'index.php');?><br>
<li> wget -q --body-file='./hello.txt' --method=PUT -O - <?php print(_HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . 'index.php');?><br><br>
To download file :<br>
<li> curl -o hello.txt <?php print(_HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . _DATA_DIR . '/99999/file');?><br>
<li> wget -O hello.txt <?php print(_HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . _DATA_DIR . '/99999/file');?>
</div>
<div class=footer>
File transfer was created by <a href="https://twitter.com/AmazingBeu">@AmazingBeu</a>. You can find sources <a href="https://git.virtit.fr/VirtIT/web-ft">here</a>.
</div>
</body>

View File

@ -46,7 +46,7 @@
// Informations for user
if ($_SERVER['REQUEST_METHOD'] === 'GET')
{
if (stristr($_SERVER["HTTP_USER_AGENT"], 'curl'))
if (stristr($_SERVER["HTTP_USER_AGENT"], 'curl') or stristr($_SERVER["HTTP_USER_AGENT"], 'Wget'))
{
print("To upload file, use # curl --upload-file my_file " . _HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . "index.php\n");
}

View File

@ -1,6 +1,7 @@
var fileobj;
function upload_file(e)
{
console.log("droped")
e.preventDefault();
fileobj = e.dataTransfer.files[0];
ajax_file_upload(fileobj);
@ -8,7 +9,7 @@ function upload_file(e)
function file_explorer() {
document.getElementById('uploadfile').click();
document.getElementById('uploadfile').onchange = function()
document.getElementById('uploadfile').onchange = function()
{
fileobj = document.getElementById('uploadfile').files[0];
ajax_file_upload(fileobj);
@ -45,3 +46,19 @@ function ajax_file_upload(file_obj)
});
}
function change_color_ondrag(event)
{
if (event === "ondragenter")
{
var element = document.getElementById('dragzone');
element.classList.add("dragover");
}
else if (event === "ondragleave")
{
var element = document.getElementById('dragzone');
element.classList.remove("dragover");
}
}

View File

@ -9,7 +9,8 @@ html {
.dragndrop {
margin: 20%;
margin-top: 10%;
margin-top: 5%;
margin-bottom: 3%;
background-color: #a3a3a3;
padding: 1px;
padding-top: 5%;
@ -20,8 +21,30 @@ html {
border-radius: 20px;
}
.dragndrop:hover {
.dragover {
background-color: #888888;
}
.dragndrop:hover {
background-color: #888888;
}
}
.infobox {
text-align: left;
background: #eeeeee;
margin-left: 20%;
margin-right:20%;
height: 20%;
border-radius: 20px;
border: 4px solid #a3a3a3;
padding: 10px;
}
.footer {
position: fixed;
padding: 1%;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
background-color: #eeeeee;
}