JPT
/
filestorage
0
0
Fork 0
Code Issues Pull Requests Activity

Implement a rough jQuery client

This commit is contained in:
Jan Philipp Timme 2016-11-18 20:12:39 +01:00
parent 5948dceba7
commit a445a7c1d2
Signed by: JPT
GPG Key ID: 5F2C85EC6F3754B7
3 changed files with 72 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
filestorage/api_views.py
View File

@ -81,8 +81,10 @@ class RESTView(object):
filehash_md5 = self.hash_file(target_file_path, hashlib.md5()) filehash_md5 = self.hash_file(target_file_path, hashlib.md5())
filehash_sha1 = self.hash_file(target_file_path, hashlib.sha1()) filehash_sha1 = self.hash_file(target_file_path, hashlib.sha1())
filehash_sha256 = self.hash_file(target_file_path, hashlib.sha256()) filehash_sha256 = self.hash_file(target_file_path, hashlib.sha256())
# Get filesize
file_size = os.path.getsize(target_file_path)
# Gather all data about the file # Gather all data about the file
file_data = dict(uuid=file_id,name=self.request.POST['file'].filename, key=str(uuid.uuid4()), create_utc=str(datetime.datetime.utcnow()), sha256=filehash_sha256, sha1=filehash_sha1, md5=filehash_md5) file_data = dict(uuid=file_id,name=self.request.POST['file'].filename, size=file_size, key=str(uuid.uuid4()), create_utc=str(datetime.datetime.utcnow()), sha256=filehash_sha256, sha1=filehash_sha1, md5=filehash_md5)
# Store file data in database # Store file data in database
self.db_add_file(file_id, file_data) self.db_add_file(file_id, file_data)
# Hopefully everything worked out, so return the data from the file # Hopefully everything worked out, so return the data from the file

44
filestorage/static/app.js
View File

@ -1 +1,43 @@
# TODO: Implement the jQuery REST API client! $(document).ready(function() {
// Hide upload result block
$("#upload-results-block").hide();
// Add eventhandler to upload file when form is submitted
$("#upload-submit-button").on("click", function() {
var file_data = $("#input-file").prop("files")[0];
var form_data = new FormData();
form_data.append('file', file_data);
$.ajax({
url: "/files",
dataType: 'script',
cache: false,
contentType: false,
processData: false,
data: form_data,
type: 'PUT',
success: function(response_text){
response = $.parseJSON(response_text);
displayAttributes = ['uuid', 'key', 'name', 'size', 'create_utc', 'md5', 'sha1', 'sha256'];
listHtml = "<dl>";
for(i=0; i<displayAttributes.length; i++) {
key = displayAttributes[i];
listHtml += "<dt>" + key + "</dt><dd>" + response[key] + "</dd>";
}
listHtml += "</dl>";
$("#result-uuid").html(response["uuid"]);
$("#result-key").html(response["key"]);
$("#upload-results-block #attributes").html(listHtml);
$("#upload-raw-response").html(response_text);
$("#upload-form-block").hide();
document.getElementById("input-file").value = '';
$("#upload-results-block").show();
}
});
// End of $.ajax()
});
// Add eventhandler to display upload form after uploading a file
$("#button-new-upload").on("click", function() {
$("#upload-results-block").hide();
$("#upload-form-block").show();
});
// That's it!
});

36
filestorage/templates/home.jinja2
View File

@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<title>Filestorage Service</title> <title>Filestorage</title>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="stylesheet" href="{{ request.static_url('filestorage:static/app.css') }}"/> <link rel="stylesheet" href="{{ request.static_url('filestorage:static/app.css') }}"/>
<script type="text/javascript" src="{{ request.static_url('filestorage:static/jquery-3.1.1.min.js') }}"></script> <script type="text/javascript" src="{{ request.static_url('filestorage:static/jquery-3.1.1.min.js') }}"></script>
@ -15,15 +15,31 @@
</p> </p>
<p> <p>
Use this command to upload a file using curl: Use this command to upload a file using curl:
<pre>curl {{ request.route_url('files') }} -X PUT -F "file=@/path/to/your/file"</pre> <pre>curl -X PUT {{ request.route_url('files') }} -F "file=@/path/to/your/file"</pre>
</p> You will get a JSON response containing a bunch of checksums and a <b>key</b>.
<p> Take good care of it, as <b>the key it is your only way to delete the file later</b>!
Use this form to upload a file! (TODO: Implement with jQuery, properly display results) In order to <b>delete</b> a file, use this curl command:
<form action="/files" method="PUT" accept-charset="utf-8" enctype="multipart/form-data"> <pre>curl -X DELETE {{ request.route_url('files') }}/<i>uuid</i>/<i>key</i></pre>
<label for="file">File</label>
<input id="file" name="file" type="file" value="" />
<input type="submit" value="Upload!" />
</form>
</p> </p>
<div id="upload-form-block">
<h3>Upload a file!</h3>
<p>
Use this form to upload a file!
<input id="input-file" name="file" type="file" value="" /><br>
<button id="upload-submit-button">Upload this file!"</button>
</p>
</div>
<div id="upload-results-block">
<h3>Upload results</h3>
<p>
Use this curl command to delete the file in the future:
<pre>curl -X DELETE {{ request.route_url('files') }}/<span id="result-uuid"></span>/<span id="result-key"></span></pre>
<h5>File attributes</h5>
<div id="attributes"></div>
<h5>JSON response</h5>
<pre id="upload-raw-response"></pre><br>
<button id="button-new-upload" type="button">Got it. Upload another file!</button>
</p>
</div>
</body> </body>
</html> </html>