[Extension] Xupload

Yii 1.1 Extensions
3

Hello,

Nice extension, and working great as is. I even used the EXUploadAction file.

However, I would like to integrate this extension in a wider project, and use it as the upload solution for profile photos. The thing is that i need to change the filename (when upload completed) according to a additional data from the form. With the onComplete callback i should update the profile photo.

Since now, i managed to change the filename in the EXUploadAction file (i don’t want to temper with the extension code) using a dummy name, but the callback always gives me the original filename.

How can I send an additional data with the form ? How to rename the file so the onComplete callBack returns the modified name ?

Here is the onComplete callback


'options' => array('onComplete' => 'js:function (event, files, index, xhr, handler, callBack) {

        $("#photo").html(\'<img src="../../images/profiles/\'+files[index].name + \'"/>\' );

                        }'

),

Best Regards,

xavier

4

The files[index].name refers to the current html file field objects, because the name changed in the server and not on the client side this variable is not updated.

What you should use instead is handler.response which holds the JSON response from the server, this JSON is constructed in the action, for XUploadAction:


line 30. echo json_encode(array("name" => $model->name,"type" => $model->mime_type,"size"=> $model->getReadableFileSize()));

There you can add/remove/change any information you want to send back to the client here.

In your specific case, if you changed $model->name before that line, then the JSON already holds the correct name. so your code should look like:


'options' => array('onComplete' => 'js:function (event, files, index, xhr, handler, callBack) {

        $("#photo").html(\'<img src="../../images/profiles/\'+handler.response.name + \'"/>\' );

                        }'

),

Thumbs up, follow if you like this extension, any feedback apreciated

5

Hi,

It’s working like a charm !!! Many thanks !!!

Is ti possible to pass additional parameters from the form ?

6

check new version of http://aquantum-demo.appspot.com/file-upload there you can have thumbs directly from your local disk drive, and after upload you also can have resized image.

7

By the way, for those interested in… my onComplete callback should refresh the image in the div when new file is uploaded. Since the file is renamed with the same name, the image never changes (because of the cache surely).

Well, here goes the work around, just add a time stamp as a parameter for the image file url. This will force a GET.





'options' => array(					

	'onComplete' => 'js:function (event, files, index, xhr, handler, callBack) {

	d = new Date();

        $("#photo").hide().html(\'<img src="../../images/profiles/\'+handler.response.name +\'?\'+ d.getTime() +\'"/>\' ).fadeIn(\'fast\');

                        }'

),

Cheers

8

Waow, if there is a thumbelize, resize and crop option this is going to be a killer extension !!!

9

I cant find where they mention the resize image thing.

10

Check the wiki, there are several tutorials:

11

Can you post simple example how to use it with Yii?

It looks and works great, but I dont know how to start with this…

Just simple controller code and simple view. Please :)

Can you do this?

How to configure upload path by the controller? (I need pass path so safety for every user)

12

There is an entire Yii project (demo) in the downloads, what is it you are missing?

13

sorry, I didn’t see it!

14

Hi,

How can I call JS code when the queue is empty?

15

Hi,

great extension, but it would be even better to have some more documentation on this.

For example, i’d like to know how to get functions on the example-site on example-site at appspot, like alert “File to small!”, etc.

Please extend the demo in the extension-zip.

Thx

16

The documentation in the yii site its about the installation and basic usage, the documentation your guys are asking for, its the jquery documentation.

The answers to all this questions are in the wiki, please take a look there.

17

Hi, anybody know how to implement multiple instances of the widget in a single page, I’ve created 2 juidialog and loaded a widget on each one from diferent views, but when a add I file to the second xupload widget it is queued to the first one, so how do I add files to each one separately, thank you

18

The jquery plugin has been updated to a new version, however the new documentation lacks many examples for common task, the old wiki has been restored and the examples are now back for the old version, please vote here to update or not the extension. take into account the lack of documentation for the new version.

19

The wiki for the original jquery plugin has been restored

You can find the answer to your specific need [here](https://github.com/blueimp/jQuery-File-Upload/wiki/Multiple-File-Input-Fields-in-one-Form "multiple input fields")

20

Hi.

I’m have a problem whis that extension. I can’t define callback js function.




$this-&gt;widget('ext.xupload.XUploadWidget', array(

					'url' =&gt; Yii::app()-&gt;createUrl(&quot;admin/images/upload&quot;, array(&quot;type&quot; =&gt; $this-&gt;getId(), &quot;item_id&quot; =&gt; $model-&gt;m_id)),

                    'model' =&gt; new Images,

                    'attribute' =&gt; 'images',

					'multiple' =&gt; true,

                    'htmlOptions'=&gt;array('name' =&gt; 'images'),

                    'options' =&gt; array

                        'onComplete' =&gt; 'js:function (event, files, index, xhr, handler, callBack) {

                            console.log(&quot;upload finish&quot;);

                        }',

                    ),

));

I have that error




Uncaught TypeError: Cannot read property 'name' of null     query.fileupload-ui.js:97

Snippet of this file here




this.removeNode = function (node, callBack) {

            if (node) {

                node.fadeOut(function () {

                    $(this).remove();

                    if (typeof callBack === func) {

                        try {

                            callBack();

                        } catch (e) {

                            // Fix endless exception loop:

                            $(this).stop();

                            throw e;

/*jquery.fileupload-ui.js:97Uncaught TypeError: Cannot read property 'name' of null*/

                        }

                    }

                });

            } else if (typeof callBack === func) {

                callBack();

            }

        };

Please help!

21

Can you please show the generated javascript code?

22

callback contains:




function () {

                handler.initDownloadRow(event, files, index, xhr, handler, function () {

                    if (typeof handler.onComplete === func) {

                        handler.onComplete(event, files, index, xhr, handler);

                    }

                });

            }

this inthe source of page:




/*<![CDATA[*/

jQuery(function($) {

jQuery("#images").MultiFile({'accept':'jpg|png|gif','max':10});

jQuery('#Images_form').fileUploadUI({'onComplete':function (event, files, index, xhr, handler, callBack) {

                            console.log("upload finish");

                        },'uploadTable':'#files','downloadTable':'#files','buildUploadRow':function (file, index) {


	return $('<tr>'+


		'<td class="filename">'+file[index].name+'</td>'+


		'<td class="filesize">'+file[index].name+'</td>'+


		'<td class="file_upload_progress"><div></div></td>'+


		'<td class="file_upload_start" style="display:none">'+


			'<button class="ui-state-default ui-corner-all" title="Start Upload">'+


				'<span class="ui-icon ui-icon-circle-arrow-e">Start Upload</span>'+


			'</button>'+


		'</td>'+


		'<td class="file_upload_cancel">'+


			'<button class="ui-state-default ui-corner-all">'+


				'<span class="ui-icon ui-icon-cancel">Cancel</span>'+


			'</button>'+


		'</td>'+


	'</tr>');


},'buildDownloadRow':function (files, index) {


	return $('<tr><td>' + files.name + '<\/td>' +


    	'<td class="file_upload_progress"><div><\/div><\/td>' +


    	'<td class="filesize">'+files.size+'</td>' +


        '<td class="file_upload_cancel">' +


        '<button class="ui-state-default ui-corner-all" title="Cancel">' +


        '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +


        '<\/button><\/td><\/tr>');


}});

});

/*]]>*/

</script>