From 96cd7b18f6ea4742493d10a33689eccabd27dea3 Mon Sep 17 00:00:00 2001 From: Beu Date: Sun, 28 Apr 2019 22:30:23 +0200 Subject: [PATCH] Improve frontend and add "How to use" (#3) --- front.php | 17 ++++++++++++++++- index.php | 2 +- script.js | 19 ++++++++++++++++++- style.css | 31 +++++++++++++++++++++++++++---- 4 files changed, 62 insertions(+), 7 deletions(-) diff --git a/front.php b/front.php index 37603a3..06ec987 100644 --- a/front.php +++ b/front.php @@ -8,11 +8,26 @@ -
+

File Transfer

+
Drag and Drop your file or



+
+This tool is usable with curl or wget.

+To upload :
+
  • curl --upload-file ./hello.txt
    +
  • wget -q --body-file='./hello.txt' --method=PUT -O -

    + +To download file :
    +
  • curl -o hello.txt
    +
  • wget -O hello.txt + +
    • +
    +File transfer was created by @AmazingBeu. You can find sources here. +
    diff --git a/index.php b/index.php index dcb24a5..368d0fd 100644 --- a/index.php +++ b/index.php @@ -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"); } diff --git a/script.js b/script.js index 2ee7378..98a51b8 100644 --- a/script.js +++ b/script.js @@ -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"); + } +} + diff --git a/style.css b/style.css index 638e3df..c5b4bb6 100644 --- a/style.css +++ b/style.css @@ -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; +} -} \ No newline at end of file +.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; +}