Skip to content

Instantly share code, notes, and snippets.

@KratosGemini

KratosGemini/FineUploaderValidateEventBugCode

Last active August 29, 2015 14:04
Show Gist options
  • Save KratosGemini/f7f1c2ac7a94b54aeba5 to your computer and use it in GitHub Desktop.
Save KratosGemini/f7f1c2ac7a94b54aeba5 to your computer and use it in GitHub Desktop.
Download ZIP
An example for a Fine Uploader bug dealing with the validate event and spaces
Raw
FineUploaderValidateEventBugCode
<!--
This is a document you can use when you start building the page that will contain
one or more Fine Uploader UI instances. A default template that can be customized
is located in the text/template script tag below.
Please see http://docs.fineuploader.com/features/styling.html for information
on how to customize this default template.
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="Stylesheet" href="s3.jquery.fineuploader-5.0.3/fineuploader-5.0.3.min.css" />
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="s3.jquery.fineuploader-5.0.3/s3.jquery.fineuploader-5.0.3.min.js"></script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
<div class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span>Drop files here to upload</span>
</div>
<div class="qq-upload-button-selector qq-upload-button">
<div>Upload a file</div>
</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">
<li>
<div class="qq-progress-bar-container-selector">
<div class="qq-progress-bar-selector qq-progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<a class="qq-upload-cancel-selector qq-upload-cancel" href="#">Cancel</a>
<a class="qq-upload-retry-selector qq-upload-retry" href="#">Retry</a>
<a class="qq-upload-delete-selector qq-upload-delete" href="#">Delete</a>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
</div>
</script>
<title>Fine Uploader default UI</title>
</head>
<body>
<div id="fineuploader-s3"></div>
<script>
$(document).ready(function () {
$('#fineuploader-s3').fineUploaderS3({
debug: true,
objectProperties: {
key: function (fileId) {
var file = $('#fineuploader-s3').fineUploaderS3('getFile', fileId);
console.log('[Key Function] name: ' + file.name);
console.log('[Key Function] qqPath: ' + file.qqPath);
return file.qqPath.toLowerCase() + file.name.toLowerCase();
}
},
request: {
endpoint: '<ENTER S3 ENDPOINT>',
accessKey: '<ENTER S3 ACCESS KEY>'
},
signature: {
endpoint: '/s3handler'
}
}).on('validate', function (event, data, buttonContainer) {
console.log('[Validate Handler] name: ' + data.name);
console.log('[Validate Handler] qqPath: ' + data.qqPath);
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment