Repository navigation
Expand file tree
/
Copy pathfile-upload-with-forms-stack.json
More file actions
1 lines (1 loc) · 9.81 KB
/
Copy pathfile-upload-with-forms-stack.json
File metadata and controls
1 lines (1 loc) · 9.81 KB
1
{"index.html":"<html><head><script src=\"https://cdn.syncfusion.com/ej2/dist/ej2.min.js\" type=\"text/javascript\"></script>\n <link href=\"https://cdn.syncfusion.com/ej2/material.css\" rel=\"stylesheet\">\n\n <link href=\"https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css\" rel=\"stylesheet\">\n\n <style>\n body{\n touch-action:none;\n }\n </style></head><body><div class=\"stackblitz-container {{theme}}\"><div class=\"col-lg-12 control-section\">\n <h4 class=\"form-title\">Photo Contest</h4>\n <div class=\"control_wrapper\" id=\"control_wrapper\">\n <form id=\"form1\" method=\"post\">\n <div class=\"form-group\" style=\"padding-top: 11px;\">\n <div class=\"e-float-input\">\n <input type=\"text\" id=\"name\" name=\"name\" data-required-message=\"* Enter your name\" required data-msg-containerid=\"nameError\">\n <span class=\"e-float-line\"></span>\n <label class=\"e-float-text e-label-top\" for=\"name\">Name</label>\n </div> \n <div id=\"nameError\"></div> \n </div>\n <div class=\"form-group\" style=\"padding-top: 11px;\">\n <div class=\"e-float-input\">\n <input type=\"email\" id=\"email\" name=\"email\" data-validation=\"email\" data-required-message=\"* Please enter valid email\" required data-msg-containerid=\"mailError\">\n <span class=\"e-float-line\"></span>\n <label class=\"e-float-text e-label-top\" for=\"email\">Email</label>\n </div>\n <div id=\"mailError\"></div>\n </div>\n\n <div class=\"form-group\" style=\"padding-top: 11px;\">\n <div class=\"e-float-input\">\n <input type=\"text\" id=\"Mobileno\" name=\"MobileNo\" data-required-message=\"* Enter your mobile number\" required data-msg-containerid=\"noError\">\n <span class=\"e-float-line\"></span>\n <label class=\"e-float-text e-label-top\" for=\"name\">Mobile No</label>\n </div> \n <div id=\"noError\"></div> \n </div>\n <div id=\"dropArea\">\n <div class=\"form-group\" style=\"padding-top: 11px;\">\n <div class=\"e-float-input upload-area\">\n <input type=\"text\" id=\"upload\" readonly name=\"upload\" data-required-message=\"* Select any file\" required data-msg-containerid=\"uploadError\">\n <button id=\"browse\" class=\"e-control e-btn e-info\">Browse...</button> \n <span class=\"e-float-line\"></span>\n <label class=\"e-float-text e-label-top\" for=\"upload\">Choose a file</label>\n </div> \n <div id=\"uploadError\"></div> \n <input type=\"file\" name=\"UploadFiles\" id=\"fileupload\"> \n </div>\n </div>\n <div class=\"form-group\" style=\"padding-top: 11px;\">\n <div class=\"e-float-input\">\n <textarea class=\"address-field\" rows=\"2\" id=\"Address\" name=\"Address\"></textarea>\n <span class=\"e-float-line\"></span>\n <label class=\"e-float-text e-label-top\" for=\"address\">Address</label>\n </div>\n </div> \n <div class=\"submitBtn\">\n <button class=\"submit-btn e-btn\" id=\"submit-btn\">Submit</button>\n <div class=\"desc\"><span>*This button is not a submit type and the form submit handled from externally.</span></div> \n </div> \t\t\t\t\t\t\n </form> \n <div id=\"confirmationDialog\"></div>\n </div>\n</div>\n\n<style>\n .control_wrapper {\n max-width: 400px;\n margin: auto;\n }\n .e-upload {\n width: 100%;\n position: relative;\n margin-top: 15px;\n }\n .control_wrapper .e-upload .e-upload-drag-hover {\n margin: 0;\n }\n .address-field {\n resize: none;\n }\n \n #control_wrapper {\n\t\tmax-width: 500px;\n\t\tmargin: auto;\n\t\tborder: 0.5px solid #BEBEBE;\n\t\tbox-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.36);\n\t\tpadding: 1% 4% 7%;\n\t\tbackground: #f9f9f9;\n\t}\n\n .highcontrast #control_wrapper {\n background: #000000;\n }\n .upload-area, .e-bigger .upload-area {\n width: 73%;\n }\n .e-error {\n padding-top:3px;\n }\n .e-upload {\n width: 100%;\n position: relative;\n margin-top: 15px;\n }\n .control_wrapper .e-upload .e-upload-drag-hover {\n margin: 0;\n }\n \n .submit-btn {\n margin-top: 15px; \n }\n .submitBtn .desc {\n\t\t\tmargin: 2% 23% 0% 18%;\n }\n @media only screen and (max-width: 500px) {\n .submitBtn .desc {\n margin: 12px;\n }\n .upload-area, .e-bigger .upload-area {\n width: 60%;\n }\n }\n .submitBtn {\n position: relative;\n text-align: center;\n }\n .form-support {\n width: 100%; \n }\n .success .form-support {\n display: none;\n }\n .success .successmsg {\n border: 0.5px solid green;\n padding: 10%;\n color: green;\n }\n form#form1 {\n position: relative;\n top: 14%;\n }\n .form-support td {\n width: 100%;\n padding-top:4%;\n }\n .e-upload {\n display: none;\n }\n input.choose-file{\n width: 60%;\n }\n button#browse {\n\t\t\tfloat: right;\n\t\t\tmargin-right: -113px;\n\t\t\tmargin-top: -27px;\n } \n\n .bootstrap4 button#browse {\n\t\t\tmargin-top: -33px;\n } \n \n\t\t@media only screen and (max-width: 600px) {\n\t\t\t.submitBtn {\n\t\t\t margin-top: -22px;\n\t\t\t}\n\t\t }\n\n .e-bigger.material button#browse {\n\t\t\tmargin-top: -36px; \n }\n .e-bigger.bootstrap #dropArea button#browse {\n margin-top: -40px;\n }\n .fabric #dropArea button#browse {\n margin-top: -33px;\n }\n .fabric.e-bigger #dropArea button#browse {\n margin-right: -118px;\n margin-top: -40px;\n }\n\t\t.highcontrast #dropArea button#browse {\n\t\t\tmargin-top: -32px;\n\t\t}\n\t\t.bootstrap #dropArea button#browse {\n\t\t\tmargin-right: -118px;\n\t\t\tmargin-top: -34px;\n\t\t}\n .form-title {\n text-align: center;\n }\n .bootstrap label.e-float-text.e-label-top {\n font-weight: bold;\n }\n\t\t.e-bigger.highcontrast #dropArea button#browse {\n\t\t\tmargin-top: -40px;\n\t\t\tmargin-right: -118px;\n}\n</style>\n\n\n\n</div></body></html>","index.js":"{{ripple}}\n ej.base.enableRipple(true);\n var uploadObj = new ej.inputs.Uploader({\n autoUpload: false,\n multiple: false,\n\t\t\tallowedExtensions: 'image/*',\n selected: onFileSelect\n });\n uploadObj.appendTo('#fileupload');\n document.getElementById('browse').onclick = function () {\n document.getElementsByClassName('e-file-select-wrap')[0].querySelector('button').click();\n return false;\n };\n function onFileSelect(args) {\n var inputElement = document.getElementById('upload');\n inputElement.value = args.filesData[0].name;\n }\n var options = {\n customPlacement: function (inputElement, errorElement) {\n inputElement = inputElement.closest('.form-group').querySelector('.error');\n inputElement.parentElement.appendChild(errorElement);\n },\n rules: {\n 'name': {\n required: true\n },\n 'email': {\n required: true\n },\n 'upload': {\n required: true\n }\n }\n };\n var formObj = new ej.inputs.FormValidator('#form1', options);\n function onFormSubmit() {\n var formStatus = formObj.validate();\n if (formStatus) {\n formObj.element.reset();\n confirm.show();\n }\n }\n var confirm = new ej.popups.Dialog({\n width: '335px',\n visible: false,\n header: 'Success',\n content: 'Your details have been updated successfully, Thank you.',\n target: document.getElementById('control_wrapper'),\n showCloseIcon: true,\n isModal: true,\n animationSettings: {\n effect: 'Zoom'\n }\n });\n confirm.appendTo('#confirmationDialog');\n document.getElementById('submit-btn').onclick = function () {\n onFormSubmit();\n };\n\n"}