Skip to content
This repository has been archived by the owner on May 25, 2023. It is now read-only.

Commit

Permalink
Replace deprecated Deferred.pipe() with .then()
Browse files Browse the repository at this point in the history
  • Loading branch information
@mattiasw
mattiasw committed Apr 5, 2016
1 parent 098b507 commit 7489eb1
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 8 deletions.
4 changes: 2 additions & 2 deletions js/jquery.fileupload-process.js
View file
Expand Up @@ -84,7 +84,7 @@
settings
);
};
chain = chain.pipe(func, settings.always && func);
chain = chain.then(func, settings.always && func);
});
chain
.done(function () {
Expand Down Expand Up @@ -151,7 +151,7 @@
};
opts.index = index;
that._processing += 1;
that._processingQueue = that._processingQueue.pipe(func, func)
that._processingQueue = that._processingQueue.then(func, func)
.always(function () {
that._processing -= 1;
if (that._processing === 0) {
Expand Down
12 changes: 6 additions & 6 deletions js/jquery.fileupload.js
View file
Expand Up @@ -652,15 +652,15 @@
data.process = function (resolveFunc, rejectFunc) {
if (resolveFunc || rejectFunc) {
data._processQueue = this._processQueue =
(this._processQueue || getPromise([this])).pipe(
(this._processQueue || getPromise([this])).then(
function () {
if (data.errorThrown) {
return $.Deferred()
.rejectWith(that, [data]).promise();
}
return getPromise(arguments);
}
).pipe(resolveFunc, rejectFunc);
).then(resolveFunc, rejectFunc);
}
return this._processQueue || getPromise([this]);
};
Expand Down Expand Up @@ -945,9 +945,9 @@
if (this.options.limitConcurrentUploads > 1) {
slot = $.Deferred();
this._slots.push(slot);
pipe = slot.pipe(send);
pipe = slot.then(send);
} else {
this._sequence = this._sequence.pipe(send, send);
this._sequence = this._sequence.then(send, send);
pipe = this._sequence;
}
// Return the piped Promise object, enhanced with an abort method,
Expand Down Expand Up @@ -1139,7 +1139,7 @@
$.map(entries, function (entry) {
return that._handleFileTreeEntry(entry, path);
})
).pipe(function () {
).then(function () {
return Array.prototype.concat.apply(
[],
arguments
Expand Down Expand Up @@ -1208,7 +1208,7 @@
return $.when.apply(
$,
$.map(fileInput, this._getSingleFileInputFiles)
).pipe(function () {
).then(function () {
return Array.prototype.concat.apply(
[],
arguments
Expand Down

5 comments on commit 7489eb1

@heldchen
Copy link

@heldchen heldchen commented on 7489eb1 Jan 16, 2017 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this broke the file-validation when jquery.fileupload-ui.js together with tmpl.js templates are used. the fileupload-ui's add function is now called before validate, and thus any template-conditions that check for file errors will not match. when validate is finally called, the template has already been rendered and the expected error is not shown.

simple example to reproduce:

  1. set acceptFileTypes: /\.png$/i,
  2. use template
<script id="test_upload" type="text/x-tmpl">
{% for (var i=0, file; file=o.files[i]; i++) { %}
    <h2>{%=file.name%}</h2>
    {% if (file.error) { %} <pclass="error">Error: {%=file.error%}</p> {% } %}
    {% if (!file.error) { %} <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar progress-bar" style="width:0%;"></div></div> {% } %}
{% } %}
</script>
  1. upload dummy.txt file

unfortunately I have not found a solution for this regression - my current workaround is to replace then back to pipe which is obviously not a long-term fix.

@blueimp
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@heldchen
The demo also makes use of client-side file validation and the tmpl.js rendering library and the validation works as expected.
Can you reproduce your reported issue with the demo?

@heldchen
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@blueimp yeah, if you modify the upload template to actually use {% if (file.error) { %} - in our case, we are only showing the progress bar if there was no validation error. if you change the template code in your demo accordingly, you can reproduce the problem:


{% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-upload fade">
        <td>
            <span class="preview"></span>
        </td>
        <td>
            <p class="name">{%=file.name%}</p>
            <strong class="error text-danger"></strong>
        </td>
        <td>
          {% if (!file.error) { %}
            <p class="size">Processing...</p>
            <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="progress-bar progress-bar-success" style="width:0%;"></div></div>
          {% } %}
        </td>
        <td>
            {% if (!i && !o.options.autoUpload) { %}
                <button class="btn btn-primary start" disabled>
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start</span>
                </button>
            {% } %}
            {% if (!i) { %}
                <button class="btn btn-warning cancel">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel</span>
                </button>
            {% } %}
        </td>
    </tr>
{% } %}

the progress bar now should only be shown when the validation succeeded. try to upload a 10mb file now -error message and progress bar is show, because the template-if is evaluated before the validate function was executed.

@ktruehl
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

In order to get the file upload working for us I had to replace then with pipe. If you do that there is another problem with the order of execution. The validate method will only be executed after the media methods (loadImageMetaData, loadImage, resizeImage, etc.) have been executed. So, if you want a file upload that does not accept images, the template will be executed before the validate method is called. So the user will never see the message "File type not allowed". Instead the progress bar (or whatever is defined in the template) is shown and nothing happens.

The reason for this is straight forward. It has to do with the fact that the methods are not added to the processQueue array in the right order. The validate method is added with a push, the media methods are added with unshift.

@blueimp
Copy link
Owner

@blueimp blueimp commented on 7489eb1 Feb 2, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@heldchen
The upload template has been rendered before the processing callbacks (which includes validation) for more than 3 years now (to allow canceling the processing queue via the user interface): cc70588

The UI library therefore updates the rendered rows again after processing (see e.g. here).
Of course this is only a sample implementation and you can implement a different rendering logic.

@ktruehl
Actually, the order of processing methods is exactly as it should be:

  • resizeImage has to be executed before validation, as it changes the file size and potentially the image type, which are both metrics for validation.
  • loadImage has to be executed before resizing, as resizing requires the loaded image data.
  • loadImageMetaData has to be executed before resizing, as resizing also allows re-orientation, which usually makes use of EXIF orientation data.

Please sign in to comment.