I am trying to solve a problem with plupload where i show an error in the upload window, generated by upload.php. No matter what i do, i am not able to create the error icon in the window. Although the alerts work fine, the file is always marked as success. Can someone please tell me what am i doing wrong here?
The error from my upload.php is die('{"jsonrpc" : "2.0", "error" : {"code": 500, "message": "File upload failed."}, "id" : "id"}');
And this is the javascript:
// Convert divs to queue widgets when the DOM is ready
$(function() {
// Setup html5 version
$("#html5_uploader").pluploadQueue({
// General settings
runtimes : 'html5',
url : 'upload.php',
max_file_size : '2000mb',
chunk_size : '1mb',
unique_names : false,
// Specify what files to browse for
filters : [
{title : "Video Clips", extensions : "mov,avi,mpg,flv,mp4"},
{title : "Audio Files", extensions : "mp3,wav"},
{title : "Executable Files", extensions : "exe"},
{title : "Zip Files", extensions : "zip,rar"}
],
preinit: attachCallbacks
});
// attach callbacks for FileUploaded and Error
function attachCallbacks(uploader) {
uploader.bind('FileUploaded', function(up, file, response) {
response = jQuery.parseJSON( response.response );
alert(response.error.code);
if (response.error.code == '500') {
alert (response.error.message);
//alert (file.id);
$('#' + file.id).attr('class', 'plupload_failed').find('a').css('display', 'none').attr('title', response.error.message);
file.status = plupload.FAILED;
} else {
alert("yoohoo");
$('#' + file.id).attr('class', 'plupload_done').find('a').css('display', 'none').attr('title', 'Success');
file.status = plupload.DONE;
}
});
}
});
Thanks.
In case anyone else is looking for the solution to this, it's here: http://www.plupload.com/punbb/viewtopic.php?id=1710
The problem is that you're using the FileUploaded event inside the preinit section. You should bind your event on the init section.
(answer from LeandroJF)
Related
I'm using Laravel Plupload Library in my Laravel app.
It returns that in response when I'm trying to upload images:
jsonrpc:"2.0"
result : null
and It seems everything is ok.But still uploading like {FileName}.part in my upload dir.
I've checked my php.ini and nothing wrong.
(upload_max_filesize : 200M,max_upload_files: 200,post_max_size=200M)
My js codes :
$("#image_uploader").pluploadQueue({
runtimes : 'html5,flash,silverlight,html4',
url : url,
chunk_size : '1mb',
rename : 'false',
dragdrop: 'true',
multiple_queues : true,
filters : {
max_file_size : '80mb',
mime_types: [
{title : "Image Files", extensions : "jpg,gif,png,jpeg"},
]
},
resize: {
width : '300',
height : '450',
quality : '90',
crop: 'true'
},
flash_swf_url : '/plupload/js/Moxie.swf',
silverlight_xap_url : '/plupload/js/Moxie.xap',
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
I had this same issue with Plupload and the issue with the PHP rename function
rename("{$filePath}.part", $filePath);
It failed and the .part extension remained on the uploaded file. Not sure if your upload script has this step but thought it worth mentioning in case!
I am using uploadify in one application. I have successfully implemented it. I got that after complete the upload files, the files' queue bar hide slowly. But I do not want to hide this bar because I am able to understand how many files being uploaded as well as which files. I have tried to write something as
'onUploadComplete' : function() {
$('.uploadify-queue').show();
}
But no luck. Is there any option not hide the queue bar of uploadify.
$('#file_upload').uploadify({
'swf' : '/js/uploadify/uploadify.swf',
'uploader' : '/js/uploadify/uploadify.php',
'method' : 'post',
'formData' : { 'someKey' : 'someValue' },
'auto' : false,
'buttonClass' : 'form-control',
'removeCompleted' : false
});
use removeCompleted : false
Basic idea is to clone original block into another and define own rules of closing:
$('#file_upload').uploadify({
// other options
'onUploadSuccess': function (file, data, response) {
// clone block to another to prevent hidding
var blockOld = $('#' + file.id);
var block = blockOld
.clone()
.removeAttr('id')
.insertAfter(blockOld);
// remove original block
blockOld.remove();
// close block on cancel button click
block.find('.cancel').click(function () {
$(this)
.closest('.uploadify-queue-item')
.fadeOut(function () {
$(this).remove();
})
;
});
}
});
I've been trying for the last few hours to get something... anything back from the pluploader upon completion of the queue to no avail.
Here is my JS code:
var uploader = $('#pluploadDiv').pluploadBootstrap();
uploader.bind("UploadComplete", function(up, files) {
var obj = $.parseJSON(response.response);
alert(obj.result);
});
On the very last line of the upload.php script, I have:
die('{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}');
This makes sense to me... but it's not working, the files upload without problems, but the alert doesn't even fire off... there is no response whatsoever.
Thoughts?
EDIT WITH NEW CODE AS A SOLUTION
The JS that I'm using (thanks jbl):
var uploader = $('#pluploadDiv').pluploadBootstrap();
uploader.bind('FileUploaded', function(upldr, file, object) {
var myData;
try {
myData = eval(object.response);
} catch(err) {
myData = eval('(' + object.response + ')');
}
$("#vehicle_id_value").val(myData.result);
});
Upload.php script stayed the same, last line of code:
die('{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}');
So basically when I create the shell row to associate images to in the upload script, I pass the row ID back to the original form into a hidden input field via the FileUploaded event that is bound to the plupload object.
<input type="hidden" name="vehicle_id_value" id="vehicle_id_value" value="" />
Works like a charm!
Several files could have been uploaded as part of the upload process. The individuals responses are not avalaible anymore when on UploadComplete stage.
If you want to display info about a specific file upload, you should bind to the FileUploaded event instead of UploadComplete.
Something like :
uploader.bind('FileUploaded', function(upldr, file, object) {
var myData;
try {
myData = eval(object.response);
} catch(err) {
myData = eval('(' + object.response + ')');
}
alert(myData.result);
});
Hope this will help
have you tried echo instead of die?
echo '{"jsonrpc" : "2.0", "result" : "'.$_REQUEST['unitID'].'", "id" : "id"}';
function fileupload(fileuploadid, urlashx, foldername, keyid, filelimit, filefilters) {
$("#" + fileuploadid).plupload({
// General settings
runtimes: 'html5,flash,silverlight,html4',
url: urlashx,
//Set parameter for server side
multipart_params: {
foldername: foldername,
keyid: keyid
},
// Maximum file size
max_file_size: filelimit,
// User can upload no more then 20 files in one go (sets multiple_queues to false)
max_file_count: 20,
multiple_queues: true,
//chunk_size: '10mb',
// Resize images on clientside if we can
resize: {
//width: 200,
//height: 200,
quality: 90,
crop: false // crop to exact dimensions
},
// Specify what files to browse for
filters: [
{ title: "Allowed files", extensions: filefilters }
],
// Rename files by clicking on their titles
rename: true,
// Sort files
sortable: true,
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
// Views to activate
views: {
list: true,
thumbs: true, // Show thumbs
active: 'thumbs'
},
// Flash settings
flash_swf_url: 'plupload/js/Moxie.swf',
// Silverlight settings
silverlight_xap_url: 'plupload/js/Moxie.xap',
// Post init events, bound after the internal events
init: {
FileUploaded: function (up, file, jsonMsg) {
var json = JSON.parse(jsonMsg.response); // now I have json object
if (json.success) {
AlertMessage("Message", json.message, "success", "False");
} else {
AlertMessage("Message", json.message, "error", "False");
}
up.splice(); //remove items of container
up.refresh(); //refresh container
}
}
});
}
uploader.bind('FileUploaded', function (up, file, res) {
var res1 = res.response.replace('"{', '{').replace('}"', '}');
var objResponse = JSON.parse(res1);
alert(objResponse.fn);
});
I am using SWFuploader with Jquery and PHP(Zend framework) for uploading
http://code.google.com/p/swfupload/
I am facing a problem while using sessions.
There is 3 step login wizard, 1st step is simple form and uplaoder is on 2nd step.
Flow of application is, It stores 1st step data in session after submitting and redirect to 2nd step. When I try to upload some files and try to use data stored in session, it gives me nothing.
I am using this code :
JS Code
var settings = {
flash_url : "/javascript/flash/swfupload.swf",
upload_url: "/login/uploaditems",
post_params: {
'session' : <?php echo session_id;?>
},
file_size_limit : "1 MB",
file_types : "*.pdf;",
file_types_description : "All Files",
file_upload_limit : 100,
file_queue_limit : 10,
custom_settings : {
cancelButtonId : "cancelBtn"
},
debug: false,
button_image_url: "/images/chooseButton-2.png",
// The event handler functions are defined in handlers.js
file_queued_handler : fileQueued,
file_queue_error_handler :fileQueueError,
file_dialog_complete_handler : fileDialogComplete,
upload_start_handler : uploadStart,
upload_progress_handler : uploadProgress,
upload_error_handler : uploadError,
upload_success_handler : uploadSuccess,
upload_complete_handler : uploadComplete,
queue_complete_handler : queueComplete // Queue plugin event
};
Swfu1 = new SWFUpload(settings);
PHP Code :
if(isset($params['session'])) {
session_id($params['session']);
}
$uploadedFilesSession = new Zend_Session_Namespace('uploadedFiles'.$params['session']);
if(!isset($uploadedFilesSession->files))
{
$uploadedFilesSession->files = array();
}
if(!isset($uploadedFilesSession->files[$flag])){
$uploadedFilesSession->files[$flag] = array();
}
Everytime it goes in condition !isset($uploadedFilesSession->files) and reset my authentication session too. It is only happening in Safari.
Please guide me.
i have been trying so hard to fix my issue. I've looked on google loads and attempted the fixes but i am having no luck at all.
$(function() {
$("#listing_pic").uploadify({
height : 30,
swf : 'uploadify/uploadify.swf',
uploader : 'uploadify/uploadify.php',
width : 120,
fileExt : '*.jpg; *.jpeg; *.JPG; *.JPEG;',
checkExisting : 'uploadify/check-exists.php',
simUploadLimit: 2,
fileSizeLimit : '4MB',
auto : true,
multi : true,
onComplete : function(event,queueID,fileObj,response,data) {
$('#hiddenlistingpic').val(response);
},
});
});
Im trying to get Uploadify to upload my image to my server (which works fine) but then send the filename to the hidden field so that i can post the data into my database update class. It's giving me a headache, and im more than certain its a simple fix.
from here: https://stackoverflow.com/a/3466188/1253747
$(function() {
$("#listing_pic").uploadify({
height : 30,
swf : 'uploadify/uploadify.swf',
uploader : 'uploadify/uploadify.php',
width : 120,
fileExt : '*.jpg; *.jpeg; *.JPG; *.JPEG;',
checkExisting : 'uploadify/check-exists.php',
simUploadLimit: 2,
fileSizeLimit : '4MB',
auto : true,
multi : true,
onComplete : function(event,queueID,fileObj,response,data) {
$('#hiddenlistingpic').val(fileObj.name);
},
});
});
or from the uploadify docs, there seems to be many other ways to get it:
'onUploadSuccess' : function(file, data, response) {
$('#hiddenlistingpic').val(file.name);
}
same thing can be done with the onuploadcomplete.
or is there anything else that i am missing?