[Extension] Xupload

Asgaroth · September 27, 2012, 2:17pm

Hesam Khaki:

thanks for your fast response!

I had a look, as you’ve probably noticed, it has duplicated the whole form, and then used the same class for those two. in my case, the widgets are embedded in one form, beside other model attributes, and it doesn’t feel good to have multiple forms in one view for one model! :-? and even if I do so, I’ll had to edit your code in XUpload.php, where you have registered the starter JS for this plugin.

what about the second way? is there any DOM attribute anywhere holding the destination action, so wen can change it in client side? like by checking a checkbox, that attribute would change from ‘uploadImage’ to ‘uploadFile’ ?

alternatively, I’ll try to solve this problem using bootstrap tabs, having different form in each tab, and hoping that no conflicts would happen

You don’t really have 1 model in that view, do you? at minimum you have 2, one for Article, and another for Attachments, Ideally you’d have models for Image, File, etc, as they all have different metadata.

The additional data you have is for the Article right? so the forms can be separated easily, what I’d do Is have the Article form on top, and after that a section containing ‘Article Assets’ or ‘Article Attachments’ which will hold the forms for your other files. Also remember that this is asynchronous upload, since those assets are related to your article you should probably create the article first. please take a look at this wiki for an idea of how to do that.

hesam.khaki · September 27, 2012, 2:59pm

Thank you very much! yes, I’ve read your wiki and it helps a lot. and you are right, I have more than one model, and just wanted to keep them in relatively small form, because of page design issues. fortunately, bootstrap tabs works, and now I have multiple forms in a nice layout wich won’t make user to scroll down a lot.

about the wiki, your explanations where great, and based on that I’m creating a behavior so i wouldn’t have to add addImages() function to every model in my application, just because of DRY and reusability of code in my next projects.

I have another question though, is there anyway we can load this widget with currently uploaded files? which will be used in update scenarios. I haven’t seen anyone ask or say anything about update current images using this widget. or should I create a completely dependent view for managing existing files?

Asgaroth · September 27, 2012, 3:11pm

I think someone already tried that. check this, -and its related- post

hesam.khaki · September 28, 2012, 10:58pm

thank you! somehow haven’t seen that post, really helps. thanks!

cullensun · September 30, 2012, 7:48am

Hi Asgaroth,

Thanks for the Extionsion. Everything was working good. However, I got a problem after I added the following code.

                           &lt;code&gt;//here you can also generate the image versions you need 


	                //using something like PHPThumb





	                Yii::import(&quot;ext.EPhpThumb.EPhpThumb&quot;);


			    &#036;thumb_=new EPhpThumb();


		          &#036;thumb_-&gt;init();


			    &#036;thumb_-&gt;create(&#036;path.&#036;file_image_name)-&gt;resize(110,80)-&gt;save(&#036;path.&#036;file_thumb_name);	&lt;/code&gt;

The thumbnail was generated successfully, but keep getting Error SyntaxError: Unexpected token in front-end, and the following piece of template was executed.

{% for (var i=0, file; file=o.files[i]; i++) { %}

&lt;tr class=&quot;template-download fade&quot;&gt;


    {% if (file.error) { %}


        &lt;td&gt;&lt;/td&gt;


        &lt;td class=&quot;size&quot;&gt;&lt;span&gt;{%=o.formatFileSize(file.size)%}&lt;/span&gt;&lt;/td&gt;


        &lt;td class=&quot;e

Chrome record:

Request URL:http://www.mysite.com/api/imageUpload/upload

Request Method:POST

Status Code:200 OK

Request Headersview source

Accept:application/json, text/javascript, /; q=0.01

Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3

Accept-Encoding:gzip,deflate,sdch

Accept-Language:en-US,en;q=0.8

Connection:keep-alive

Content-Length:2242

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryTWpRfMNYQy9oLQGB

Cookie:PHPSESSID=s54ongnoa5bbdd4rp432pao710

Host:pampersbbfacility.e-crusade.com

Origin:http://www.mysite.com

Referer:http://www.mysite.com/newfacility

User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

X-Requested-With:XMLHttpRequest

Request Payload

------WebKitFormBoundaryTWpRfMNYQy9oLQGB

Content-Disposition: form-data; name="XUploadForm[file]"

------WebKitFormBoundaryTWpRfMNYQy9oLQGB

Content-Disposition: form-data; name="XUploadForm[file]"; filename="img-1.jpeg"

Content-Type: image/jpeg

------WebKitFormBoundaryTWpRfMNYQy9oLQGB–

Response Headersview source

Cache-Control:public, max-age=10800

Connection:close

Content-Length:4315

Content-Type:application/json

Date:Sun, 30 Sep 2012 07:26:45 GMT

Expires:Sun, 30 Sep 2012 10:26:46 GMT

Last-Modified:Wed, 01 Aug 2012 10:46:00 GMT

Server:Apache/2.2.8 (CentOS)

Vary:Accept

X-Powered-By:PHP/5.2.10

Please help me, I have been struggling with it for a long time. Thanks a lot.

cullensun · September 30, 2012, 9:33am

CullenSUN:

Hi Asgaroth,

Thanks for the Extionsion. Everything was working good. However, I got a problem after I added the following code.
                           &lt;code&gt;//here you can also generate the image versions you need 


	                //using something like PHPThumb





	                Yii::import(&quot;ext.EPhpThumb.EPhpThumb&quot;);


			    &#036;thumb_=new EPhpThumb();


		          &#036;thumb_-&gt;init();


			    &#036;thumb_-&gt;create(&#036;path.&#036;file_image_name)-&gt;resize(110,80)-&gt;save(&#036;path.&#036;file_thumb_name);	&lt;/code&gt;
The thumbnail was generated successfully, but keep getting Error SyntaxError: Unexpected token in front-end, and the following piece of template was executed.

{% for (var i=0, file; file=o.files[i]; i++) { %}
&lt;tr class=&quot;template-download fade&quot;&gt;


    {% if (file.error) { %}


        &lt;td&gt;&lt;/td&gt;


        &lt;td class=&quot;size&quot;&gt;&lt;span&gt;{%=o.formatFileSize(file.size)%}&lt;/span&gt;&lt;/td&gt;


        &lt;td class=&quot;e
Chrome record:

Request URL:http://www.mysite.com/api/imageUpload/upload

Request Method:POST

Status Code:200 OK

Request Headersview source

Accept:application/json, text/javascript, /; q=0.01

Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3

Accept-Encoding:gzip,deflate,sdch

Accept-Language:en-US,en;q=0.8

Connection:keep-alive

Content-Length:2242

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryTWpRfMNYQy9oLQGB

Cookie:PHPSESSID=s54ongnoa5bbdd4rp432pao710

Host:pampersbbfacility.e-crusade.com

Origin:http://www.mysite.com

Referer:http://www.mysite.com/newfacility

User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_4) AppleWebKit/537.4 (KHTML, like Gecko) Chrome/22.0.1229.79 Safari/537.4

X-Requested-With:XMLHttpRequest

Request Payload

------WebKitFormBoundaryTWpRfMNYQy9oLQGB

Content-Disposition: form-data; name="XUploadForm[file]"

------WebKitFormBoundaryTWpRfMNYQy9oLQGB

Content-Disposition: form-data; name="XUploadForm[file]"; filename="img-1.jpeg"

Content-Type: image/jpeg

------WebKitFormBoundaryTWpRfMNYQy9oLQGB–

Response Headersview source

Cache-Control:public, max-age=10800

Connection:close

Content-Length:4315

Content-Type:application/json

Date:Sun, 30 Sep 2012 07:26:45 GMT

Expires:Sun, 30 Sep 2012 10:26:46 GMT

Last-Modified:Wed, 01 Aug 2012 10:46:00 GMT

Server:Apache/2.2.8 (CentOS)

Vary:Accept

X-Powered-By:PHP/5.2.10

Please help me, I have been struggling with it for a long time. Thanks a lot.

Hi it ended up the problem was caused by my Mac.

Asgaroth · September 30, 2012, 2:54pm

I{m glad you found out the problem, I could have never guessed it

xphoenyx · October 1, 2012, 8:06pm

Hi Asgaroth,

Having a quite annoying problem while using your extension.

After choosing file to load and pressing “Start” button, it gives me an error within ‘td’ tag with class ‘error’ : “Error SyntaxError: Unexpected token <”. I’m using Google Chrome, OS is Ubuntu.

Trying to solve this problem for several days. As I realized, the reason of appearing this message is <script> tags in ‘download.php’ and ‘upload.php’. But I have no idea, how to manage with it. I looked through the whole topic and other forums and didn’t find any useful information. Please give me some advice, as I am too worn out to search for working file manager extension.

Asgaroth · October 1, 2012, 8:24pm

I don’t understand the problem, can you please show me a screenshot, or some code so I can understand better?

It’s strange that the <script> tags are causing any problem. its the first time Ive been reported something similar, the script tags are there because thats javascript code. its a javascript template that the plugin uses to generate each row of the table with the files to upload. are you talking about the default download and upload templates or are you using custom templates?

do not desperate, and next time ask in the official forum thread (this one) first, its where youll find help faster. at least for this plugin, since this is the only thread that I monitor.

xphoenyx · October 1, 2012, 8:45pm

Thanx for answering so fast.

Sure i can show screenshot: https://docs.google.com/open?id=0B2RDfZTgMPVpMjJJTnZJWnFXclE

Maybe I am mistaken in this case, that the reason is in tags, but I suppose this. And yes, I mean default template files.

I will keep in mind about posting here at first.

Asgaroth · October 1, 2012, 9:53pm

I don’t know, its your upload action also the default XUploadAction? if not It might be a problem with the custom action.

Its weird because in the download.php template, that column isn’t suppose to have anything:


      

            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>

            <td colspan="2"><!-- this is empty... --></td>

for what I can see, the file is actually getting uploaded, isn’t it? whats the json response from the server?

Is the javascript console showing anything?

xphoenyx · October 2, 2012, 10:09am

Asgaroth:

I don’t know, its your upload action also the default XUploadAction? if not It might be a problem with the custom action.

Its weird because in the download.php template, that column isn’t suppose to have anything:
      

            <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>

            <td colspan="2"></td>
for what I can see, the file is actually getting uploaded, isn’t it? whats the json response from the server?

Is the javascript console showing anything?

Both action and model are default templates.

Nope, file is just being ignored by script and nothing appears on server. JS console is empty and i can’t see any response from server.

A couple days ago I found in this post that problem might be in controller acess rules. I have set rule to action ‘upload’, but no result.

Asgaroth · October 2, 2012, 2:20pm

Sorry I can’t help, I never had this issue before, and the error doesn’t makes any sense to me. as a last thing, let me see how you configured your actions and the accessRules in your controller.

Also, when the plugin tries to submit the form, there should a be POST request, you can see that in your network tab if you are using either firebug or chrome console. the response from that request should give us an idea of whats going on.

jacmoe · October 2, 2012, 2:26pm

[color="#006400"]/* Removed the ‘out of date’ subtitle - not needed anymore */[/color]

xphoenyx · October 2, 2012, 2:48pm

Oh, no good…

Sure, please see the file.

Also, screenshot with network information.

Asgaroth · October 2, 2012, 2:59pm

If thats the POST request that is generated when you click the ‘Upload Files’ button, then you have your widget miss configured, as that POST should go to your fileManager/upload action, but it’s going to /images/freon

Let me see the view where you instantiate the widget

xphoenyx · October 2, 2012, 3:16pm

Yup, exactly, these two thumbs in ‘network’ are appearing when I press upload button. But ‘/freon/images’, not ‘/images/freon’

Asgaroth · October 2, 2012, 3:20pm

Well there you go:


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

You are pointing to the wrong action. which is not in the accessRules, thats why you get the error described in the other post. to point to your current upload action you can either:


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

or:


'url' => $this->createUrl("upload"),

xphoenyx · October 2, 2012, 3:53pm

Asgaroth:

Well there you go:
'url' => Yii::app()->createUrl("images"),
You are pointing to the wrong action. which is not in the accessRules, thats why you get the error described in the other post. to point to your current upload action you can either:
'url' => Yii::app()->createUrl("fileManager/upload"),
or:
'url' => $this->createUrl("upload"),

OMG, is it an action name??.. I’m a jerk. Thank you.

Cool. Now it is getting anoter error: “internal server error” (500 error). It just cannot find such path as in ‘url’.

What I can’t understand: ‘url’ parameter is path to image storage, why we match path to action in it?

UPD I can add that I use .htacces (only for rewrite rule) and right now working on Windows. Maybe this can affect extension work.

Asgaroth · October 2, 2012, 4:35pm

Nope, URL parameter of the widget, should point to the action that will handle your uploaded files, like moving them renaming them etc. now, in order to to that, an action needs to know where to put the file, and also whats the public url to access that file.

In the default XUploadAction (which is only an example of a basic base upload logic), receives this as parameters, path and public path respectively, however this action will only serve as a template for your own logic, as it doesnt saves anything to the database or do any other fancy stuff.

Take a look at the XUpload Workflow, which gives you more of an example.