Menu
I am looking to integrate fineuploader into my JQuery Mobile app. As a starting point I am trying to use the default template provided on fineuploader.com to familiarise myself.
I downloaded the latest copy of fineuploader from github. I've given the sources for .js files by kinda guessing, as I could not find clear documentation on which files to reference in order to use fineuploader jquery plugin.
The default template does not work, I believe I am not referencing the appropriate files ? Can someone please advise what I could be doing wrong ?
Below is the default template I am using from fineuploader.com.
<!DOCTYPE html>
<html>
<head>
<link href="fine-uploader-master/client/fineuploader.css" rel="stylesheet"/>
</head>
<body>
<!-- The element where Fine Uploader will exist. -->
<div id="fine-uploader">
</div>
<!-- jQuery version 1.10.x (if you are using the jQuery plugin -->
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<!-- Fine Uploader-jQuery -->
<script src="fine-uploader-master/client/js/jquery-plugin.js" type="text/javascript"></script>
<script src="fine-uploader-master/client/js/uploader.js" type="text/javascript"></script>
<script>
// Wait until the DOM is 'ready'
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
request: {
endpoint: '/uploads'
},
deleteFile: {
enabled: true,
endpoint: '/uploads'
},
retry: {
enableAuto: true
}
});
});
</script>
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader">
<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>
</body>
</html>
522
Create a directory and call it /filepond. Now go to the directory on the command line and type npm init . Accept all the defaults. Now install the Express server with npm install express .
Fine Uploader is a pure-JavaScript browser-based file upload library with a long list of features that is unmatched by any other library. The power of Fine Uploader comes from its comprehensive set of options, API methods, and callbacks/events.
Plupload is a JavaScript API for dealing with file uploads it supports features like multiple file selection, file type filtering, request chunking, client side image scaling and it uses different runtimes to achieve this such as HTML 5, Silverlight and Flash.
I agree with Ray's comment above that you should NOT reference individual files.
You could just buy a license and download their packaged versions.. http://fineuploader.com/purchase_form.html
Or, here are the commands I used to build FineUploader from the git repository on a Windows system. This is a more detailed explanation of what you find at the "build your own" link that Ray supplied above. I believe this will pull the latest code from the repository, if you want an older version you'll have to do some investigating into the git clone call as I'm not very familiar with it.
npm install –g grunt-clicd c:\source)git clone git://github.com/Widen/fine-uploader
npm installgrunt package to build the packaged js and css files.The last command combines the necessary files together and put them into a "_dist" directory. The "_dist" directory contains folders and zip files for each flavor of the program (all, jquery, s3, etc.). A more detailed package (i.e. jquery vs core) will be larger files so only use what you need.
87
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
