From a445a7c1d29ed2bb2637567d87bac28ed93484da Mon Sep 17 00:00:00 2001 From: Jan Philipp Timme Date: Fri, 18 Nov 2016 20:12:39 +0100 Subject: [PATCH] Implement a rough jQuery client --- filestorage/api_views.py | 4 ++- filestorage/static/app.js | 44 ++++++++++++++++++++++++++++++- filestorage/templates/home.jinja2 | 36 ++++++++++++++++++------- 3 files changed, 72 insertions(+), 12 deletions(-) diff --git a/filestorage/api_views.py b/filestorage/api_views.py index 6eebd19..676dc88 100644 --- a/filestorage/api_views.py +++ b/filestorage/api_views.py @@ -81,8 +81,10 @@ class RESTView(object): filehash_md5 = self.hash_file(target_file_path, hashlib.md5()) filehash_sha1 = self.hash_file(target_file_path, hashlib.sha1()) 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 - 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 self.db_add_file(file_id, file_data) # Hopefully everything worked out, so return the data from the file diff --git a/filestorage/static/app.js b/filestorage/static/app.js index df919dc..4c48ec5 100644 --- a/filestorage/static/app.js +++ b/filestorage/static/app.js @@ -1 +1,43 @@ -# TODO: Implement the jQuery REST API client! \ No newline at end of file +$(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 = "
"; + for(i=0; i
" + response[key] + "
"; + } + listHtml += "
"; + $("#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! +}); \ No newline at end of file diff --git a/filestorage/templates/home.jinja2 b/filestorage/templates/home.jinja2 index aa32214..d45b55a 100644 --- a/filestorage/templates/home.jinja2 +++ b/filestorage/templates/home.jinja2 @@ -1,7 +1,7 @@ - Filestorage Service + Filestorage @@ -15,15 +15,31 @@

Use this command to upload a file using curl: - 

curl {{ request.route_url('files') }} -X PUT -F "file=@/path/to/your/file"
-

-

- Use this form to upload a file! (TODO: Implement with jQuery, properly display results) -

- - - -
+ 
curl -X PUT {{ request.route_url('files') }} -F "file=@/path/to/your/file"
+ You will get a JSON response containing a bunch of checksums and a key. + Take good care of it, as the key it is your only way to delete the file later! + In order to delete a file, use this curl command: + 
curl -X DELETE {{ request.route_url('files') }}/uuid/key

+
+

Upload a file!

+

+ Use this form to upload a file! +
+ +

+
+
+

Upload results

+

+ Use this curl command to delete the file in the future: + 

curl -X DELETE {{ request.route_url('files') }}//
+
File attributes
+
+
JSON response
+ 


+      
+    

+