Skip to content

Commit cec2deb

Browse files
rnicholusrnicholus
committed
docs(jQuery): Remove most jQuery syntax examples from the docs
...in favor of vanilla JS and Fine Uploader's helper functions. FineUploader#1310
1 parent 37584e5 commit cec2deb

17 files changed

+169
-401
lines changed

‎docs/api/events-s3.jmd

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,7 @@ in Fine Uploader S3, unless otherwise noted here.
2020

2121
### Syntax
2222

23-
There is a significant difference in the way events are defined between the jQuery and non-jQuery uploaders.
24-
25-
When using the non-jQuery version, events are defined as functions in the `callbacks` option object.
26-
27-
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.
28-
29-
See the [Integrating jQuery](../integrating/jquery) page for code examples and more details.
30-
31-
#### non-jQuery
32-
33-
When using the non-jQuery uploader, the following syntax is the correct way to define event handlers;
23+
The following syntax is the correct way to define event handlers:
3424

3525
```
3626
callbacks: {
@@ -43,18 +33,6 @@ callbacks: {
4333
}
4434
```
4535

46-
#### jQuery
47-
48-
The syntax below is only acceptable when using the jQuery plugin for the uploader:
49-
50-
```
51-
$("#my_uploader").on("deleteComplete", function(event, id, xhr, isError) {
52-
//...
53-
}).on("delete", function(event, id) {
54-
// ...
55-
});
56-
```
57-
5836
#### credentialsExpired
5937

6038
Called before a request is sent to S3 if the temporary credentials have expired. You must return

‎docs/api/events.jmd

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -32,17 +32,7 @@ Fine Uploader.
3232

3333
### Syntax
3434

35-
There is a significant difference in the way events are defined between the jQuery and non-jQuery uploaders.
36-
37-
When using the non-jQuery version, events are defined as functions in the `callbacks` option object.
38-
39-
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.
40-
41-
See the [Integrating jQuery](../integrating/jquery.html) page for code examples and more details.
42-
43-
#### non-jQuery
44-
45-
When using the non-jQuery uploader, the following syntax is the correct way to define event handlers:
35+
The following syntax is the correct way to define event handlers:
4636

4737
```
4838
callbacks: {
@@ -55,18 +45,6 @@ callbacks: {
5545
}
5646
```
5747

58-
#### jQuery
59-
60-
The syntax below is only acceptable when using the jQuery plugin for the uploader:
61-
62-
```
63-
$("#my_uploader").on("deleteComplete", function(event, id, xhr, isError) {
64-
//...
65-
}).on("delete", function(event, id) {
66-
// ...
67-
});
68-
```
69-
7048
{% endmarkdown %}
7149
<div class="events-all">
7250

‎docs/features/concurrent-chunking.jmd

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@ send a POST after all chunks have been successfully uploaded for each file.
8888

8989
For example:
9090
```javascript
91-
$("myUploader").fineUploader({
91+
var uploader = new qq.FineUploader({
92+
element: document.getElementById("myUploader"),
9293
request: {
9394
endpoint: "/upload/receiver"
9495
},

‎docs/features/drag-and-drop.jmd

Lines changed: 1 addition & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -137,9 +137,7 @@ api_event("dropLog", "dropLog",
137137

138138
{% markdown %}
139139

140-
## No-Dependency Example
141-
142-
If you are not utilizing jQuery, you can use the plain javascript DnD module. Here is a simple example:
140+
## Simple Example
143141

144142
```javascript
145143
var dragAndDropModule = new qq.DragAndDrop({
@@ -166,42 +164,6 @@ var dragAndDropModule = new qq.DragAndDrop({
166164
});
167165
```
168166

169-
## jQuery Example
170-
171-
For jQuery users, a jQuery-wrapped DnD module is also available in the combined and minified Fine Uplpoader javascript file.
172-
This jQuery wrapper follows the same conventions as the jQuery plug-in that wraps the uploader library. To read more
173-
about these conventions, please see the [Using jQuery plug-in]({{ URL_ROOT }}/integrating/modes/using-jquery-plugin.html) readme document.
174-
175-
There are a couple things to be aware of when using the DnD standalone module via the jQuery plug-in wrapper:
176-
* 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.
177-
* The target of your plug-in instance takes the place of the `dropZoneElements` option. Do not pass a `dropZoneElements` option, it will be ignored.
178-
179-
Here is the above example rewritten using the jQuery plug-in wrappers:
180-
181-
```javascript
182-
$('#myDropZone').fineUploaderDnd({
183-
classes: {
184-
dropActive: "cssClassToAddToDropZoneOnEnter"
185-
}
186-
})
187-
.on('processingDroppedFiles', function(event) {
188-
//TODO: display some sort of a "processing" or spinner graphic
189-
})
190-
.on('processingDroppedFilesComplete', function(event, files, dropTarget) {
191-
//TODO: hide spinner/processing graphic
192-
193-
$('#fineUploaderBasicContainer').fineUploader('addFiles', files); //this submits the dropped files to Fine Uploader
194-
});
195-
196-
$('#fineUploaderBasicContainer').fineUploader({
197-
request: {
198-
endpoint: "server/uploadHandler"
199-
}
200-
});
201-
```
202-
203-
{{ alert("jQuery 1.7+ is required to use the `on` function.") }}
204-
205167
[For more information, see the associated blog post](http://blog.fineuploader.com/2013/04/05/standalone-file-drag-drop-module-in-3-5/)
206168

207169
{% endmarkdown %}

‎docs/features/extra-buttons.jmd

Lines changed: 29 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,7 @@ The new [`extraButtons` option](../api/options.html#extrabuttons-option) allows
1717
at styled containers that you would like to use as upload buttons. This option takes an array of objects, and
1818
each object must, at least, define an `element` property with a value of your styled upload button container.
1919
Fine Uploader will then attach a file input element to this container and track it just as it tracks the default
20-
upload button it creates. You can specify an `HTMLElement`, or even a `jQuery` object (if you are using the
21-
Fine Uploader jQuery plugin) as the value for the `element` property.
20+
upload button it creates. You can specify an `HTMLElement` as the value for the `element` property.
2221

2322
By default, each extra button will inherit the root `multiple` and `validation` option values from the root option
2423
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
3332
```
3433

3534
```javascript
36-
$("#uploader").fineUploader({
35+
var uploader = new qq.FineUploader({
36+
element: document.getElementById("myUploader"),
3737
validation: {
3838
allowedExtensions: ["jpeg", "jpg"],
3939
sizeLimit: 5000000 // 5 MiB
4040
}
4141
extraButtons: [
4242
{
43-
element: $("#pdfButton"),
43+
element: document.getElementById("pdfButton"),
4444
validation: {
4545
allowedExtensions: ["pdf"]
4646
}
@@ -62,8 +62,7 @@ Suppose you want to apply custom validation rules to a specific button. No prob
6262
`validateBatch` events contain a `button` as the last parameter passed to your handler. This `button` parameter
6363
will be the container element for the button that was used to select/submit the associated file to the uploader.
6464
If a drop zone was used to submit the file, or if an input element or source outside of Fine Uploader was used
65-
to submit the file (such as via the `addFiles` method), the `button` parameter will be undefined. Note that, if
66-
you are using the jQuery plug-in, the `button` parameter will be a jQuery object.
65+
to submit the file (such as via the `addFiles` method), the `button` parameter will be undefined.
6766

6867

6968
## 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
7372
on the button that selected it, you can do so in an appropriate event handler, such as `upload`. For example:
7473

7574
```javascript
76-
$("#uploader").on("upload", function(event, id, name) {
77-
var $button = $(this).fineUploader("getButton", id);
75+
var uploader = new qq.FineUploader({
76+
/* other required config options left out for brevity */
7877

79-
if ($("#pdfButton").is($button)) {
80-
$(this).fineUploader("setParams", {type: "pdf"}, id);
81-
}
82-
else {
83-
$(this).fineUploader("setParams", {type: "jpeg"}, id);
78+
callbacks: {
79+
onUpload: function(id, name) {
80+
var button = this.getButton(id);
81+
82+
if (button.id === "pdfButton") {
83+
this.setParams({type: "pdf"}, id);
84+
}
85+
else {
86+
this.setParams({type: "jpeg"}, id);
87+
}
88+
}
8489
}
8590
});
8691
```
@@ -102,13 +107,15 @@ also assuming you only want this button to appear if folder selection is possibl
102107
```javascript
103108
// only show the folders button if folder selection is possible in the current browser
104109
if (!qq.supportedFeatures.folderSelection) {
105-
$("#foldersButton").hide();
110+
document.getElementById("foldersButton").style.display = "none";
106111
}
107112

108-
$("#uploader").fineUploader({
113+
var uploader = new qq.FineUploader({
114+
/* other required config options left out for brevity */
115+
109116
extraButtons: [
110117
{
111-
element: $("#foldersButton"),
118+
element: document.getElementById("foldersButton"),
112119
folders: true
113120
}
114121
]
@@ -132,17 +139,19 @@ blog, now using the extra buttons feature:
132139
```javascript
133140
// only show this button in iOS
134141
if (!qq.ios()) {
135-
$("#cameraButtonContainer").hide();
142+
document.getElementById("cameraButtonContainer").style.display = "none";
136143
}
137144

138-
$("myFineUploader").fineUploader({
145+
var uploader = new qq.FineUploader({
146+
/* other required config options left out for brevity */
147+
139148
camera: {
140149
ios: true,
141-
button: ${"#cameraButtonContainer")
150+
button: document.getElementById("cameraButtonContainer")
142151
}
143152
extraButtons: [
144153
{
145-
element: $("#cameraButtonContainer")
154+
element: document.getElementById("cameraButtonContainer")
146155
}
147156
]
148157
});

‎docs/features/handling-errors.jmd

Lines changed: 17 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -37,15 +37,17 @@ The following code snippet shows how one might display a custom alert on the
3737
event of an error.
3838

3939
```javascript
40-
$("#fine-uploader").fineUploader({
41-
// ...
42-
}).on('error', function (event, id, name, errorReason, xhrOrXdr) {
43-
alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
40+
var uploader = new qq.FineUploader({
41+
/* other required config options left out for brevity */
42+
43+
callbacks: {
44+
onError: function(id, name, errorReason, xhrOrXdr) {
45+
alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
46+
}
47+
}
4448
});
4549
```
4650

47-
{{ alert("jQuery 1.7+ is required to use the `on` function.") }}
48-
4951
## The `error` Response Property
5052

5153
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
5759
`defaultResponseError` property will be used as the error message.
5860

5961
```javascript
60-
$("#fine-uploader").fineUploader({
62+
var uploader = new qq.FineUploader({
63+
/* other required config options left out for brevity */
64+
6165
text: {
6266
defaultResponseError: 'An unknown upload error occurred.'
6367
}
@@ -70,7 +74,9 @@ The `messages` property in the main Fine Upload options object provides a
7074
handful of properties one can override to display custom error messages.
7175

7276
```javascript
73-
$("#fine-uploader").fineUploader({
77+
var uploader = new qq.FineUploader({
78+
/* other required config options left out for brevity */
79+
7480
messages: {
7581
typeError: '{file} has an invalid extension. Valid extension(s): {extensions}.'
7682
// other messages can go here as well ...
@@ -99,12 +105,13 @@ The `failedUploadTextDisplay` option defines properties used for displaying
99105
text when an upload fails.
100106

101107
```javascript
102-
$("#fine-uploader").fineUploader({
108+
var uploader = new qq.FineUploader({
109+
/* other required config options left out for brevity */
110+
103111
// These are all the DEFAULT values...
104112
failedUploadTextDisplay: {
105113
mode: 'default',
106114
responseProperty: 'error',
107-
enableTooltip: true
108115
}
109116
});
110117
```

‎docs/features/retry.jmd

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,19 @@
1111
Fine Uploader will automatically attempt to retry an upload if the `enableAuto` option is set to `true`:
1212

1313
```javascript
14-
$("#fine-uploader").fineUploader({
15-
// ..
14+
var uploader = new qq.FineUploader({
15+
/* other required config options left out for brevity */
16+
1617
retry: {
1718
enableAuto: true
19+
},
20+
callbacks: {
21+
onRetry: function(id, name, attemptNumber) {
22+
...
23+
}
1824
}
19-
}).on('autoRetry', function (event, id, name, attemptNumber) {
20-
2125
});
2226
```
2327

24-
{{ alert("jQuery 1.7+ is required to use the `on` function.") }}
25-
26-
2728
{% endmarkdown %}
2829
{% endblock %}

‎docs/features/styling.jmd

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -169,14 +169,21 @@ To do this, the file list portion of the template can be modified to include thi
169169
Your `complete` event handler would look something like this:
170170

171171
```javascript
172-
$("#myUploader").on("complete", function(event, id, name, response) {
173-
var serverPathToFile = response.filePath,
174-
$fileItem = $(this).fineUploader("getItemByFileId", id);
175-
176-
if (response.success) {
177-
$fileItem.find(".view-btn")
178-
.attr("href", serverPathToFile)
179-
.removeClass("hide");
172+
var uploader = new qq.FineUploader({
173+
/* other required config options left out for brevity */
174+
175+
callbacks: {
176+
onComplete: function(id, name, response) {
177+
var serverPathToFile = response.filePath,
178+
fileItem = this.getItemByFileId(id);
179+
180+
if (response.success) {
181+
var viewBtn = qq(fileItem).getByClass("view-btn")[0];
182+
183+
viewBtn.setAttribute("href", serverPathToFile);
184+
qq(viewBtn).removeClass("hide");
185+
}
186+
}
180187
}
181188
});
182189
```

0 commit comments

Comments
 (0)