Hello, thanks for the extension. Im using it with Twitter Bootstrap 2 and the general progress bar is not working using the extensions view form.
Is there a callback option when all uploaded files are done? I coulnd’t find It.
EDIT: found the callback, It’s called “stop”
I am also not seeing the images, in particular "loading.gif" and "progressbar.gif", although I am not using bootstrap at all. The extension works great other than not being able to visually see your progress which will still discourage me from using the extension.
Edit:
Nevermind, finally got this to work. Those images aren’t normally supposed to load but the loading bar doesn’t seem to normally work without some CSS changes. Don’t remember exactly all the CSS that I did, but I think just setting “.bar” to “position:relative;” did the trick.
<?php $form=$this->beginWidget(‘CActiveForm’, array(
'id'=>'category-form',
'enableAjaxValidation'=>false,
'htmlOptions' => array('enctype' => 'multipart/form-data'),
)); ?>
<!-- Other Fields… -->
<div class="row">
<?php
$this->widget( 'xupload.XUpload', array(
'url' => Yii::app( )->createUrl( "admin/page/upload"),
//our XUploadForm
'model' => $photos,
//We set this for the widget to be able to target our own form
'htmlOptions' => array('id'=>'category-form'),
'attribute' => 'file',
'multiple' => true,
//Note that we are using a custom view for our widget
//Thats becase the default widget includes the 'form'
//which we don't want here
)
);
?>
</div>
<!-- Other Fields... -->
<script type="text/javascript">
$(function () {
'use strict';
// Initialize the jQuery File Upload widget:
$('#XUploadForm-form').fileupload({
url: 'getphotos/'
});
$.ajax({
url: $('#XUploadForm-form').fileupload('option', 'url'),
dataType: 'json',
context: $('#XUploadForm-form')[0]
}).done(function (result) {
$(this).fileupload('option', 'done')
.call(this, null, {result: result});
});
});
</script>
it’s my form for image upload
i try load exist image
why he make GET http://test.com/admin/page/update/[object%20Object] 400 (Bad Request)
but not "http://test.com/getphotos" or similar?
I hope I’m not being totally obtuse about this, but the tutorial and demo might be helped if there was a database schema to use with them. Basically, I’ve got a standard HAS_MANY/BELONGS_TO relationship between Pattern and Attachment. I don’t see where or how I specify the child model/table and how to pass the pattern_id to the child table. Your demo has no models in it at all, so there’s no way to see how the business logic is proceeding, and the tutorial seems to assume only one table/model. Also the controller does address actionCreate or actionUpdate.
Clearly, since this extension is all about doing multiple uploads for a single model, it would seem that one would have to contend with saving to two tables when using it. How do I do that?
Hello,
I’ve run into a little problem with using the extension when it is being rendered into the page with ajax.
The error I’m getting is that it fails to load in the fileupload.js file
Uncaught TypeError: Object [object Object] has no method 'fileupload'
Javascript that is loading it in:
$("#shift-history").on("click", ".add-documents-link, .upload-expense-document-link", function(e){
e.preventDefault();
var eventId, shiftId, expenseId, uploadType;
if($(this).hasClass("add-documents-link")){
uploadType = 'document';
eventId = $(this).closest(".documents").data("eventId");
shiftId = $(this).closest(".documents").data("shiftId");
} else {
uploadType = 'expense';
expenseId = $(this).data("expenseId");
shiftId = $(this).data("shiftId");
}
$.ajax({
url: baseURL + "userShift/getDocumentUploadWidget",
type: "GET",
data: {"upload_type": uploadType},
dataType: "html",
success: function(data){
var $data = $(data);
$("body").append($data.filter(':not(script[src*="jquery"])').filter(':not(script[src*="min/serve"])'));
$("#upload-document-dialog").find("input[name='expense_id']").val(expenseId);
$("#upload-document-dialog").find("input[name='shift_id']").val(shiftId);
$("#upload-document-dialog").find("input[name='event_id']").val(eventId);
$("#upload-document-dialog").dialog("open");
},
error: Parim.errorHandler
});
});
The javascript part is working perfectly. In the response I can see that everything is grapped properly.
The PHP controller action:
public function actionGetDocumentUploadWidget()
{
$uploadType = $_REQUEST['upload_type'];
Yii::import("xupload.models.XUploadForm");
$XUploadForm = new XUploadForm;
echo $this->renderPartial('/userShift/_documentUpload', array('uploadType'=>$uploadType, 'XUploadForm'=>$XUploadForm), false, true);
}
The view file:
<?php
if($uploadType == 'expense'){
$url = Yii::app()->createUrl("document/expenseDocumentUpload");
} else {
$url = Yii::app()->createUrl("document/userVenueDocumentUpload");
}
?>
<?php
$this->beginWidget('zii.widgets.jui.CJuiDialog', array(
'id'=>'upload-document-dialog',
'options'=>array(
'title'=>'<div class="fl" style="margin:0 10px">Add Documents [ .pdf, .doc, .docx, .txt, .csv, .xls, .odt, .jpg, .jpeg, .png, .gif ]</div>',
'autoOpen'=>false,
'modal'=>true,
'width'=>'auto',
'height'=>'auto',
'resizable'=>false,
'open'=>'js: function(){
$(".ui-datepicker").hide();
}',
'close' => 'js: function(){
$.fn.getDocuments();
var shiftId = $("#upload-document-dialog").find("input[name=\'shift_id\']").val();
$.fn.getExpensesList(shiftId);
}',
),
'htmlOptions'=>array('style' => 'display:none; padding:0;')
));
?>
<div id="document-dialog-content" style="min-height:120px; margin:10px;">
<?php
$this->widget('xupload.XUpload', array(
'url' => $url,
'model' => $XUploadForm,
'attribute' => 'file',
'multiple' => false,
'formView' => 'documentFormUserVenue',
'uploadView' => 'documentUpload',
'downloadView' => 'docDownloadSmall',
'options' => array(
'acceptFileTypes' => "js:/(\.|\/)(doc|docx|pdf|xls|txt|odt|csv|jpg|jpeg|gif|png)$/i",
// 'success' => 'js:function () { }',
),
));
?>
</div>
<div class="action-bar cf">
<div class="row buttons">
<?php echo CHtml::link(_('Upload'),'#',array('class'=>'btn btn-success fr','id'=>'start-upload', 'style'=>'margin:10px 20px; color:white;') ); ?>
</div>
</div>
<?php $this->endWidget('zii.widgets.jui.CJuiDialog'); ?>
The reason why I’ve gone with this approach was due to problems loading two xupload instances into one page.
The problem I see here is that it probably is trying to init fileupload before fileupload.js actually gets included.
Thanks to all in advance.
Thank for this great extension…
but, I need your help friend…
I combine this extension with a CActiveForm…
When I upload images… and then I submit the CActiveForm… then CActiveForm get some error…
My images that I already upload is gone too… I know that it is saved at Yii::app()->user->setState … but how to show it up again at this extension, like before I submitted form??
Thank before…
hi
I am new to Yii, and stumbled unto your extension which looks amazing.
I am looking into the more complex workflow you posted here
http://www.yiiframework.com/wiki/348/xupload-workflow/#hh2
You mention that you are using a custom view for the widget
because the default widget includes the ‘form’
Can you post the application.views.somemodel._form file?
Hi,
I use the basic example of this extension:
$this->widget(‘xupload.XUpload’, array(
'url' => Yii::app()->createUrl("/event/upload"),
'model' => $photos,
'attribute' => 'file',
'multiple' => true,
));
But I am unable to add files. I click the "Add files" button, select a file but when the filedialog window closes I see nothing. I get the following JS error:
Uncaught TypeError: Cannot read property ‘options’ of undefined jquery.fileupload-ui.js:88
I use jquery 1.11.0
Please help me
Hi! I start to use this extension and i have this problem with the “Template Upload”, doesn’t show after add an image… but when i run firebug, the template shows…
This is my code for the widget:
<?php
$this->widget('xupload.XUpload', array(
'url' => Yii::app()->createUrl("site/upload"),
'model' => $model,
'attribute' => 'file',
'multiple' => true,
));
?>
There i miss something?
Thanks!
Hi,
I use XUpload extension, thanks for it.
My questions are :
actually I do not use thumbnail_url, as I do not need to generate thumbnails and I want to show thumbnails in my own way ?
all images are uploaded by click on "Start upload" button?
hlo everybody i am using XUpload extension but in this extension there was no XUploadForm file was given so i am using this form which i given below
<?php
class XUploadForm extends CFormModel
{
public $file;
public $mime_type;
public $size;
public $name;
/**
Declares the validation rules.
The rules state that username and password are required,
and password needs to be authenticated.
*/
public function rules()
{
return array(
array('file', 'file'),
);
}
/**
*/
public function attributeLabels()
{
return array(
'file'=>'Upload files',
);
}
public function getReadableFileSize($retstring = null) {
// adapted from code at http://aidanlister.com/repos/v/function.size_readable.php
$sizes = array('bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB');
if ($retstring === null) { $retstring = '%01.2f %s'; }
$lastsizestring = end($sizes);
foreach ($sizes as $sizestring) {
if ($this->size < 1024) { break; }
if ($sizestring != $lastsizestring) { $this->size /= 1024; }
}
if ($sizestring == $sizes[0]) { $retstring = '%01d %s'; } // Bytes aren't normally fractional
return sprintf($retstring, $this->size, $sizestring);
}
}
?>
but i have problem i am getting error that XUploadForm.url is undefined.
please help me. i didn’t understand where is the problem
Hello. I was so worn out with this plugin. I’m going crazy. Already spent more than 12 hours.
I need to use one model for his images from the database.
When you add images stored in the data base.
When editing I want to display a list of images from the database.
I do not understand what fields and methods in the model should be and how to save data (in json or not).
I’m tired. Help please.
Does anyone have any source code or a working example for such a detailed description of how stupid I.
I need load the existing files in my directory using ajax. Sorry i can’t public my code. Please give me a link or other suggestion in that direction
Hey,
I’ve been using the xupload extension for quite some time and it seems like a good extension. I came across this one issue here and that is that I can’t figure out how to refresh a certain div element with database information using AJAX after the upload was succesful. I am working on an image manager using xUpload but I don’t have the slightest clue where to add code in order for that div to refresh. I hope somebody can shoot me towards the right direction o/
How can I disable the preview showing up after uploading the file?
hi Asgaroth,
can you update this extension with jquery 1.11.2? or update jquery file upload into last version?
Hello everyone,
I’m using for the first time Yii Xupload Extension. I followed the setup instructions relatively to the section “Using XUploadAction and XUploadForm” and everything works, except for the following annoying effect:
when I upload any image, at the user interface level, it always happens that its image preview is replaced with the resize of the image itself, with very much size resolution, so that the screen scrolls horizontally so much.
I do not want this image resize, so I tried to add to the widget parameter ‘disableImageResize’ => true (from blueimp/jQuery-File-Upload Options documentation), but it continues quietly to do the image resize with very much size resolution.
How I can do to avoid the after upload images resize, leaving the images preview exactly as they were before?
Also, I would like to try to analyze the javascript part, but I can not find the start-point of these, not even to put some debug alert!.
Can you help me please?
Thank you very much in advance.
Found it!
in the view /protected/extensions/upload/view/download.php, it is enough to replace the following code:
<a href="{%=file.url%}" title="{%=file.name%}" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}"></a>
with this:
<a href="{%=file.url%}" title="{%=file.name%}" target="_blank" rel="gallery" download="{%=file.name%}"><img src="{%=file.thumbnail_url%}" [b]width="80" height="60"[/b]></a>
that is, simply by adding: width="80" height="60"
Bye.
how I can get file name or size in multiple upload beforeSend
'beforeSend' => 'js:function(event, files, index, xhr, handler, callBack) {
file_name = files[index].name;//it gives error
}
I am using the XUpload extension and only allowing a single file upload. (multiple=false)
Everything works except for the following:
For some reason, it disables the file upload field after the image has been uploaded if you choose the single file upload attribute(This doesn’t happen with the multiple file uploads choice).
How can I re-enable the file upload field after a file has been uploaded?