feat(forums): attach file upload add manual-file-chooser.

This commit is contained in:
OldHawk
2017-07-16 16:42:28 +08:00
parent e9a3117098
commit 28f20af9dc
4 changed files with 33 additions and 7 deletions

View File

@@ -688,7 +688,9 @@
TODAY_NEW_COUNT_REPLY: '(Today: <mark class="text-danger">{{reply}}</mark> replies)',
UPLOAD_ATTACH_SUCCESSFULLY: 'Upload attach file successfully',
UPLOAD_ATTACH_FAILED: 'Upload attach file failed',
ATTACH_UPLOAD_TOOLTIP: 'Attach files by dragging & dropping to here, The picture file will be displayed automatically, Others file can only be downloaded.',
ATTACH_UPLOAD_TOOLTIP1: 'Attach files by dragging & dropping or ',
ATTACH_UPLOAD_TOOLTIP2: 'select them',
ATTACH_UPLOAD_TOOLTIP3: ', The picture file will be displayed automatically, Others file can only be downloaded.',
ATTACH_UPLOADING: 'Uploading',
ATTACH_LIST_HEADER: 'Attach files list:',
ATTACH_FILE_SIZE: 'Size:',

View File

@@ -688,7 +688,9 @@
TODAY_NEW_COUNT_REPLY: '(今日: <mark class="text-danger">{{reply}}</mark> 回复)',
UPLOAD_ATTACH_SUCCESSFULLY: '文件上传成功',
UPLOAD_ATTACH_FAILED: '文件上传失败',
ATTACH_UPLOAD_TOOLTIP: '上传附件请将文件拖到这里面, 图片文件将会被自动显示, 其它类文件只能被下载.',
ATTACH_UPLOAD_TOOLTIP1: '上传附件请将文件拖到这里或者',
ATTACH_UPLOAD_TOOLTIP2: '选择文件',
ATTACH_UPLOAD_TOOLTIP3: ', 图片文件将会被自动显示, 其它类文件只能被下载.',
ATTACH_UPLOADING: '正在上传',
ATTACH_LIST_HEADER: '附件清单:',
ATTACH_FILE_SIZE: '文件大小:',

View File

@@ -33,7 +33,7 @@
scope.uFiles = [];
scope.uImages = [];
var eleUploadTip = angular.element('<div class="attach-info" ng-show="!uFile"><div class="attach-upload-tooltip text-long"><span>{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP\' | translate}}</span></div></div>');
var eleUploadTip = angular.element('<div class="attach-info" ng-show="!uFile"><div class="attach-upload-tooltip text-long"><span>{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP1\' | translate}}</span><input type="file" class="manual-file-chooser" ng-model="selectedFile" ngf-select="onFileSelected($event);"><span class="btn-link manual-file-chooser-text">{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP2\' | translate}}</span>{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP3\' | translate}}</div></div>');
var eleUploadBegin = angular.element('<div class="upload-info" ng-show="uFile"><i class="fa fa-cog fa-spin fa-lg fa-fw"></i> <div class="attach-upload-progress" style="width: {{uProgress}}%"></div><div class="attach-upload-filename">{{\'FORUMS.ATTACH_UPLOADING\' | translate}}: {{uFile.name}}</div></div>');
var eleUploadList = angular.element('<div class="attach-list" ng-show="uFiles.length"><div><ol><li ng-repeat="f in uFiles track by $index">{{f.name}} <i class="fa fa-times" ng-click="removeAttach($index)"></i></li></ol></div></div>');
@@ -49,6 +49,10 @@
scope.uFiles.splice(idx, 1);
};
scope.onFileSelected = function(evt){
doUpload(scope.selectedFile);
};
$('.md-editor').bind('dragenter', function (evt) {
evt.stopPropagation();
evt.preventDefault();
@@ -62,8 +66,13 @@
evt.stopPropagation();
evt.preventDefault();
doUpload(evt.originalEvent.dataTransfer.files[0]);
return false;
});
function doUpload(sFile){
if (attrs.uploadMethod) {
scope.uFile = evt.originalEvent.dataTransfer.files[0];
scope.uFile = sFile;
scope.uProgress = 0;
scope.$eval(attrs.uploadMethod, {
@@ -99,9 +108,7 @@
}
});
}
return false;
});
}
$compile($('.md-editor').contents())(scope);
}
});

View File

@@ -508,6 +508,21 @@
.attach-upload-tooltip {
margin: 8px;
}
.manual-file-chooser {
position: absolute;
width: 240px;
padding: 5px;
margin-left: 200px;
margin-top: -23px;
cursor: pointer;
opacity: 0.00001;
}
.manual-file-chooser-text {
cursor: pointer;
&:hover {
color: @mt-base-color;
}
}
}
.attach-list {
color: #666;