[Extension] Xupload

You got the wrong idea, subfolderVar its the name of a $_GET variable, that will be looked for in the action, and should contain the name of the subfolder. in your case:

The Controller:





class MyController extends CController

  {

      public function actions()

      {

          return array(

              'upload'=>array(

                  'class'=>'xupload.actions.XUploadAction',

                  'path' =>Yii::app() -> getBasePath() . "/../uploads",

                  'publicPath' => Yii::app() -> getBaseUrl() . "/uploads",

                  'subfolderVar' => "parent_id",

              ),

          );

      }

  }



The view:




$this->widget('xupload.XUpload', array(

                    'url' => Yii::app()->createUrl("machines/upload", array('parent_id' => '01012012')),

                    'model' => $model2,

                    'attribute' => 'file',

                    'multiple' => true,	

    	  	    'options'=>array(

			'maxNumberOfFiles' => 1,			

			'maxFileSize'=>3000000,

  		    )			

) 



oh god, this saved my day. thank you Asgaroth.

Hi Asgaroth,

Great, very complete wrapper for the Jquery upload. Thank you for writing it!

Image uploading/saving/db saving is all working great. I am now working on getting the thumbnail image to work after saving. I’ve added the following lines to XUpload::publishAssets




if($this->previewImages || $this->imageProcessing){

                Yii::app() -> clientScript -> registerScriptFile($baseUrl . '/js/jquery.load-image.min.js', CClientScript::POS_END);

                Yii::app() -> clientScript -> registerScriptFile($baseUrl . '/js/jquery.canvas-to-blob.min.js', CClientScript::POS_END);

                Yii::app() -> clientScript -> registerScriptFile($baseUrl . '/js/jquery.fileupload-fp.js', CClientScript::POS_END);

            }



And obviously have included that code in the assets/js folder. These 3 files are being loaded when the page is loaded. However, after the file is uploaded the thumbnail url is generated (as an example: /blog/images/uploads/tmp/thumbs/e85786ae6c68b101d10973cc971c5f16.jpg

But when I check the images/uploads/tmp/thumbs directory no file is created. There is however a file generated for /blog/images/uploads/tmp/e85786ae6c68b101d10973cc971c5f16.jpg (the full image). So presumably it looks like the javascript that is to convert the full image to a thumbnail and save it is not running.

There are no javascript errors in the console. My view/action/controller code is identical to what is listed in the advanced workflow link.

Any advice on getting the thumbs to work after upload would be much appreciated.

Thank you,

Edit: I may not fully understand the jquery file upload workflow to get the thumbnail. Based on this line: “If you don’t override the add callback option, you’ll have image resizing functionality automatically. Else, you can make use of the process API like this:” from https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin the wiki makes it sound like the thumbnail is auto generated?

I have actually never tried client side re-size, I believe you are better of resizing your images server-side with something like ephpthumb

Gotcha, will take a look at phpthumb. Thanks for the recommendation and quick response.

Perhaps I have overlooked or missed the answer within the previous responses, but I haven’t been able to figure out exactly how to make the form work correctly.

here is the form generated in the view


<?php 

  $this->widget('xupload.XUpload', array(

      'url'=> $this->createUrl($this->site."/mySite/upload"),

      'model'=>$coverModel,

      'htmlOptions'=>array(

          'id'=>'coverForm',

          'enctype'=>'multipart/form-data',

      ),

      'attribute'=>'file',

      'multiple'=>false,

      'formView'=>'application.views.uploader.form'

      )

  ));

?>

Maybe I’ve just assumed but is there not away that this form can be sent through an Ajax Request that returns the JSON. As of right now the form leaves the page and redirects to the action URL (as expected of a normal form) and then the JSON just appears. Is there something I need to do so that I gets passed as an Ajax request and can then handle the JSON properly?

Hello,

Not sure if anyone will get to experience this or if anyone has herd of it but I did a sample site using the XUpload Extension and it worked just fine except on an IPad.

My friend who was testing the site said Safari was not able to click the upload link; funny thing was his black berry could do so…

Anyone have a quick target as the problem - I don’t think its Yii or even JQuery as much the CSS itself. This could be a problem for some sites these days with so many on tablets and IPhones.

Anyway, if someone already has a fix for IPad please forward before I have to start debugging the problem.

Thanks in advance.

I’m working on a callback where I want to access the public url of the file, which only retruns undefined

I’m stuck, the weird thing to me is that I do access the filename




'completed' => 'js:function (e,data) {

 var filename = data.files[\'0\'][\'name\']; //returns the filename

var publicurl = data.files[\'0\'][\'url\']; //gives undefined

//what firebug shows

[{"name":"368511463_443b3b3b54.jpg","type":"image\/jpeg","size":92755,"url":"\/uploads\/1\/368511463_443b3b3b54.jpg","thumbnail_url":"\/uploads\/1\/368511463_443b3b3b54.jpg","delete_url":"\/sforum\/topic\/upload\/_method\/delete\/file\/C%3A%5CProgrammering%5Cxampp%5Chtdocs%5Cforum%5Cprotected%2F..%2Fuploads%2F1%2F368511463_443b3b3b54.jpg","delete_type":"POST"}]



Any ideas?(A)

Hi,

I’m having a problem and I think it’s with the formView parameter.

When I select a file, and I click upload, the file goes through and the thumbnail is even generated.

The thing is that I can’t submit the form after.

Here’s the content of views/photos/sendpic.php




<?php $form=$this->beginWidget('bootstrap.widgets.TbActiveForm',array(

        'id'=>'images-form',

        'enableAjaxValidation'=>false,

        'htmlOptions' => array('enctype' => 'multipart/form-data'),

)); ?>


        <p class="help-block">Les champs étoilés <span class="required">*</span> sont requis.</p>


        <?php echo $form->errorSummary($model); ?>


        <?php echo $form->textFieldRow($model,'imageFile',array('class'=>'span5','maxlength'=>128)); ?>


        <?php echo $form->textFieldRow($model,'caption',array('class'=>'span5','maxlength'=>255)); ?>


        <?php echo $form->textFieldRow($model,'style',array('class'=>'span5','maxlength'=>255)); ?>


        <?php echo $form->textFieldRow($model,'content',array('class'=>'span5','maxlength'=>255)); ?>


        <?php echo $form->textFieldRow($model,'gallery_id',array('class'=>'span5','maxlength'=>10));

         echo $form->labelEx($model,'imageFile'); ?>

            <?php

            $this->widget( 'xupload.XUpload', array(

                'url' => Yii::app( )->createUrl( "/photos/upload"),

                'model' => $photos,

                //We set this for the widget to be able to target our own form

                'htmlOptions' => array('id'=>'images-form'),

                'attribute' => 'file',

                'multiple' => false,

                //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

                'formView' => 'application.views.photos._form',

                )

            );

            ?>


        <div class="form-actions">

                <?php $this->widget('bootstrap.widgets.TbButton', array(

                        'buttonType'=>'submit',

                        'type'=>'primary',

                        'label'=>$model->isNewRecord ? 'Create' : 'Save',

                )); ?>

        </div>


<?php $this->endWidget(); ?>



When I comment formView, I can upload a file but I can’t submit the form after. And if I leave formView on, it tries to load the form but it doesn’t pass the $model variable. What am I doing wrong?

My guess is that you are getting 2 equal id’s on your html, so the javascript doesn’t know what to do. try removing


'htmlOptions' => array('id'=>'images-form'),

When I remove it or change it to something else, nothing happens after I select a picture. When I click to "Add Files", I get the file selection popup, I choose the file, but nothing else.

Check your javascript consolte to see if there is any errors, if there are none, then check that your view is not generating another nested form with the same ID, ensure that your ID’s do not repeat in your HTML

That’s exactly the problem. Firebug doesn’t return anything but I have to opened form nested:


<form enctype="multipart/form-data" class="form-vertical" id="images-form" action="/photos/form/" method="post">

<form id="images-form" enctype="multipart/form-data" action="/photos/upload" method="post">



So I tried to put the Xupload widget on the top of the other form, but it doesn’t fill my “file” attribute on the form I made, after upload.

When I put the widget in a different view than the form and add the form with formView, I get an error:

Undefined variable: model

here’s my view/photos/sendpic.php (I tried to pass $model in htmlOptions here)




<?php

            $this->widget( 'xupload.XUpload', array(

                'url' => Yii::app( )->createUrl( "/photos/upload"),

                'model' => $photos,

                //We set this for the widget to be able to target our own form

                'htmlOptions' => array('id'=>'images-form', 'model' => $model),

                'attribute' => 'file',

                'multiple' => false,

                //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

                'formView' => 'application.views.photos._form',

                )

            );



Here’s views/photos/_form.php




$form=$this->beginWidget('bootstrap.widgets.TbActiveForm',array(

        'id'=>'images-form',

        'enableAjaxValidation'=>false,

        'htmlOptions' => array('enctype' => 'multipart/form-data'),

)); ?>


        <p class="help-block">Les champs étoilés <span class="required">*</span> sont requis.</p>


        <?php echo $form->errorSummary($model); ?>

        <?php echo $form->textFieldRow($model,'imageFile',array('class'=>'span5','maxlength'=>128)); ?>

        <?php echo $form->textFieldRow($model,'caption',array('class'=>'span5','maxlength'=>255)); ?>

        <?php echo $form->textFieldRow($model,'style',array('class'=>'span5','maxlength'=>255)); ?>

        <?php echo $form->textFieldRow($model,'content',array('class'=>'span5','maxlength'=>255)); ?>

        <?php echo $form->textFieldRow($model,'gallery_id',array('class'=>'span5','maxlength'=>10));

#        echo $form->labelEx($model,'imageFile'); ?>

        <div class="form-actions">

                <?php $this->widget('bootstrap.widgets.TbButton', array(

                        'buttonType'=>'submit',

                        'type'=>'primary',

                        'label'=>$model->isNewRecord ? 'Create' : 'Save',

                )); ?>

        </div>


<?php $this->endWidget(); ?>



And here’s the controller action that calls the forms:




        public function actionForm( ) {

          $model = new Images;

          Yii::import( "xupload.models.XUploadForm" );

          $photos = new XUploadForm;

          //Check if the form has been submitted

          if( isset( $_POST['Images'] ) ) {

           //Assign our safe attributes

           $model->attributes = $_POST['Images'];

           //Start a transaction in case something goes wrong

           $transaction = Yii::app( )->db->beginTransaction( );

           try {

            //Save the model to the database

            if($model->save()){

                $transaction->commit();

            }

           } catch(Exception $e) {

            $transaction->rollback( );

            Yii::app( )->handleException( $e );

           }

          }

          $this->render( 'sendpic', array(

           'model' => $model,

           'photos' => $photos,

          ));

        }



I’m so close, I’m sure it’s just a small little thing.

So I tried something else. I took the content of "extensions/xupload/views/form.php" and removed the beginning form and endform and pasted it in in views/photos/xup.php.

Now my sendpic.php (which is called from the controller) looks like this:




<?php

$form=$this->beginWidget('bootstrap.widgets.TbActiveForm',array(

        'id'=>'images-form',

        'enableAjaxValidation'=>false,

        'htmlOptions' => array('enctype' => 'multipart/form-data'),

)); ?>


        <p class="help-block">Les champs étoilés <span class="required">*</span> sont requis.</p>

<?php

            $this->widget( 'xupload.XUpload', array(

                'url' => Yii::app( )->createUrl( "/photos/upload"),

                'model' => $photos,

                //We set this for the widget to be able to target our own form

                'htmlOptions' => array('id'=>'images-form', 'model' => $model),

                'attribute' => 'file',

                'multiple' => false,

                //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

                'formView' => 'application.views.photos.xup',

                )

            );

?>


        <?php echo $form->errorSummary($model); ?>

        <?php echo $form->textFieldRow($model,'imageFile',array('class'=>'span5','maxlength'=>128)); ?>

        <?php echo $form->textFieldRow($model,'caption',array('class'=>'span5','maxlength'=>255)); ?>

        <?php echo $form->textFieldRow($model,'style',array('class'=>'span5','maxlength'=>255)); ?>

        <?php echo $form->textFieldRow($model,'content',array('class'=>'span5','maxlength'=>255)); ?>

        <?php echo $form->textFieldRow($model,'gallery_id',array('class'=>'span5','maxlength'=>10));

#        echo $form->labelEx($model,'imageFile'); ?>

        <div class="form-actions">

                <?php $this->widget('bootstrap.widgets.TbButton', array(

                        'buttonType'=>'submit',

                        'type'=>'primary',

                        'label'=>$model->isNewRecord ? 'Create' : 'Save',

                )); ?>

        </div>


<?php $this->endWidget(); ?>




But I still get the exact same problem, no error message in Firebug.

I got lost, are you still getting nested forms, or is that fixed now?

haha sorry, TMI I guess.

That’s fixed, actually, everything is fixed except one thing.

It doesn’t save the extra fields I have in my form. I’m browsing the forums right now to find the answer to this, I’m pretty sur you answered that already somewhere.

Thanks for the support!

I think the extra fields get to your controller as normal POST params. try loggin the contents of $_POST they should be there. if they are then check your rules and validation errors.

I am stuck here too.

I made the complex workflow and everything is fine when I load the widget alone in a page. But when I load it inside a crud with another forum, nothing seems to work. I choose one photo, and it didn’t make anything. But when i click on upload, seems that the submit button is working for the entire forum and yii try to create a new item from my crud (try to submit the form).

My widget is in a somemodel/_form page, and I made what is written here (use the ‘formView’ => ‘application.views.somemodel.form2’), and in form2 i copy the form.php from the extension and deleted the beginForm and endForm.

What else can I do to make it work?

Thanks

Leo

Let us see your files, the view the custom formView and the generated HTML, also check if there are any javascript errors.

Hello! Thanks for your reply. I can´t see any JS error, but some css errors. Here is my _form and my formUpload (formview).