VirtIT/web-ft
2
0
Fork 0
Code Issues 4 Pull Requests Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
front.php
View File

@ -8,11 +8,26 @@
</head> </head>
<body> <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();"> Drag and Drop your file or <input type="button" value="Select File" onclick="file_explorer();">
<input type="file" id="uploadfile" hidden> <input type="file" id="uploadfile" hidden>
<br><br><br><br> <br><br><br><br>
<div id=divresponse></div><button id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button> <div id=divresponse></div><button id=copytoclipboard style="visibility: hidden;" onclick="copytoclipboard();">Copy to clipboard</button>
</div> </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> </body>

2
index.php
View File

@ -46,7 +46,7 @@
// Informations for user // Informations for user
if ($_SERVER['REQUEST_METHOD'] === 'GET') 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"); print("To upload file, use # curl --upload-file my_file " . _HTTP_PROTO . '://' . _HTTP_DOMAIN . _HTTP_PATH . "index.php\n");
} }

17
script.js
View File

@ -1,6 +1,7 @@
var fileobj; var fileobj;
function upload_file(e) function upload_file(e)
{ {
console.log("droped")
e.preventDefault(); e.preventDefault();
fileobj = e.dataTransfer.files[0]; fileobj = e.dataTransfer.files[0];
ajax_file_upload(fileobj); 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");
}
}

31
style.css
View File

@ -9,7 +9,8 @@ html {
.dragndrop { .dragndrop {
margin: 20%; margin: 20%;
margin-top: 10%; margin-top: 5%;
margin-bottom: 3%;
background-color: #a3a3a3; background-color: #a3a3a3;
padding: 1px; padding: 1px;
padding-top: 5%; padding-top: 5%;
@ -20,8 +21,30 @@ html {
border-radius: 20px; border-radius: 20px;
} }
.dragndrop:hover { .dragover {
background-color: #888888; 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;
} }