Last active
August 29, 2015 14:08
-
-
Save yllieth/12668fe6896fc0246ed0 to your computer and use it in GitHub Desktop.
S3 direct upload with angularJS and fineuploader
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
angular.module("hub.upload") | |
.directive("fineUploaderS3", function($compile, $interpolate, $translate, baseUrl) { | |
return { | |
restrict: "A", | |
replace: true, | |
link: function($scope, element, attrs) { | |
var wrapper = document.getElementById("upload-s3") | |
new qq.s3.FineUploader({ | |
element: wrapper, | |
callbacks: { | |
// initialize input with submitted file name | |
onSubmitted: function() { | |
filename = this.getName(this._totalFilesInBatch - 1) | |
wrapper.getElementsByClassName('qq-edit-filename-selector')[0].value = filename; | |
}, | |
// bind angular expressions (i18n support for Cancel/Retry/Delete/Pause/Continue/View links) | |
onAllComplete: function() { | |
$compile(element.find('a'))($scope); | |
} | |
}, | |
debug: true, | |
request: { | |
endpoint: attrs.endpoint, | |
accessKey: attrs.key | |
}, | |
template: "simple-previews-template", | |
validation: { | |
allowedExtensions: attrs.allowedExtensions.split(",") | |
} | |
}); | |
$compile(element.contents())($scope); | |
} | |
} | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/template" id="simple-previews-template"> | |
<div class="qq-uploader-selector qq-uploader"> | |
<div class="row"> | |
<div class="columns large-6 medium-10"> | |
<div class="row collapse"> | |
<label>{{ 'DATASET.NEW' | translate }}</label> | |
<!-- filename input --> | |
<div class="columns medium-8"> | |
<input type="text" class="qq-edit-filename-selector qq-edit-filename" | |
tabindex="0" disabled | |
placeholder="{{ 'ACTION.UPLOAD.SELECT_FILE' | translate }}" /> | |
</div> | |
<!-- browse button --> | |
<div class="columns medium-3 end"> | |
<div class="qq-upload-button-selector qq-upload-button small postfix"> | |
{{ 'ACTION.BROWSE' | translate }} | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<div class="row"> | |
<div class="columns"> | |
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone> | |
<span>Drop files here to upload</span> | |
</div> | |
<span class="qq-drop-processing-selector qq-drop-processing"> | |
<span>Processing dropped files...</span> | |
<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span> | |
</span> | |
<ul class="qq-upload-list-selector qq-upload-list sp-bottom"> | |
<li> | |
<div class="qq-progress-bar-container-selector progress round"> | |
<span class="qq-progress-bar-selector qq-progress-bar meter"></span> | |
</div> | |
<span class="qq-upload-spinner-selector qq-upload-spinner"></span> | |
<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale> | |
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span> | |
<span class="qq-upload-file-selector qq-upload-file"></span> | |
<span class="qq-upload-size-selector qq-upload-size"></span> | |
<a class="qq-upload-cancel-selector btn-small btn-warning" href="#" ng-bind="cancelText"></a> | |
<a class="qq-upload-retry-selector btn-small btn-info" href="#" ng-bind="retryText"></a> | |
<a class="qq-upload-delete-selector btn-small btn-warning" href="#" ng-bind="deleteText"></a> | |
<a class="qq-upload-pause-selector btn-small btn-info" href="#" ng-bind="pauseText"></a> | |
<a class="qq-upload-continue-selector btn-small btn-info" href="#" ng-bind="continueText"></a> | |
<span class="qq-upload-status-text-selector qq-upload-status-text"></span> | |
<a class="view-btn btn-small btn-info hide" target="_blank" ng-bind="viewText"></a> | |
</li> | |
</ul> | |
</div> | |
</div> | |
</div> | |
</script> | |
<div id="upload-s3" fine-uploader-s3 | |
allowed-extensions=",txt,csv" | |
endpoint="{{ Upload.credentials.s3_endpoint }}" | |
key="{{ Upload.credentials.aws_access_key_id }}" | |
signature="{{ Upload.credentials.signature }}" | |
policy="{{ Upload.credentials.policy }}" | |
path="{{ Upload.credentials.key }}"> | |
{{ 'ACTION.BROWSE' | translate }} | |
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment