diff --git a/frappe/public/css/form.css b/frappe/public/css/form.css
index f2f758aac5..255c2afc2a 100644
--- a/frappe/public/css/form.css
+++ b/frappe/public/css/form.css
@@ -612,6 +612,9 @@ select.form-control {
   font-weight: 500;
   color: #8D99A6;
 }
+.attach-btn {
+  margin-top: 10px;
+}
 @media (min-width: 768px) {
   .layout-main .form-column.col-sm-12 > form > .input-max-width {
     max-width: 50%;
diff --git a/frappe/public/js/frappe/upload.js b/frappe/public/js/frappe/upload.js
index 2031e8e325..f8face91fb 100644
--- a/frappe/public/js/frappe/upload.js
+++ b/frappe/public/js/frappe/upload.js
@@ -131,7 +131,7 @@ frappe.upload = {
 
 
 		if(!opts.btn) {
-			opts.btn = $('<button class="btn btn-default btn-sm">' + __("Attach")
+			opts.btn = $('<button class="btn btn-default btn-sm attach-btn">' + __("Attach")
 				+ '</div>').appendTo($upload);
 		} else {
 			$(opts.btn).unbind("click");
@@ -280,20 +280,29 @@ frappe.upload = {
 
 		let start_complete = frappe.cur_progress ? frappe.cur_progress.percent : 0;
 
+		var upload_with_filedata = function() {
+			let freader = new FileReader();
+			freader.onload = function() {
+				var dataurl = freader.result;
+				args.filedata = freader.result.split(",")[1];
+				args.file_size = fileobj.size;
+				frappe.upload._upload_file(fileobj, args, opts, dataurl);
+			};
+			freader.readAsDataURL(fileobj);
+		}
+
+		if (opts.no_socketio) {
+			upload_with_filedata();
+			return;
+		}
+
 		frappe.socketio.uploader.start({
 			file: fileobj,
 			filename: args.filename,
 			is_private: args.is_private,
 			fallback: () => {
 				// if fails, use old filereader
-				let freader = new FileReader();
-				freader.onload = function() {
-					var dataurl = freader.result;
-					args.filedata = freader.result.split(",")[1];
-					args.file_size = fileobj.size;
-					frappe.upload._upload_file(fileobj, args, opts, dataurl);
-				};
-				freader.readAsDataURL(fileobj);
+				upload_with_filedata();
 			},
 			callback: (data) => {
 				args.file_url = data.file_url;
diff --git a/frappe/public/less/form.less b/frappe/public/less/form.less
index 196d225027..dd2b07988d 100644
--- a/frappe/public/less/form.less
+++ b/frappe/public/less/form.less
@@ -762,6 +762,10 @@ select.form-control {
 	color: @text-muted;
 }
 
+.attach-btn {
+	margin-top: 10px;
+}
+
 // above mobile
 @media (min-width: 768px) {
 	.layout-main .form-column.col-sm-12 > form > .input-max-width {