From cec2debec939f61869866c875ca87e60f59f94c7 Mon Sep 17 00:00:00 2001 From: Ray Nicholus Date: Thu, 9 Apr 2015 16:10:22 -0500 Subject: [PATCH] docs(jQuery): Remove most jQuery syntax examples from the docs ...in favor of vanilla JS and Fine Uploader's helper functions. #1310 --- docs/api/events-s3.jmd | 24 +------ docs/api/events.jmd | 24 +------ docs/features/concurrent-chunking.jmd | 3 +- docs/features/drag-and-drop.jmd | 40 +---------- docs/features/extra-buttons.jmd | 49 ++++++++------ docs/features/handling-errors.jmd | 27 +++++--- docs/features/retry.jmd | 15 +++-- docs/features/styling.jmd | 23 ++++--- docs/features/upload-files.jmd | 14 ++-- docs/integrating/bootstrap.jmd | 6 -- docs/integrating/jquery.jmd | 13 ++-- docs/quickstart/01-getting-started.jmd | 69 +------------------ docs/quickstart/02-setting_options-azure.jmd | 58 ++++++++-------- docs/quickstart/02-setting_options-s3.jmd | 70 +++++++++----------- docs/quickstart/02-setting_options.jmd | 50 ++++++-------- docs/quickstart/enabling_fineuploader.jmd | 50 -------------- docs/quickstart/html5_features.jmd | 35 ---------- 17 files changed, 169 insertions(+), 401 deletions(-) delete mode 100644 docs/integrating/bootstrap.jmd delete mode 100644 docs/quickstart/enabling_fineuploader.jmd delete mode 100644 docs/quickstart/html5_features.jmd diff --git a/docs/api/events-s3.jmd b/docs/api/events-s3.jmd index d3616d2b8..ae5d71e1c 100644 --- a/docs/api/events-s3.jmd +++ b/docs/api/events-s3.jmd @@ -20,17 +20,7 @@ in Fine Uploader S3, unless otherwise noted here. ### Syntax -There is a significant difference in the way events are defined between the jQuery and non-jQuery uploaders. - -When using the non-jQuery version, events are defined as functions in the `callbacks` option object. - -There are two things to keep in mind when using the jQuery plugin version. First, event handlers are defined by calling the [jQuery `.on()`](http://api.jquery.com/on/) function which will bind a function to an event. Secondly, event handler parameters are passed an extra [jQuery `Event`](http://api.jquery.com/category/events/event-object/) object. If using the jQuery plugin, this Event object will precede all arguments listed. - -See the [Integrating jQuery](../integrating/jquery) page for code examples and more details. - -#### non-jQuery - -When using the non-jQuery uploader, the following syntax is the correct way to define event handlers; +The following syntax is the correct way to define event handlers: ``` callbacks: { @@ -43,18 +33,6 @@ callbacks: { } ``` -#### jQuery - -The syntax below is only acceptable when using the jQuery plugin for the uploader: - -``` -$("#my_uploader").on("deleteComplete", function(event, id, xhr, isError) { - //... -}).on("delete", function(event, id) { - // ... -}); -``` - #### credentialsExpired Called before a request is sent to S3 if the temporary credentials have expired. You must return diff --git a/docs/api/events.jmd b/docs/api/events.jmd index 9c11c198c..bfe26f702 100644 --- a/docs/api/events.jmd +++ b/docs/api/events.jmd @@ -32,17 +32,7 @@ Fine Uploader. ### Syntax -There is a significant difference in the way events are defined between the jQuery and non-jQuery uploaders. - -When using the non-jQuery version, events are defined as functions in the `callbacks` option object. - -There are two things to keep in mind when using the jQuery plugin version. First, event handlers are defined by calling the [jQuery `.on()`](http://api.jquery.com/on/) function which will bind a function to an event. Secondly, event handler parameters are passed an extra [jQuery `Event`](http://api.jquery.com/category/events/event-object/) object. If using the jQuery plugin, this Event object will precede all arguments listed. - -See the [Integrating jQuery](../integrating/jquery.html) page for code examples and more details. - -#### non-jQuery - -When using the non-jQuery uploader, the following syntax is the correct way to define event handlers: +The following syntax is the correct way to define event handlers: ``` callbacks: { @@ -55,18 +45,6 @@ callbacks: { } ``` -#### jQuery - -The syntax below is only acceptable when using the jQuery plugin for the uploader: - -``` -$("#my_uploader").on("deleteComplete", function(event, id, xhr, isError) { - //... -}).on("delete", function(event, id) { - // ... -}); -``` - {% endmarkdown %}
diff --git a/docs/features/concurrent-chunking.jmd b/docs/features/concurrent-chunking.jmd index 7eaa92e23..2a8272014 100644 --- a/docs/features/concurrent-chunking.jmd +++ b/docs/features/concurrent-chunking.jmd @@ -88,7 +88,8 @@ send a POST after all chunks have been successfully uploaded for each file. For example: ```javascript -$("myUploader").fineUploader({ +var uploader = new qq.FineUploader({ + element: document.getElementById("myUploader"), request: { endpoint: "/upload/receiver" }, diff --git a/docs/features/drag-and-drop.jmd b/docs/features/drag-and-drop.jmd index 02c75c736..82bad9a36 100644 --- a/docs/features/drag-and-drop.jmd +++ b/docs/features/drag-and-drop.jmd @@ -137,9 +137,7 @@ api_event("dropLog", "dropLog", {% markdown %} -## No-Dependency Example - -If you are not utilizing jQuery, you can use the plain javascript DnD module. Here is a simple example: +## Simple Example ```javascript var dragAndDropModule = new qq.DragAndDrop({ @@ -166,42 +164,6 @@ var dragAndDropModule = new qq.DragAndDrop({ }); ``` -## jQuery Example - -For jQuery users, a jQuery-wrapped DnD module is also available in the combined and minified Fine Uplpoader javascript file. -This jQuery wrapper follows the same conventions as the jQuery plug-in that wraps the uploader library. To read more -about these conventions, please see the [Using jQuery plug-in]({{ URL_ROOT }}/integrating/modes/using-jquery-plugin.html) readme document. - -There are a couple things to be aware of when using the DnD standalone module via the jQuery plug-in wrapper: -* The only API method available is `dispose`. This restriction is in place since the other API functions don't really make sense in the context of a jQuery plug-in. -* The target of your plug-in instance takes the place of the `dropZoneElements` option. Do not pass a `dropZoneElements` option, it will be ignored. - -Here is the above example rewritten using the jQuery plug-in wrappers: - -```javascript -$('#myDropZone').fineUploaderDnd({ - classes: { - dropActive: "cssClassToAddToDropZoneOnEnter" - } -}) - .on('processingDroppedFiles', function(event) { - //TODO: display some sort of a "processing" or spinner graphic - }) - .on('processingDroppedFilesComplete', function(event, files, dropTarget) { - //TODO: hide spinner/processing graphic - - $('#fineUploaderBasicContainer').fineUploader('addFiles', files); //this submits the dropped files to Fine Uploader - }); - -$('#fineUploaderBasicContainer').fineUploader({ - request: { - endpoint: "server/uploadHandler" - } -}); -``` - -{{ alert("jQuery 1.7+ is required to use the `on` function.") }} - [For more information, see the associated blog post](http://blog.fineuploader.com/2013/04/05/standalone-file-drag-drop-module-in-3-5/) {% endmarkdown %} diff --git a/docs/features/extra-buttons.jmd b/docs/features/extra-buttons.jmd index f05614893..bf48eab9b 100644 --- a/docs/features/extra-buttons.jmd +++ b/docs/features/extra-buttons.jmd @@ -17,8 +17,7 @@ The new [`extraButtons` option](../api/options.html#extrabuttons-option) allows at styled containers that you would like to use as upload buttons. This option takes an array of objects, and each object must, at least, define an `element` property with a value of your styled upload button container. Fine Uploader will then attach a file input element to this container and track it just as it tracks the default -upload button it creates. You can specify an `HTMLElement`, or even a `jQuery` object (if you are using the -Fine Uploader jQuery plugin) as the value for the `element` property. +upload button it creates. You can specify an `HTMLElement` as the value for the `element` property. By default, each extra button will inherit the root `multiple` and `validation` option values from the root option set. You can override these values for each button by simply contributing alternate `multiple` and `validation` @@ -33,14 +32,15 @@ selected by both buttons. Your HTML and javascript might look something like thi ``` ```javascript -$("#uploader").fineUploader({ +var uploader = new qq.FineUploader({ + element: document.getElementById("myUploader"), validation: { allowedExtensions: ["jpeg", "jpg"], sizeLimit: 5000000 // 5 MiB } extraButtons: [ { - element: $("#pdfButton"), + element: document.getElementById("pdfButton"), validation: { allowedExtensions: ["pdf"] } @@ -62,8 +62,7 @@ Suppose you want to apply custom validation rules to a specific button. No prob `validateBatch` events contain a `button` as the last parameter passed to your handler. This `button` parameter will be the container element for the button that was used to select/submit the associated file to the uploader. If a drop zone was used to submit the file, or if an input element or source outside of Fine Uploader was used -to submit the file (such as via the `addFiles` method), the `button` parameter will be undefined. Note that, if -you are using the jQuery plug-in, the `button` parameter will be a jQuery object. +to submit the file (such as via the `addFiles` method), the `button` parameter will be undefined. ## Associate file ID to a button (per-button endpoints, params, etc) @@ -73,14 +72,20 @@ For example, if you want to attach specific parameters to a file, or send it to on the button that selected it, you can do so in an appropriate event handler, such as `upload`. For example: ```javascript -$("#uploader").on("upload", function(event, id, name) { - var $button = $(this).fineUploader("getButton", id); +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ - if ($("#pdfButton").is($button)) { - $(this).fineUploader("setParams", {type: "pdf"}, id); - } - else { - $(this).fineUploader("setParams", {type: "jpeg"}, id); + callbacks: { + onUpload: function(id, name) { + var button = this.getButton(id); + + if (button.id === "pdfButton") { + this.setParams({type: "pdf"}, id); + } + else { + this.setParams({type: "jpeg"}, id); + } + } } }); ``` @@ -102,13 +107,15 @@ also assuming you only want this button to appear if folder selection is possibl ```javascript // only show the folders button if folder selection is possible in the current browser if (!qq.supportedFeatures.folderSelection) { - $("#foldersButton").hide(); + document.getElementById("foldersButton").style.display = "none"; } -$("#uploader").fineUploader({ +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + extraButtons: [ { - element: $("#foldersButton"), + element: document.getElementById("foldersButton"), folders: true } ] @@ -132,17 +139,19 @@ blog, now using the extra buttons feature: ```javascript // only show this button in iOS if (!qq.ios()) { - $("#cameraButtonContainer").hide(); + document.getElementById("cameraButtonContainer").style.display = "none"; } -$("myFineUploader").fineUploader({ +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + camera: { ios: true, - button: ${"#cameraButtonContainer") + button: document.getElementById("cameraButtonContainer") } extraButtons: [ { - element: $("#cameraButtonContainer") + element: document.getElementById("cameraButtonContainer") } ] }); diff --git a/docs/features/handling-errors.jmd b/docs/features/handling-errors.jmd index 51985bf9b..5a8288651 100644 --- a/docs/features/handling-errors.jmd +++ b/docs/features/handling-errors.jmd @@ -37,15 +37,17 @@ The following code snippet shows how one might display a custom alert on the event of an error. ```javascript -$("#fine-uploader").fineUploader({ - // ... -}).on('error', function (event, id, name, errorReason, xhrOrXdr) { - alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason)); +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + + callbacks: { + onError: function(id, name, errorReason, xhrOrXdr) { + alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason)); + } + } }); ``` -{{ alert("jQuery 1.7+ is required to use the `on` function.") }} - ## The `error` Response Property By default, if Fine Uploader does **not** receive a successful server response @@ -57,7 +59,9 @@ If the server indicates failure in the response, but does not include an `defaultResponseError` property will be used as the error message. ```javascript -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + text: { defaultResponseError: 'An unknown upload error occurred.' } @@ -70,7 +74,9 @@ The `messages` property in the main Fine Upload options object provides a handful of properties one can override to display custom error messages. ```javascript -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + messages: { typeError: '{file} has an invalid extension. Valid extension(s): {extensions}.' // other messages can go here as well ... @@ -99,12 +105,13 @@ The `failedUploadTextDisplay` option defines properties used for displaying text when an upload fails. ```javascript -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + // These are all the DEFAULT values... failedUploadTextDisplay: { mode: 'default', responseProperty: 'error', - enableTooltip: true } }); ``` diff --git a/docs/features/retry.jmd b/docs/features/retry.jmd index 846a44ce3..79fca0898 100644 --- a/docs/features/retry.jmd +++ b/docs/features/retry.jmd @@ -11,18 +11,19 @@ Fine Uploader will automatically attempt to retry an upload if the `enableAuto` option is set to `true`: ```javascript -$("#fine-uploader").fineUploader({ - // .. +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + retry: { enableAuto: true + }, + callbacks: { + onRetry: function(id, name, attemptNumber) { + ... + } } -}).on('autoRetry', function (event, id, name, attemptNumber) { - }); ``` -{{ alert("jQuery 1.7+ is required to use the `on` function.") }} - - {% endmarkdown %} {% endblock %} diff --git a/docs/features/styling.jmd b/docs/features/styling.jmd index 919af2708..297e1cc35 100644 --- a/docs/features/styling.jmd +++ b/docs/features/styling.jmd @@ -169,14 +169,21 @@ To do this, the file list portion of the template can be modified to include thi Your `complete` event handler would look something like this: ```javascript -$("#myUploader").on("complete", function(event, id, name, response) { - var serverPathToFile = response.filePath, - $fileItem = $(this).fineUploader("getItemByFileId", id); - - if (response.success) { - $fileItem.find(".view-btn") - .attr("href", serverPathToFile) - .removeClass("hide"); +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + + callbacks: { + onComplete: function(id, name, response) { + var serverPathToFile = response.filePath, + fileItem = this.getItemByFileId(id); + + if (response.success) { + var viewBtn = qq(fileItem).getByClass("view-btn")[0]; + + viewBtn.setAttribute("href", serverPathToFile); + qq(viewBtn).removeClass("hide"); + } + } } }); ``` diff --git a/docs/features/upload-files.jmd b/docs/features/upload-files.jmd index 3019d6480..f244ef8d3 100644 --- a/docs/features/upload-files.jmd +++ b/docs/features/upload-files.jmd @@ -36,7 +36,9 @@ By default `autoUpload` is enabled. ```javascript // Upload automatically -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + request: { endpoint: '/server/upload' } @@ -49,19 +51,19 @@ the uploads via the API time. Uploads can be triggered by calling the `uploadSto ```javascript // Manually upload -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ + /* other required config options left out for brevity */ + autoUpload: false, request: { endpoint: '/server/upload' } }); -$("#upload-button").on('click', function () { - $("#fine-uploader").fineUploader('uploadStoredFiles'); +qq(document.getElementById("upload-button")).attach('click', function() { + uploader.uploadStoredFiles(); }); ``` -{{ alert("jQuery 1.7+ is required to use the `on` function.") }} - {% endmarkdown %} {% endblock %} diff --git a/docs/integrating/bootstrap.jmd b/docs/integrating/bootstrap.jmd deleted file mode 100644 index 1b091fc4c..000000000 --- a/docs/integrating/bootstrap.jmd +++ /dev/null @@ -1,6 +0,0 @@ -{% extends "_templates/base.html" %} -{% block content %} -{% markdown %} - -{% endmarkdown %} -{% endblock %} diff --git a/docs/integrating/jquery.jmd b/docs/integrating/jquery.jmd index 6d3767058..04371b4b0 100644 --- a/docs/integrating/jquery.jmd +++ b/docs/integrating/jquery.jmd @@ -3,16 +3,13 @@ {% block content %} {% markdown %} -# jQuery Plugin {: .page-header } +# jQuery Plugin Wrapper {: .page-header } -[jQuery](http://jquery.com/) is a cross-browser JavaScript library designed to -simplify client-side scripting of HTML. -It provides tons of workarounds for various browsers, and makes developing -client-side JavaScript for the web much easier. Overall, it is recommended to -use jQuery unless you are specifically trying to develop without it. +While Fine Uploader provides wrapper code that integrates with jQuery +while still allowing the integrator to choose between Core and UI modes, [there is no obvious benefit to using jQuery in the context of Fine Uploader](https://github.com/FineUploader/fine-uploader/issues/1310). +However, if you prefer to use the jQuery wrapper, this page will serve as a guide, explaining the syntax differences between +the jQuery wrapper and the core library sans jQuery. -Fortunately, Fine Uploader provides wrapper code that integrates with jQuery -while still allowing the integrator to choose between Core and UI modes. The Fine Uploader jQuery plugin has a couple of syntactical differences than the regular Fine Uploader plugin. Also, some of the options are defined differently. Note that all conventions commonly associated with jQuery plug-ins are followed faithfully here, so diff --git a/docs/quickstart/01-getting-started.jmd b/docs/quickstart/01-getting-started.jmd index 7cb41c332..52c4c4320 100644 --- a/docs/quickstart/01-getting-started.jmd +++ b/docs/quickstart/01-getting-started.jmd @@ -77,48 +77,12 @@ If you need to support IE9 and older, you will need to load/use Fine Uploader wi handler if the value of `qq.supportedFeatures.ajaxUploading` is `false`.") }} -#### [jQuery](../integrating/jquery.html) - -Fine Uploader is also easily used as a jQuery plugin. This plugin gives you -the ability to use either Core or UI mode. - -To use Core Mode with the jQuery plugin simply set the uploaderType to be -'basic': - -```javascript -$("#fine-uploader").fineUploader({uploaderType: 'basic' /* options go here... */}); -``` - -To use UI Mode with the jQuery plugin: -```javascript -$("#fine-uploader").fineUploader({/* options go here... */}); -``` - -To use Fine Uploader S3 with the jQuery plugin: -```javascript -$("#fine-uploader").fineUploaderS3({/* options go here... */}); -``` - -To use Fine Uploader Azure with the jQuery plugin: -```javascript -$("#fine-uploader").fineUploaderAzure({/* options go here... */}); -``` - -{{ alert( -"""Henceforth this walkthrough will utilize the jQuery plugin of Fine Uploader. -This is because jQuery is more or less ubiquitous on the web, and its a safe bet -to assume it is included somewhere on your page. If you are forced to use the -non-jQuery version, then keep in mind that the syntax will be slightly different.""") }} - #### Callbacks Like many other JavaScript libraries, Fine Uploader implements a event system that uses callbacks to execute user-provided functions at runtime, based on -specific events. These [events are listed here](../api/events.html). Depending -on whether you are using the jQuery plugin or not, the callback syntax is a -bit different: +specific events. These [events are listed here](../api/events.html). -##### non-jQuery -With the non-jQuery plugin, callbacks are defined in the `callbacks` option +Callbacks are defined in the `callbacks` option property. The parameters for the callbacks are the same as listed in the [documentation](../api/events.html). @@ -136,35 +100,6 @@ var uploader = new qq.FineUploader({ }); ``` -##### jQuery -The jQuery plugin uses a slightly different callback syntax. This syntax will -be familiar to thsoe used to working with jQuery plugins. Note that an extra -[`Event`](http://api.jquery.com/Types/#Event) object is passed into the handler -function as the first parameter, the consecutive parameters are the same as -those listed in the [events documentation](../api/events.html). - -**Example:** - -```javascript -$("#fine-uploader") - .fineUploader({/* options go here... */}) - .on('upload', function (event, id, name) { - // callback code here... - }) - .on('submitted', function (event, id, name) { - // callback code here... - }); -``` - -{{ alert( -"""You may use traditional callback handler functions with the jQuery plug-in if you wish. -If you do contribute traditional callback functions via the `callbacks` option, you should disregard event handler section -of the above example as this will bypass the jQuery plug-in entirely. Also, while it is possible to contribute -two callbacks of the same type via a jQuery event handler and a `callbacks` option, you should be aware that the -`callbacks` function will always be evaluated first, and the return value from the `callbacks` function will be -accepted instead of the return value from the jQuery event handler if the return value of the `callbacks` -function is non-null.""", "info", "Note:") }} - Next, let's check out some of Fine Uploader's options. Proceed by selecting either: diff --git a/docs/quickstart/02-setting_options-azure.jmd b/docs/quickstart/02-setting_options-azure.jmd index 1ff34dbd0..f37d3ce3c 100644 --- a/docs/quickstart/02-setting_options-azure.jmd +++ b/docs/quickstart/02-setting_options-azure.jmd @@ -30,7 +30,7 @@ handler if the value of `qq.supportedFeatures.ajaxUploading` is `false`.") }} ```javascript if (qq.supportedFeatures.ajaxUploading) { - $("#fine-uploader").fineUploaderAzure({ + var uploader = new qq.azure.FineUploader request: { endpoint: 'https://{ YOUR_STORAGE_ACCOUNT_NAME }.blob.core.windows.net/{ YOUR_CONTAINER_NAME }' }, @@ -50,7 +50,7 @@ Debug mode is used to begin diagnosing any application errors. Debug mode can be enabled in the options of Fine Uploader: ```javascript -$("#fine-uploader").fineUploaderAzure({ +var uploader = new qq.azure.FineUploader debug: true, /* ...other options... */ }); @@ -68,7 +68,7 @@ Networks can be unreliable, and if your upload fails, Fine Uploader offers the ability to retry. The `retry` option can be set to enable this: ```javascript -$("#fine-uploader").fineUploaderAzure({ +var uploader = new qq.azure.FineUploader /* ...other options... */ retry: { enableAuto: true // defaults to false @@ -91,7 +91,7 @@ Note that Fine Uploader Azure will send delete file requests directly to Azure v `endpoint` property of the `deleteFile` feature is irrelevant. ```javascript -$("#fine-uploader").fineUploaderAzure({ +var uploader = new qq.azure.FineUploader /* ...other options... */ deleteFile: { enabled: true // default is false @@ -116,34 +116,8 @@ Now our Fine Uploader page should look something like this:
- - - - - - - + + + ``` diff --git a/docs/quickstart/02-setting_options-s3.jmd b/docs/quickstart/02-setting_options-s3.jmd index 5e20ed8f2..b1e57615f 100644 --- a/docs/quickstart/02-setting_options-s3.jmd +++ b/docs/quickstart/02-setting_options-s3.jmd @@ -24,7 +24,7 @@ Fine Uploader S3, the endpoint should point to your S3 bucket. More information on the [`request` option here](../api/options-s3.html#request-option). ```javascript -$("#fine-uploader").fineUploaderS3({ +var uploader = new qq.s3.FineUploader({ request: { endpoint: '{ YOUR_BUCKET_NAME }.s3.amazonaws.com' accessKey: '{ YOUR_ACCESS_KEY }' @@ -47,7 +47,7 @@ Debug mode is used to begin diagnosing any application errors. Debug mode can be enabled in the options of Fine Uploader: ```javascript -$("#fine-uploader").fineUploaderS3({ +var uploader = new qq.s3.FineUploader({ debug: true, /* ...other options... */ }); @@ -65,7 +65,7 @@ Networks can be unreliable, and if your upload fails, Fine Uploader offers the ability to retry. The `retry` option can be set to enable this: ```javascript -$("#fine-uploader").fineUploaderS3({ +var uploader = new qq.s3.FineUploader({ /* ...other options... */ retry: { enableAuto: true // defaults to false @@ -87,7 +87,7 @@ options. You can also send a delete request via the `deleteFile` [API method](../api/methods.html). ```javascript -$("#fine-uploader").fineUploaderS3({ +var uploader = new qq.s3.FineUploader({ /* ...other options... */ deleteFile: { enabled: true, // defaults to false @@ -113,40 +113,8 @@ Now our Fine Uploader page should look something like this:
- - - - - - - + + + ``` diff --git a/docs/quickstart/02-setting_options.jmd b/docs/quickstart/02-setting_options.jmd index f54413cd0..537ae7af8 100644 --- a/docs/quickstart/02-setting_options.jmd +++ b/docs/quickstart/02-setting_options.jmd @@ -24,7 +24,7 @@ this is the path endpoint on your server that will handle upload requests. More information on the [`request` option here](../api/options.html). ```javascript -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ request: { endpoint: '/uploads' } @@ -37,7 +37,7 @@ Debug mode is used to begin diagnosing any application errors. Debug mode can be enabled in the options of Fine Uploader: ```javascript -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ debug: true, request: { endpoint: '/uploads' @@ -57,7 +57,7 @@ Networks can be unreliable, and if your upload fails, Fine Uploader offers the ability to retry. The `retry` option can be set to enable this: ```javascript -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ request: { endpoint: '/uploads' }, @@ -82,7 +82,7 @@ options. You can also send a delete request via the `deleteFile` [API method](../api/methods.html). ```javascript -$("#fine-uploader").fineUploader({ +var uploader = new qq.FineUploader({ request: { endpoint: '/uploads' }, @@ -110,30 +110,8 @@ Now our Fine Uploader page should look something like this:
- - - - - - - + + + ``` diff --git a/docs/quickstart/enabling_fineuploader.jmd b/docs/quickstart/enabling_fineuploader.jmd deleted file mode 100644 index b770862d6..000000000 --- a/docs/quickstart/enabling_fineuploader.jmd +++ /dev/null @@ -1,50 +0,0 @@ -{% extends "_templates/base.html" %} -{% block content %} -{% markdown %} -### Enabling Fine Uploader - -Fine Uploader does NOT depend on jQuery, and you don't have to use the jQuery plug-in if you don't want to.The same features are available without the jQuery plug-in. To use Fine Uploader with "plain 'ole" Javascript, include the uploader Javascript file and, optionally, the css file along with any images provided into your page. If you are only making use of FineUploaderBasic, you can omit the css and image(s) file(s). - - html -
- -
- -#### without jQuery ... - -Initialize uploader when the DOM is ready. Change the endpoint option. -In the server folder you will find some examples for different platforms. -If you can't find the one you need, please read up on handling multipart form -requests and XHR upload requests in your server-side language of choice. - - javascript - var uploader = new qq.FineUploader({ - // pass the dom node (ex. $(selector)[0] for jQuery users) - element: document.getElementById('fine-uploader'), - - request: { - // path to server-side upload script - endpoint: '/server/upload' - } - }); - -#### with jQuery … -A jQuery plug-in exists that wraps the native Fine Uploader code. If you would like to reap all of the benefits that -a jQuery plug-in offers, such as use of jQuery Events, specifying elements using the jQuery object/jQuery selectors, -easy integration into your otherwise jQuery project: look no further! - -To use the jQuery plug-in, ensure you include the proper Fine Uploader js file on your page, and instantiate it like so: - - javascript - $('#fineUploaderElementId').fineUploader({ - request: { - endpoint: '/upload/endpoint' - } - }); - -[Next](setting_up_server.html), you'll learn to set up a simple server to handle uploads. -{% endmarkdown %} -{% endblock %} diff --git a/docs/quickstart/html5_features.jmd b/docs/quickstart/html5_features.jmd deleted file mode 100644 index ae637a365..000000000 --- a/docs/quickstart/html5_features.jmd +++ /dev/null @@ -1,35 +0,0 @@ -{% extends "_templates/base.html" %} -{% block content %} -{% markdown %} -# TODO: Breakdown for traditional and S3 uploading modes. - -### HTML5 Feature Support - -At this point, you should have a fully functional Fine Uploader instance and a working Node.js server for saving files to your local machine - -Fine Uploader contains first-class support for the latest HTML5 features including drag and drop, uploading via paste, upload chunking, and more. Of course, Fine Uploader will fall back to sane defaults (no Flash, Silverlight, or Java applets to worry about) which will work in any major browser. - -All the HTML5 features can be configured via the options object that is passed into the initial Fine Uploader instance. - -#### File Chunking -File chunking is a feature made possible by the HTML5 File API. Chunking is required for the auto-retry and -auto-resume features. Not much has to be changed in Fine Uploader to handle chunking, simply set the options: - - chunking: { - enabled: true - } - -And you should be good to go. - -#### Drag and Drop - -Drag and drop is enabled by default in browsers that support it. - -#### Paste - -Pasting is enabled by default in supported browsers as well. - - -Now that Fine Uploader is working with the most bleeding-edge web features, let's turn on the style. See the [Styling Fine Uploader](styling.html) section next. -{% endmarkdown %} -{% endblock %}