I have a Kendo file upload call, here is the function:
$("#fileUpload").kendoUpload({
async: {
saveUrl: "/people",
autoUpload: true
},
multiple: false,
complete: onComplete
});
function onComplete(e) {
// The upload is now idle
dataSourcePerson.read();
}
This calls the play routes file which triggers this method in my controller:
public static Result create() {
// Do some stuff
return ok("Successfully loaded new users");
}
My problem is that the upload box shows failure and a retry option even though the upload was a success. What should my create() method return?
I figured it out, I needed to respond with:
return ok("{\"status\":0}");
Related
I would like to pause fineuploader if the document dropped is a pdf to give the end user some options before continuing. I cannot figure out how to get the pause to trigger. I am getting [Fine Uploader 5.3.2] Ignoring pause for file ID 0 (DEVELOPMENT.PDF). Not in progress.
My code below.
var uploader = new qq.s3.FineUploader({
debug: true,
element: document.getElementById('fine-uploader'),
request: {
endpoint: 'bucketname.s3.amazonaws.com',
accessKey: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' //zone-user key id
},
signature: {
endpoint: "/assets/plugins/fine-uploader/signature/endpoint.php"
},
debug:true,
cors: {expected: true},
chunking: {enabled: true},
resume: {enabled: true},
deleteFile:{enabled:false},
validation: {
itemLimit: 5,
sizeLimit: 15000000
},
uploadSuccess:{
//endpoint:"/assets/plugins/fine-uploader/signature/endpoint.php?success"
},
callbacks: {
onSubmitted: function(id, name) {
var fileName = name;
var fileExtension = fileName.substring(fileName.lastIndexOf('.') + 1).toUpperCase();
if(fileExtension==='PDF'){
alert('it IS pdf... now what?');
jQuery('#confirmPDFHandler').modal();
uploader.pauseUpload(id); //not pausing here
}else{
alert('its not a pdf... go!');
uploader.continueUpload(id);
}
},
onError: function(id, name, errorReason, xhrOrXdr) {
//alert(qq.format("Error on file number {} - {}. Reason: {}", id, name, errorReason));
},
onUpload: function(id, name, isError,responseJSON) {
var obj = JSON.stringify(responseJSON);
//alert(name + 'is in progress');
},
onComplete: function(id,fileId,responseJSON){
var newfilename=uploader.getKey(id);
}
},
retry: {enableAuto: false}
});
If the user drops a pdf in the uploader, we will give them an option to simply upload (continue as usual) or split the file (pause or stop the upload and run our separate custom code to begin the pdf split option pulling one document into multiple documents then passing those to an uploader)
Sounds like you want to potentially cancel the upload, or proceed. In that case, you should ask the user for input inside of an onSubmit or onValidate event handler. Your handler should return a Promise and either resolve the promise to allow the file to go through, or reject it to cancel the file submission. For example:
onSubmit: function(id) {
return new Promise(function(resolve, reject) {
// popup modal
// when user responds...
// ...call resolve() if they want to upload the file
// ...or reject() if they want to cancel the file
});
}
Fine Uploader has a very small "promise" implementation bundled with the library. It's non-standard, so you may be better off finding a standard A+ implementation instead.
I'm having an issue similar to the issues reported both here and here, with a only a few changes in how my form data is loaded.
The solution provided in the second link seemingly resolves my issue, but removing the show/hide scaling effects should not be required in order for CKEditor to instantiate properly. There's bound to be a much better alternative to resolving this conflict.
My issue:
When I open my page, and click the edit button, a jQueryUI Dialog pops up, loads its data via ajax, and then I attempt to replace the textarea added to the dialog with a CKEditor instance. The first time I load the page, the dialog works without a hitch. I'm able to modify the data within the editor, save my form data, and get on with life. However, if I close the dialog, then open it again, the editor is no longer enabled. The buttons still have hover effects, and are clickable, but do nothing. The text area of the editor is disabled and set to "style: visibility: hidden; display: none;". Nearly all the information I can find regarding this issue is from many years ago, and the fixes involve using functions/techniques that no longer exist or are applicable.
Control Flow
I open the page containing a text link 'Edit Update', which calls my Javascript function openEditTicketUpdateDialog.
function openEditTicketUpdateDialog(tup_id, url)
{
simplePost(null, url, new Callback
(
function onSuccess(data)
{
$('#editticketupdatedialog').dialog('option', 'buttons',
[
{
text: 'Save Edits',
click: function()
{
// Save the Update info
var formData = {
tup_update: CKEDITOR.instances.tup_update_edit.getData(),
tup_internal: +$('#tup_internal_edit').is(":checked"),
tup_important: +$('#tup_important_edit').is(":checked")
};
simplePost(formData, data['submitRoute'], new Callback
(
function onSuccess(data)
{
$('#update-' + tup_id).html(data.input['tup_update']);
$('#updateflags-' + tup_id).html(data.flags);
$('#editticketupdatedialog').dialog('close');
},
function onFail(errors)
{
console.log(errors);
}
));
}
},
{
text: 'Cancel',
click: function()
{
$(this).dialog("close");
}
}
]);
$('#editticketupdatedialog').dialog('option', 'title', data['title']);
$('#editticketupdatedialog').html(data['view']);
$('#editticketupdatedialog').dialog('open');
destroyEditor('tup_update_edit');
console.log('CKEDITOR.status: ' + CKEDITOR.status);
createEditor('tup_update_edit');
},
function onFail(errors)
{
console.log(errors);
}
));
}
This function uses three helper functions, simplePost, destroyEditor and createEditor.
function simplePost(data, url, callback)
{
post(data, url, true, false, callback);
}
function createEditor(name)
{
console.log('Create editor: ' + name);
console.log('Current Instance: ');
console.log(CKEDITOR.instances.name);
if (CKEDITOR.status == 'loaded')
{
CKEDITOR.replace(name,
{
customConfig: '/js/ckeditor/custom/configurations/standard_config.js'
});
}
else
{
CKEDITOR.on('load', createEditor(name));
CKEDITOR.loadFullCore && CKEDITOR.loadFullCore();
}
console.log('After instance created: ');
var instance = CKEDITOR.instances.name;
console.log(instance);
}
function destroyEditor(name)
{
console.log('Destroy editor: ' + name);
console.log('Current Instance: ');
console.log(CKEDITOR.instances.name);
if (CKEDITOR.instances.name)
{
console.log('Instance exists - destroying...');
CKEDITOR.instances.name.destroy();
$('#' + name).off().remove();
}
console.log('After instance removed: ');
var instance = CKEDITOR.instances.name;
console.log(instance);
}
This method of creating a CKEditor instance was gathered from here. This method of destroying a CKEditor instance was gathered from here.
As you can see, openEditTicketUpdateDialog fires an AJAX call to my getEditUpdateForm function through Laravel routes.
public function getEditUpdateForm($tup_id, $update_number)
{
$update = Update::find($tup_id);
$data = [
'title' => 'Editing update #' . $update_number . ' of ticket #' . $update->tup_ticket,
'view' => View::make('tickets.ticketupdate-edit')
->with('update', $update)
->render(),
'submitRoute' => route('tickets/update/submit', $tup_id)
];
return Response::json(array('status' => 1, 'data' => $data));
}
From here, a status of 1 is returned, and the onSuccess function is called. I've attempted to add the create/delete calls before the $('#editticketupdatedialog').dialog('open'); call, but to no avail. I've also tried multiple other solutions that I've found surfacing, which involve hacked implementations of jQueryUI's Dialog functions and attributes: _allowInteraction and moveToTop. I was originally successful in resolving this issue the first time it arose by calling this function before doing a CKEDITOR.replace:
function enableCKEditorInDialog()
{
$.widget( "ui.dialog", $.ui.dialog, {
/**
* jQuery UI v1.11+ fix to accommodate CKEditor (and other iframed content) inside a dialog
* #see http://bugs.jqueryui.com/ticket/9087
* #see http://dev.ckeditor.com/ticket/10269
*/
_allowInteraction: function( event ) {
return this._super( event ) ||
// addresses general interaction issues with iframes inside a dialog
event.target.ownerDocument !== this.document[ 0 ] ||
// addresses interaction issues with CKEditor's dialog windows and iframe-based dropdowns in IE
!!$( event.target ).closest( ".cke_dialog, .cke_dialog_background_cover, .cke" ).length;
}
});
}
After updating to Laravel 5, and making a few other changes serverside, this fix no longer works. I have been successful in resolving my issue by removing the show/hide properties from my dialog. I would very much prefer not to have to remove these properties, as half the reasoning for having the dialog is the aesthetics of an animation. Here is my dialog initialization.
$('#editticketupdatedialog').dialog({
modal: true,
draggable: false,
minWidth: 722,
autoOpen: false,
show:
{
effect: "scale",
duration: 200
},
hide:
{
effect: "scale",
duration: 200
},
closeOnEscape: true
});
When I have these animations enabled, the first time I use the dialog, it works perfectly. The second time, I receive the error TypeError: this.getWindow(...).$ is undefined - ckeditor.js:83:18 in the JS console, which refers to this line:
function(a)
{
var d = this.getWindow().$.getComputedStyle(this.$,null);
return d ? d.getPropertyValue(a) : ""
}
Recap
My main goal here is to find a fix for this issue, without having to remove the jQueryUI Dialog animation. I am unsure whom to point fingers at, as I really can't determine if the issue lies in CKEditor, jQueryUI or my implementation.
I finally found a solution that works in my case. losnir updated the outdated solution to a post here, and adding the open function to my dialog initialization resolved my issue.
My initialization is as follows:
$('#editticketupdatedialog').dialog({
modal: true,
draggable: false,
minWidth: 722,
autoOpen: false,
show:
{
effect: "scale",
duration: 200
},
hide:
{
effect: "scale",
duration: 200
},
closeOnEscape: true,
open: function()
{
$(this).parent().promise().done(function ()
{
destroyEditor('tup_update_edit');
console.log('CKEDITOR.status: ' + CKEDITOR.status);
createEditor('tup_update_edit');
});
}
});
How can I implement the onDeleteComplete, do I put inside the deletefile: request or outside?
I've used the complete method before and I tried to implement the onDeleteComplete the same way but I get no actions. Below is the code I've tried to use but it fails.
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: '/Test.aspx'
},
deleteFile: {
enabled: true,
endpoint: '/Test.aspx'
}
}).on('onDeleteComplete', function (id, xhr, isError) {
alert('hi');
})
So I finally got it working with your suggestion.
Here my final code
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: '/Test.aspx'
},
deleteFile: {
enabled: true,
endpoint: '/Test.aspx'
}
}).on('deleteComplete', function (event, id, name, responseJSON) {
alert('hi');
});
Use of callbacks when using the jQuery plug-in is well documented in both the examples/demos on fineuploader.com and in the documentation. There are two distinct places in the documentation where us of callbacks are mentioned: the callbacks readme page and in the callbacks section of the using the jQuery plugin readme page.
The "on" in "onDeleteComplete" in your code is redundant, it should be changed to .on("deleteComplete", ...). Also, the first parameter passed to all event handlers by jQuery is "event".
Please read the documentation, starting with the first page at http://docs.fineuploader.com/. Read the introductory info, then follow the path outlined based on your use case.
How about now?
$('#jquery-wrapped-fine-uploader').fineUploader({
request: {
endpoint: '/Test.aspx'
},
deleteFile: {
enabled: true,
endpoint: '/Test.aspx'
}
}).on('deleteComplete', function (id, xhr, isError) {
alert('hi');
});
I am using jqgrid and ajaxFileUpload.js script in order to pass parameters and files to a php script. The structure of the code is like this:
...
url:url_1.php,
beforeSubmit: function (postdata,formid)
{
$.ajaxFileUpload (
{
url: url_2.php,
...
success:
error:
}),
return[true,""];
},
afterSubmit: function(reponse,postdata)
{
...
return [true,'',''];
}
I have a dilemna:
According to the jqgrid behaviour, url_2.php is called, then url_1.php.
url_2.php handles the data (parameters + file), url_1.php handles nothing.
url_2.php could return an error or message (e.g "already exist") but, the errors are displayed in the form by the aftersubmit event, and this event receives error from url_1.php !!!
I suppose that I am obliged to put the ajaxfileupload in the beforesubmit event !!!
Any ideas to solve this dilemna ?
You can use jquery form plugin and jqGrid dataProxy method instead.
useDataProxy: true,
dataProxy : function (opts, act) {
opts.iframe = true;
var $form = $('#FrmGrid_' + $grid.jqGrid('getGridParam', 'id'));
//Prevent non-file inputs double serialization
var ele = $form.find('INPUT,TEXTAREA,SELECT').not(':file');
ele.each(function () {
$(this).data('name', $(this).attr('name'));
$(this).removeAttr('name');
});
//Send only previously generated data + files
$form.ajaxSubmit(opts);
//Set names back after form being submitted
setTimeout(function () {
ele.each(function () {
$(this).attr('name', $(this).data('name'));
});
}, 200);
};
For example http://jqgrid-php.net file fileUpload class uses this. This is described in How to force dataProxy call in form editing if editurl is set in jqgrid also.
i just came across this ajax upload plugin and i wish to use it inside a form as shown in the demo page example 3. For some reason i am not able to make it work. I am not sure what parameters come into the function. For example here is my sample code.
$(document).ready(function(){
var upload = new AjaxUpload('property_i',
{
action: 'submitproperty.php',
autoSubmit: false,
onSubmit : function(file , extension){
return false;
}
});
var upload_data = upload.setData({
'propertytype':'propertytype'
});
});
Now the ID used in the AjaxUpload function should be ID of the or of the Entire form. Also how do i use setData method. Any suggestions or links will be very helpful. Thanks
I got it to work with the following code:
new AjaxUpload('#uploader_button', {
action: 'filename.ashx',
autoSubmit: true,
onSubmit: function(file, ext) {
// --- stuff here
// --- add postdata parameters
this.setData({ id: 1, title: docTitle.val() });
},
onComplete: function(file, response) {
// --- stuff here too
}
});
it doesn't utilize the var but instead adds the custom data params in the onSubmit block. The only other difference is that I haven't wrapped the parameter key in quotes as it seems to serialize correctly. And I'm not using autoSubmit: false , but instead it's true...
The only way I could get this to work with autoSubmit: false is to add this outside any function:
var uploader;
var uploadFile;
then in the AjaxUpload(...
onChange: function(file, response){
uploader = this;
uploadFile = file;
},
then in the function to do the upload:
uploader.setData({session: session});
uploader.submit();
Hope this helps
I'm using uploadify and very useful.
http://www.uploadify.com/