overleaf/services/web/public/coffee/directives/fineUpload.coffee

114 lines
3.7 KiB
CoffeeScript
Raw Normal View History

2014-06-22 12:32:15 -04:00
define [
"base"
2017-11-20 09:43:13 -05:00
"libs/fineuploader"
], (App, qq) ->
2014-06-22 12:32:15 -04:00
App.directive 'fineUpload', ($timeout) ->
return {
scope: {
multiple: "="
endpoint: "@"
waitingForResponseText: "@"
failedUploadText: "@"
uploadButtonText: "@"
dragAreaText: "@"
hintText: "@"
allowedExtensions: "="
onCompleteCallback: "="
onUploadCallback: "="
onValidateBatch: "="
onErrorCallback: "="
onSubmitCallback: "="
onCancelCallback: "="
autoUpload: "="
2014-06-22 12:32:15 -04:00
params: "="
control: "="
2014-06-22 12:32:15 -04:00
}
link: (scope, element, attrs) ->
multiple = scope.multiple or false
endpoint = scope.endpoint
if scope.allowedExtensions?
validation =
allowedExtensions: scope.allowedExtensions
else
validation = {}
text =
waitingForResponse: scope.waitingForResponseText or "Processing..."
failUpload: scope.failedUploadText or "Failed :("
uploadButton: scope.uploadButtonText or "Upload"
dragAreaText = scope.dragAreaText or "drag here"
hintText = scope.hintText or ""
maxConnections = scope.maxConnections or 1
2014-06-22 12:32:15 -04:00
onComplete = scope.onCompleteCallback or () ->
onUpload = scope.onUploadCallback or () ->
onError = scope.onErrorCallback or () ->
onValidateBatch = scope.onValidateBatch or () ->
onSubmit = scope.onSubmitCallback or () ->
onCancel = scope.onCancelCallback or () ->
if !scope.autoUpload?
autoUpload = true
else
autoUpload = scope.autoUpload
2014-06-22 12:32:15 -04:00
params = scope.params or {}
params._csrf = window.csrfToken
2017-11-21 11:21:58 -05:00
templateElement = document.createElement('div')
templateElement.innerHTML = """
<div class="qq-uploader-selector">
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector">Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector btn btn-primary btn-lg">
<div>#{text.uploadButton}</div>
</div>
<span class="or btn-lg"> or </span>
<span class="drag-here btn-lg">#{dragAreaText}</span>
<span class="qq-drop-processing-selector"><span>Processing</span><span class="qq-drop-processing-spinner-selector"></span></span>
<div class="small">#{hintText}</div>
<ul class="qq-upload-list-selector">
<li>
<div class="qq-progress-bar-container-selector">
2017-11-22 10:52:02 -05:00
<div
role="progressbar"
aria-valuenow="0"
aria-valuemin="0"
aria-valuemax="100"
class="qq-progress-bar-selector qq-progress-bar">
</div>
2017-11-21 11:21:58 -05:00
</div>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
2017-11-22 10:52:02 -05:00
<a type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</a>
2017-11-21 11:21:58 -05:00
<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>
<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
<\li>
</ul>
</div>
"""
2014-06-22 12:32:15 -04:00
q = new qq.FineUploader
2014-06-22 12:32:15 -04:00
element: element[0]
multiple: multiple
autoUpload: autoUpload
2014-06-22 12:32:15 -04:00
disabledCancelForFormUploads: true
validation: validation
maxConnections: maxConnections
2014-06-22 12:32:15 -04:00
request:
endpoint: endpoint
forceMultipart: true
params: params
paramsInBody: false
callbacks:
onComplete: onComplete
onUpload: onUpload
onValidateBatch: onValidateBatch
onError: onError
onSubmit: onSubmit
onCancel: onCancel
2014-06-22 12:32:15 -04:00
text: text
2017-11-20 09:43:13 -05:00
# template: "qq-uploader"
2017-11-21 11:21:58 -05:00
template: templateElement
window.q = q
scope.control?.q = q
return q
2017-11-20 09:43:13 -05:00
}