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!
Related
I'm trying to upload files with Plupload but I always get TokenMissMatchException.
// Route
Route::post("/posts/gallery", "PostsController#uploadGallery");
// Controller action
public function uploadGallery(){
$file = Input::file('file');
$destinationPath = public_path() . '/imgs';
$extension = $file->getClientOriginalExtension();
$filename = "post-" . str_random(12) . "." . $extension;
$inFile = $file->getRealPath();
$outFile = public_path() . "/imgs/" . $filename;
$image = new Imagick($inFile);
$image->thumbnailImage(550, 0);
if($image->writeImage($outFile)){
return Response::json(["response" => "ok", "img" => $filename]);
}else{
return Response::json(["response" => "error"]);
}
}
This is my attempt to fix this. I tried to add _token to request but it's not picking it up:
$("#uploader").pluploadQueue({
runtimes : 'html5,flash,silverlight,html4',
url : "{{ URL::action('PostsController#uploadGallery') }}",
chunk_size: '1mb',
rename : true,
dragdrop: true,
filters : {
max_file_size : '3mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
]
},
resize : {width : 320, height : 240, quality : 90},
flash_swf_url : "<?php echo public_path() . '/js/Moxie.swf'; ?>",
silverlight_xap_url : "<?php echo public_path() . '/js/Moxie.xap'; ?>",
prevent_duplicates: true,
multipart_params : {
"_token" : $("[name=_token]").val()
}
});
In filters.php I have this:
Route::filter('csrf', function() {
$token = Request::ajax() ? Request::header('x-csrf-token') : Input::get('_token');
if (Session::token() != $token){
throw new Illuminate\Session\TokenMismatchException;
}
});
Can someone help me with this?
UPDATE:
Html form for uploading files:
<div class="imageGallery">
{{ Form::open() }}
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
{{ Form::close() }}
</div>
// hidden input field
<input type="hidden" value="VJRUpvq92oYxCsNHVBi5TqqkU6I6CQayay6x7L0m" name="_token">
If the upload is being done via ajax, your csrf filter is expecting the token to be in the 'x-csrf-token' header, not the input.
Instead of adding the token to the multipart_params, try adding it to the headers:
$("#uploader").pluploadQueue({
runtimes : 'html5,flash,silverlight,html4',
url : "{{ URL::action('PostsController#uploadGallery') }}",
chunk_size: '1mb',
rename : true,
dragdrop: true,
filters : {
max_file_size : '3mb',
mime_types: [
{title : "Image files", extensions : "jpg,gif,png"},
]
},
resize : {width : 320, height : 240, quality : 90},
flash_swf_url : "<?php echo public_path() . '/js/Moxie.swf'; ?>",
silverlight_xap_url : "<?php echo public_path() . '/js/Moxie.xap'; ?>",
prevent_duplicates: true,
headers: {
"x-csrf-token" : $("[name=_token]").val()
}
});
Edit
In addition to the above change, it was determined that the javascript was not finding the _token input element to get the value. The solution to that issue was to add quotes around the value in the CSS attribute selector.
The javascript that ended up working:
$("input[name='_token']").val()
The CSS3 docs regarding attribute selectors can be found here. Although some browsers work without the quotes, the examples they provide show the selector values being quoted.
I'm building a site (in php) that uses uploadify to allow a user to upload portfolio images.
I have uploadify working fine, but I'm just wondering the best way of showing the uploaded images on the page once they have been uploaded. Is it possible to do without a page refresh?
I've pasted my uploadify code below:
<script>
<?php $timestamp = time();?>
var counter = 1;
$(function() {
$('#file_upload').uploadifive({
onUploadComplete: function(event, queueID, fileObj, reponse, data) {
//alert(counter);
counter = counter +1 ;
},
'buttonText' : 'Upload Images...',
'uploadLimit' : 12,
'uploadScript' : '/includes/uploadifive.php',
'checkScript' : '/includes/check-exists.php',
'auto' : true,
'method' : 'post',
formData : {
'page_id' : '<? echo $pageDetails->row['page_id'] ?>',
'counter' : counter,
'timestamp' : '<? echo $timestamp;?>',
'token' : '<? echo md5('unique_salt' . $timestamp);?>'
},
});
});
</script>
I'm not too sure how to get the file name from uploadify
Sure, you can just add img elements to the page dynamically via the DOM:
var img = document.createElement('img');
img.src = "/path/to/the/new/img.png";
document.getElementById("somecontainer").appendChild(img);
Live Example | Source
You may need to do an ajax call to the server to get the path of the new image, unless that falls out naturally from your application logic.
In the edition I use there is a function
onUploadSuccess : function(file,data,response){
}
Then I can get file name by file.name;
So in your code maybe the fileObj, You can try fileObj.name to get the name of the file you upload.
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?
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)
i am trying to use uploadify, to upload pdf or txt files, but without success. Uploadify 2.1.4 uploads just image files. I tried to just rename file extensions, tried to allow ., tried to namely allow pdf or other formats, but Uploadify uploads just F******g images and i do not know why...
Please help me.
I use these settings:
public function show()
{
if(!$this->dir) throw new exception("Upload dir is not set");
if(!$this->url) throw new exception("Upload url is not set");
$rem=(isset($_POST[$this->name."-rem"]))?$_POST[$this->name."-rem"]:"";
$tpl='<div id="'.$this->name.'-queue" class="upload-queue">'.$this->fillQueue().'</div>';
$tpl.='<input id="'.$this->name.'-uploadify" name="'.$this->name.'-uploadify" type="file" />';
$tpl.='<input id="'.$this->name.'-files" name="'.$this->name.'-files" type="hidden" />';
$tpl.='<input id="'.$this->name.'-rem" name="'.$this->name.'-rem" type="hidden" value="'.$rem.'"/>';
//$tpl.='<link rel="stylesheet" type="text/css" href="/uploadify/uploadify.css" />';
$tpl.="<script type=\"text/javascript\"><!--
var ".$this->name."Files=".$this->currentCount.";
function ".$this->name."DeleteFile(where)
{
var rem=$('#".$this->name."-rem').val();
if(rem!='') rem+=',';
$('#".$this->name."-rem').val(rem+$(where).parent().attr('id'));
$(where).parent().remove();
".$this->name."Files--;
if(".$this->name."Files<".$this->count.") $(\"#".$this->name."-uploadifyUploader\").show();
}
$(document).ready(function() {
$(\"#".$this->name."-uploadify\").uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '".$this->url."',
'scriptData' : {'".session_name()."':'".session_id()."'},
'cancelImg' : '/uploadify/cancel.png',
'folder' : '".$this->dir."/thumb',
'queueID' : '".$this->name."-queue',
'auto' : true,
'multi' : ".(($this->count>1)?"true":"false").",
'buttonText' : '".$this->buttonName."',
'fileExt' : '".rtrim($this->fileExt,";")."',
'fileDesc' : '".rtrim($this->fileDesc,",")."',
onError : function (a, b, c, d) {
if (d.status == 404)
alert('Could not find upload script. Use a path relative to: '+'<?= getcwd() ?>');
else if (d.type === \"HTTP\")
alert('error '+d.type+\": \"+d.status);
else if (d.type ===\"File Size\")
alert(c.name+' '+d.type+' Limit: '+Math.round(d.sizeLimit/1024)+'KB');
else
alert('error '+d.type+\": \"+d.text);
},
onComplete : function(event, queueID, fileObj, response, data){
$(\"#".$this->name."-queue\").append('<div id=\"'+fileObj.filePath+'\" class=\"item\"><div style=\"background: url('+fileObj.filePath+') no-repeat 50% 50%\"></div><img src=\"/uploadify/cancel.png\" class=\"delete-file\" onclick=\"".$this->name."DeleteFile(this);\"></div>');
$('#".$this->name."-queue').sortable('refresh');
".$this->name."Files++;
if(".$this->name."Files>=".$this->count.") $(\"#".$this->name."-uploadifyUploader\").hide();
},
onInit : function(){setTimeout(function(){if(".$this->name."Files>=".$this->count.") $(\"#".$this->name."-uploadifyUploader\").hide();},500);}
});
$('#".$this->name."-queue').sortable();
$('#".$this->name."-queue').disableSelection();
$('form').submit(function(){
$('#".$this->name."-files').val($('#".$this->name."-queue').sortable('toArray'));
});
});
--></script>";
return array("",$tpl);
}
...
Thank you!
var settingObject = {
'uploader' : '/uploadify/uploadify.swf', // set your path
'checkScript':'/uploadify/check.php', // set your path
'script' : '/uploadify/uploadify.php', // set your path
'cancelImg' : '/uploadify/cancel.png', // set your path
'folder' : '/files/useruploads',
'auto' : true,
'fileExt' : '*.jpg;*.gif;*.png;*.txt;*.pdf;*.doc;*.docx', // any extension you want to allow
'fileDesc' : 'Upload Files (.JPG, .GIF, .PNG, .TXT, .PDF, .DOC, .DOCX)',
'removeCompleted': false
};
$("#file-1").uploadify(settingObject);
Reference : (File-Extension) http://www.uploadify.com/documentation/options/fileext/
This should work for you..
There might be an issue of Size Limit for each file. Try adding the following
'sizeLimit': 500000
Try to edit upload_max_filesize in your php.ini
Change your current options to these:
$('#file_upload').uploadify({
'uploader' : '/uploadify/uploadify.swf',
'script' : '/uploadify/uploadify.php',
'cancelImg' : '/uploadify/cancel.png',
'folder' : '/uploads',
'fileTypeExt' : '*.jpg;*.gif;*.png', <== this line
'fileTypeDesc' : 'Image Files'
});
For reference: http://www.uploadify.com/documentation/uploadify/filetypeexts/
Change these lines:
'fileTypeExt' : '*.txt;*.pdf;',
'fileTypeDesc' : '*.txt and *.pdf',
Use 'fileExt' : '*.pdf;*.jpg;*.jpeg;*.png', instead of the filename that reads it.