[Extension] Xupload

nightmove · June 1, 2012, 2:26pm

Unfortunately, firebug doesn’t show anything. Just nothing happens. Even the “Save” button at the end of my view doesn’t work. If I comment out the widget, everything works, but with the widged, nothing

First i thought its maybe because of form-inside-form. But the widget doesn’t print any form, only an input, right?

I have no clue, what to do!

florinp · June 1, 2012, 2:57pm

manuelpm:

Asgaroth:

Thank you so much for your help, it is working now, now I have a problem with fileTypes, I have this code:
$uploadm = new XUploadForm;

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

                    'url' => Yii::app()->createUrl("site/uploadP"),

                    'model' => $uploadm,

                    'attribute' => 'file',

                    'multiple' => false,

					'options'=>array(

						'completed'=>'js:function(){location.reload(true);}',

						//'sent'=>'js:function(){location.reload(true);}',

						'maxNumberOfFiles'=>1,

						'maxFileSize'=>3000000,

						'acceptFileTypes'=>'/(\.|\/)(jpg|png)$/i'

					)

					


));
it throws ‘this.options.acceptFileTypes.test is not a function’, now i read in git that is because i cant use the ‘’ but if i dont use them php throws unexpected /, any ideas anyone?

Thanks so much

Hi manuelpm,

I have same problems as you, did you find any solution?

Thanks

Asgaroth · June 1, 2012, 8:48pm

The widget does indeed render a form, here is a wiki about sending additional form data.

nightmove · June 1, 2012, 10:19pm

Thanks Asgaroth but I am having no clue how to achieve a working widget, even with the wiki. My view consist of a big form with different data. In between I’d like to have this upload to add up to 4 images. Any hints how I can set up the widget to work inside my form?

florinp · June 2, 2012, 2:50pm

Hi

I’m trying to use this extention for my gallery but the option “acceptFileTypes” doesn’t work, can you kindly advice how to limit file types to use only jpg and png? I read the wiki but i get same errors in firebug “this.options.acceptFileTypes.test”

Thanks

Asgaroth · June 2, 2012, 5:38pm

This widgets is for asynchronous file upload, meaning you can start to upload some files while adding other files for example, It looks like your use case is abour syncrhonous file upload with some other data.

If thats correct, you only need to add 4 <input type="file"> to your normal form, if all you want its a pretty file field you can take a look at http://filamentgroup.com/lab/jquery_custom_file_input_book_designing_with_progressive_enhancement/

Asgaroth · June 2, 2012, 5:40pm

Can you show us some code?

normaly your regex should like like this:


'acceptFileTypes' => "'/(\.|\/)(jpe?g|png)$/i'",

florinp · June 2, 2012, 7:00pm

Hi,

Thanks for your quick response, here is my code:

View:




<?php


$uploadm = new XUploadForm;


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

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

    'model' => $uploadm,

    'attribute' => 'file',

    'multiple' => true,

    'options' => array(

        'maxFileSize' => 3000000,

        'acceptFileTypes' => "'/(\.|\/)(jpe?g|png)$/i'",

    )

));

?>

The source:


<script type="text/javascript">

/*<![CDATA[*/

jQuery(function($) {

jQuery('#XUploadForm-form').fileupload({'maxFileSize':3000000,'acceptFileTypes':'\'/(\\.|\\/)(jpe?g|png)$/i\''});

});

/*]]>*/

</script>

I tried with this regex but doesn’t work, in the console I get this error: this.options.acceptFileTypes.test is not a function.

Asgaroth · June 2, 2012, 7:15pm

This works for me, you can see any type of file in the browse window, but when you select the files the widget warns you and allows you to upload only valid file types




<?php


$uploadm = new XUploadForm;


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

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

            'model' => $uploadm,

            'attribute' => 'file',

            'multiple' => true,

            'options' => array(

                'maxFileSize' => 3000000,

                'acceptFileTypes' => "js:/(\.|\/)(jpe?g|png)$/i",

            )

        ));

?>

florinp · June 2, 2012, 7:27pm

Asgaroth:

This works for me, you can see any type of file in the browse window, but when you select the files the widget warns you and allows you to upload only valid file types




<?php


$uploadm = new XUploadForm;


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

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

            'model' => $uploadm,

            'attribute' => 'file',

            'multiple' => true,

            'options' => array(

                'maxFileSize' => 3000000,

                'acceptFileTypes' => "js:/(\.|\/)(jpe?g|png)$/i",

            )

        ));

