What is the general approach for resuming previously interrupted uploads with fine-uploader after the browser has been closed? I've searched the docs and played with the code, but am not having any success.
I envisioned re-populating the uploader with resumable files along with "Resume" and "Cancel" buttons (like a PAUSED upload). I thought I could use getResumableFilesData() and addInitialFiles(), but the status defaults to COMPLETED. If I'm supposed to use addFiles(), then what is the best way to construct the input values? Or, am I on the wrong path entirely?
Please forgive me if I'm missing something obvious. I am looking for helpful nudge in the right direction.
Thanks in advance!
Here is my fine-uploader template:
<script type="text/template" id="qq-template">
<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">
<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container progress total_progress">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
class="qq-total-progress-bar-selector progress-bar"></div>
</div>
<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
<span class="qq-upload-drop-area-text-selector"></span>
</div>
<div class="qq-upload-button-selector btn btn-default">
<div><span class="glyphicon glyphicon-plus"></span> Browse
Files</div>
</div>
<br><br>
<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" aria-live="polite" aria-relevant="additions removals">
<li>
<div class="qq-progress-bar-container-selector progress">
<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>
<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
<span class="qq-upload-size-selector qq-upload-size"></span>
<button type="button" class="btn btn-default btn-sm qq-upload-cancel-selector">Cancel</button>
<button type="button" class="btn btn-default btn-sm qq-upload-retry-selector">Retry</button>
<button type="button" class="btn btn-default btn-sm qq-upload-delete-selector qq-upload-delete">Delete</button>
<button type="button" class="btn btn-default btn-sm qq-upload-pause-selector">Pause</button>
<button type="button" class="btn btn-default btn-sm qq-upload-continue-selector">Continue</button>
<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
</li>
</ul>
<dialog class="qq-alert-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Close</button>
</div>
</dialog>
<dialog class="qq-confirm-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">No</button>
<button type="button" class="qq-ok-button-selector">Yes</button>
</div>
</dialog>
<dialog class="qq-prompt-dialog-selector">
<div class="qq-dialog-message-selector"></div>
<input type="text">
<div class="qq-dialog-buttons">
<button type="button" class="qq-cancel-button-selector">Cancel</button>
<button type="button" class="qq-ok-button-selector">Ok</button>
</div>
</dialog>
</div>
</script>
Here is my fine-loader configuration.
var uploader = $('#fine-uploader').fineUploader({
template: 'qq-template',
debug: true,
callbacks: {
onAllComplete: function(succeeded, failed) {
$('#doclib_tree').jstree(true).refresh()
if (failed.length > 0) {
alert("Error: Some files were not uploaded");
} else {
if (succeeded.length > 0 ) {
alert("Successfully uploaded " + succeeded.length + " file(s)");
}
this.reset();
toggle_upload();
}
},
onError: function(id, name, errorReason, xhrOrXdr) {
alert("Error uploading " + name + ". Reason: " + errorReason)
},
onSubmit: function(id, name) {
var promise = new qq.Promise();
var dest = document.getElementById('dest_label').innerHTML.replace(/ > /g, "/")
$.ajax({
'type': 'POST',
'async': false,
'url': "/documents/exists" ,
'data': {
'parents' : get_path(dest),
'name': name,
},
'success': function(data, textStatus, jqHXR) {
if ( check_session(data) ) {
promise.failure();
} else {
if (confirm("The file '" + dest + "/" + name + "' already exists. Replace?"))
promise.success();
else
promise.failure();
}
},
'error': function(jqHXR, textStatus, errorThrown) {
promise.success();
}
});
return promise;
},
},
chunking: {
enabled: true,
partSize: 20000000, // 20MB
success: {
endpoint: "/documents/upload?success=1",
}
},
resume: {
enabled: true
},
request: {
endpoint: "/documents/upload",
},
autoUpload: true
});
Here is the bit of code where I would like to retrieve and display resumable files upon initialization. I do indeed get a populated resumes array.
var resumes = uploader.fineUploader('getResumableFilesData')
if ( resumes > 0 ) {
// Should I be doing something different here?
uploader.fineUploader('addFiles', resumes)
}
Fine Uploader stores information about the progress of interrupted files in the browser's local storage. If the same file is added to the uploader again in a subsequent browser/upload session, Fine Uploader will begin uploading that file starting with the last failed/interrupted chunk.
If you want to prompt your user to re-add interrupted files, you can certainly do so. getResumableFilesData() will tell you about interrupted files that can be resumed, provided the user re-submits those files to the uploader via DnD or a file input element (or the addFiles API method).