fix modal ui in upload json

locust/static/locust.js

@@ -170,15 +170,15 @@ $(".edit_config_link").click(function(event) {
 
 });
 
+$("#directories .select2").select2({
+    placeholder: "Select a state"
+});
+
 $('#upload_btn_submit').click(function(event){
     event.preventDefault();
     $('#upload_file_form').submit();
 });
 
-$("#directories .select2").select2({
-    placeholder: "Select a state"
-});
-
 $('#upload_file_form').submit(function(event) {
     event.preventDefault();
     var form = $('#upload_file_form')[0];

locust/static/style.css

@@ -566,7 +566,7 @@ ul.tabs li a.current:after {
 }
 
 
-#add-new-file-modal, #new-test-confirmation {
+#add-new-file-modal, #upload_json_modal, #new-test-confirmation {
     width: 398px;
     position: absolute;
     left: 50%;
@@ -580,33 +580,36 @@ ul.tabs li a.current:after {
     background: #132b21;
     box-shadow: 0 0 120px rgba(0,0,0,0.3);
 }
-#add-new-file-modal{
+
+#add-new-file-modal, #upload_json_modal {
     padding-left : 1%; 
     padding-right: 1%;
     height: 275px;
 }
 #new-test-confirmation {
     height: 160px;
+    width: 450px;
 }
-#add-new-file-modal .modal-dialog, #new-test-confirmation .modal-dialog{
+
+#add-new-file-modal .modal-dialog, #new-test-confirmation .modal-dialog, #upload_json_modal .modal-dialog{
     display: flex;
     flex-direction: column;
     vertical-align: middle;
     margin-top: 0px;
     margin-bottom: -50px;
 }
-#add-new-file-modal .modal-header, #new-test-confirmation .modal-header {
+#add-new-file-modal .modal-header, #new-test-confirmation .modal-header, #upload_json_modal .modal-header {
     border-bottom-color: transparent;
 }   
-#add-new-file-modal .close, #new-test-confirmation .close {
+#add-new-file-modal .close, #new-test-confirmation .close, #upload_json_modal .close {
     color: #addf82;
 }
-#new-test-confirmation .modal-header .close, #add-new-file-modal .close{
+#new-test-confirmation .modal-header .close, #add-new-file-modal .close, #upload_json_modal .modal-header .close{
     margin-right: -25px;
     padding: 3px;
 }
 
-#new-test-confirmation .modal-body, #add-new-file-modal .modal-body {
+#new-test-confirmation .modal-body, #add-new-file-modal .modal-body, #upload_json_modal .modal-body {
     padding-top: 25px;
     padding-bottom: 0px;
     color: white;
@@ -616,14 +619,17 @@ ul.tabs li a.current:after {
     padding: 0;
 }
 #new-test-confirmation .btn-newtest {
-    padding: 8px 30px;
-    margin: 3px 3px;
+    padding: 10px 30px;
+    margin: 4px 4px;
+}
+#new-test-confirmation .modal-header .close {
+    margin-right: -10px;
 }
-#add-new-file-modal .modal-content, #new-test-confirmation .modal-content {
+#add-new-file-modal .modal-content, #new-test-confirmation .modal-content, #upload_json_modal .modal-content {
     background-color: #132b21;
     border-color: transparent;
 }
-#add-new-file-modal .modal-title, #new-test-confirmation .modal-title {
+#add-new-file-modal .modal-title, #new-test-confirmation .modal-title, #upload_json_modal .modal-title {
     color:#addf82;
 }
 #upload_file_form, #new-test-confirmation {

locust/templates/index.html

@@ -143,7 +143,7 @@ <h4 class="modal-title">Upload Test File</h4>
                         <br/>
                         <label>File to upload :</label>
                         <br/>
-                        <input type="file" accept=".py" name="python_file" id="python_file" />
+                        <input type="file" accept=".py" name="uploaded_file" id="uploaded_file" />
                         <br/>
                         <input type="submit" value="Upload" id="upload_btn_submit" />
                     </form>
@@ -310,11 +310,11 @@ <h5 class="modal-title" id="myModalLabel">Unsaved Configuration</h5>
             </div>
             <div class="custom_padder container body_section">
                 <label>Upload JSON</label>
-                <button type="button" data-toggle="modal" data-target="#upload_json" >Upload JSON</button>
+                <button type="button" data-toggle="modal" data-target="#upload_json_modal" >Upload JSON</button>
             </div>
         </div>
 
-        <div id="upload_json" class="modal fade" role="dialog">
+        <div id="upload_json_modal" class="modal fade" role="dialog">
             <div class="modal-dialog">
 
               <!-- Modal content-->
@@ -335,7 +335,7 @@ <h4 class="modal-title">Upload JSON</h4>
                         <br/>
                         <label>File to upload :</label>
                         <br/>
-                        <input type="file" accept=".json" name="json_file" id="json_file" />
+                        <input type="file" accept=".json" name="uploaded_file" id="uploaded_file" />
                         <br/>
                         <input type="submit" value="Upload" id="upload_btn_submit" />
                     </form>

locust/web.py

@@ -372,17 +372,18 @@ def convert_csv_to_json():
 @app.route("/upload_file", methods=["POST"])
 def upload_file():
     upload_directory = request.form.get('upload_directory')
-    python_file = request.files['json_file']
-    print dir(python_file)
-    python_file_path = upload_directory + python_file.filename
-    python_file_extension = os.path.splitext(python_file.filename)[1]
-    python_file_content = python_file.read()
-    if not python_file and python_file_extension != ".py":
-        return expected_response({'success':False, 'message':"Can't upload this file. Please try again with python file with .py extension"})
-    upload_status,upload_message = fileio.write(python_file_path, python_file_content)
+    uploaded_file = request.files['uploaded_file']
+    uploaded_file_path = upload_directory + uploaded_file.filename
+    uploaded_file_extension = os.path.splitext(uploaded_file.filename)[1]
+    uploaded_file_content = uploaded_file.read()
+    if not uploaded_file :
+        return expected_response({'success':False, 'message':'Please choose .json or .py file to upload'})
+    if uploaded_file_extension != ".py" and uploaded_file_extension != ".json":
+        return expected_response({'success':False, 'message':"Can't upload this file. Currently only supports .json or .py file"})
+    upload_status,upload_message = fileio.write(uploaded_file_path, uploaded_file_content)
     if upload_status is False :
         return expected_response({'success':False, 'message':upload_message})
-    events.master_new_file_uploaded.fire(new_file={"full_path": python_file_path, "name": python_file.filename, "content":python_file_content})
+    events.master_new_file_uploaded.fire(new_file={"full_path": uploaded_file_path, "name": uploaded_file.filename, "content":uploaded_file_content})
     runners.locust_runner.reload_tests()
     return expected_response({'success':True, 'message':""})