?>

Hi,

Yes it works, thanks a lot!

meo · June 4, 2012, 11:23am

Hi! Is there someone that used the option "formData" to add more data taken from the page?

Thanks,

fabio

florinp · June 7, 2012, 4:43pm

Hi Asgaroth,

I’m back with one question:

How could I change the name of files before are saved?

Currently i have something like this:


$model->name = "{$prefix}-{$randomNum}.{$model->extension}";

But how can I have?


$model->name = "{$image->id}-{$randomNum}.{$model->extension}";

It is possible to achieve this in xupload action?

Thanks, Flo

Asgaroth · June 7, 2012, 5:56pm

florin p:

Hi Asgaroth,

I’m back with one question:

How could I change the name of files before are saved?

Currently i have something like this:
$model->name = "{$prefix}-{$randomNum}.{$model->extension}";
But how can I have?
$model->name = "{$image->id}-{$randomNum}.{$model->extension}";
It is possible to achieve this in xupload action?

Thanks, Flo

XUploadAction its just an example of handling simple file uploads, you should normaly, either modify the XUploadACtion (not recommended) or create your own Upload Action to handle all your requirements.

nightmove · June 9, 2012, 3:14pm

Hello,

I am having a problem with the event that is triggered after each uploaded successfully completed. I tried events like ‘onComplete’ and ‘fileuploadcomplete’ but nothing triggers my alert box. Do I have to uncommment the events in jquery.fileupload.js?




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

  'url' => Yii::app()->createUrl('offer/upload', array(

   			'offer_id' => $offerId,

  )),

  'model' => $model,

  'name' => 'image',

  'attribute' => 'file',

  'multiple' => true,

  'options' => array(

            	'completed' => 'function(event, files, index, xhr, handler, callBack) {alert(files);}',

  ),

));

thanks in advance

NeoXidizer · June 10, 2012, 9:09am

Hello.

Why in the description of the topic says "out of date"? We should not use this extension?
How to use variable ‘uploadTemplate’? How to copy original views(upload, form, download) and edit them outside of extension folder?

Thanks

Asgaroth · June 10, 2012, 5:55pm

nightmove:

Hello,

I am having a problem with the event that is triggered after each uploaded successfully completed. I tried events like ‘onComplete’ and ‘fileuploadcomplete’ but nothing triggers my alert box. Do I have to uncommment the events in jquery.fileupload.js?
$this->widget('xupload.XUpload', array(

  'url' => Yii::app()->createUrl('offer/upload', array(

   			'offer_id' => $offerId,

  )),

  'model' => $model,

  'name' => 'image',

  'attribute' => 'file',

  'multiple' => true,

  'options' => array(

            	'completed' => 'function(event, files, index, xhr, handler, callBack) {alert(files);}',

  ),

));
thanks in advance

Check this post

Asgaroth · June 10, 2012, 6:03pm

It was an old post, don’t pay attention, the extension is up to date.
Just copy them to your model views folder, edit them, render them with renderPartial, or include the code inside your normal views. and call the widget like:




<?php

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

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

                    'model' => $model,

                    'attribute' => 'file',

                    'multiple' => true,

                    'uploadTemplate' => '#template-upload' //The upload template id

));

?>

same applies for the download template

Wiseon3 · June 11, 2012, 1:04pm

I’m surprised no one said anything about this. I’ve noticed the same thing. For the image preview to work you need to add the following:




            Yii::app() -> clientScript -> registerScriptFile("http://blueimp.github.com/JavaScript-Load-Image/load-image.min.js", CClientScript::POS_END);

            Yii::app() -> clientScript -> registerScriptFile("http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js", CClientScript::POS_END);

in publishAssets() in the XUpload.php file, after




Yii::app() -> clientScript -> registerScriptFile("http://blueimp.github.com/JavaScript-Templates/tmpl.min.js", CClientScript::POS_END);

renkema · June 13, 2012, 9:03am

Thanks Asgaroth,

This is an excellent extension. You helped me a bunch!

ronyaja · June 18, 2012, 1:14pm

Hello,

I have some problems when trying to submit additional data and then save it into database. I have tried the wiki many times but i still can’t understand how to implement it. Here the simple case, i want to save some of image’s information such as title, caption, and description. Can anyone give me some example about it with ajax or without ajax ?