Thread

... hi again.

Hopefully this is not so painful ...

When I checked FireBug head content for my EE publish form, there are calls to:
the base ajax.googleapis.com jquery script and jquery ui script but I can’t see the direct script call to any of the livequery, ngen_file_field, uploadProgress or uuid scripts ?

Should there be also visible direct calls to these scripts listed ?

Yet, funnily enough the css file is found ...

/system/extensions/fieldtypes/ngen_file_field/styles/ngen_file_field.css

It is called in the same place within the ft.ngen_file_field.php and I have double checked that the actual js files are in fact within the ngen extension scripts folder.

$this->include_css('styles/ngen_file_field.css');
$this->include_js('scripts/jquery.livequery.js');
$this->include_js('scripts/jquery.uuid.js'); // Alison added
$this->include_js('scripts/jquery.uploadProgress.js'); // Alison added
$this->include_js('scripts/jquery.ngen_file_field.js');

Any next guesses on whether this could / should be modified ?

Alison

... back again. Sorry to trouble. Sometimes I feel the need to give a running commentary in case anyone else needs similar step-by-step follow up of issues.

I changed the eclipses on the Uploading files… in the jquery.ngen_file_upload.js file to

Uploading files…

so it is ascii code for eclipses – this fixed the text encoding issue I had.

And contrary to my message above about not finding the javascript calls ...

I did end up finding the javascripts. They were not in the header area but inserted within the body of my form page, below the form and before the body close tag.

So, now, my final problems that remain are the actual ‘Uploading File…’ text remains visible on my form below the submit buttons - at all times, ie before the form is submitted.

I am not sure where or what to start looking for to fix this.

Also, when I submit, there is no animation or percents counting, and then no file is actually uploaded.

I am still looking around, but perhaps you could point me to a possible hiccup here as to what this might mean ... ???? Again. Thank you thank you for your time.

Alison

Okay.

This is where I am at:

I have double checked all your notes.

I may have discovered some issue(s)... Basically for my test form that has a ngen file field, I continue to have the ‘Uploading File…’ appear under the ‘Quick Save’ and ‘Save’ button (ie the ‘hide’ is only working on the first button which is the ‘Preview’ button).

On your sample movie you only have the one ‘Save’ Button.

Could there be a major script issue related to this which effects the entire form’s upload progress bar if there is more than one submit type button ?

Also, when I do select a file for upload in the ngen file field, and press the actual submit button… there is no ‘progress percent’ or sign of progress and no file is actually submitted to the server ?? I think this may be related to the above issue because of the multiple submit type buttons ???

This is where I am at. Can you please possibly shed any light from great pearls 😉
PS. The first picture below is to show that the PHP uploadprogress is installed on my server. Second picture is of my form submission buttons to show that there are issues.

Thanks.
Alison

On your sample movie you only have the one ‘Save’ Button.

Could there be a major script issue related to this which effects the entire form’s upload progress bar if there is more than one submit type button ?

Hey that’s a good point…I am using the Publish Tweeks extension which gives me only one submit button. The script inserts the bar — then immediately hides it — using this code in the JS:

// upload progress HTML
$('form#entryform input[type=submit]').after('<div id="uploading">Uploading files…<span></span><div id="progress" class="bar"><div id="progressbar"> </div></div></div>');
$('#uploading').hide();

So you could change “form#entryform input[type=submit]” line to something else that won’t freak out over more than one button, maybe:

$('form#entryform').prepend('<div id="uploading">Uploading files…<span></span><div id="progress" class="bar"><div id="progressbar"> </div></div></div>');

…or better yet just install the Publish Tweeks extension because that thing is awesome.

Also, when I do select a file for upload in the ngen file field, and press the actual submit button… there is no ‘progress percent’ or sign of progress and no file is actually submitted to the server ?? I think this may be related to the above issue because of the multiple submit type buttons ???

It’s probably the multiple bars throwing the script, not the multiple buttons per se. They wouldn’t cause any issue because the PHP extension only checks the contents of the submitted form (not possible to submit more than one thing at a time). At least that’s where I would start.

Hi again rmedek,

Thank you so much for posting back.

I have added the publish tweeks extension, which works a treat in removing the extra buttons. Thank you!

However, I am still trying to cure the problem that I get when I hit submit, I still end up with a blank page and simply the words: “Invalid GET Data”.

I have ruled out my actual webserver upload progress as this tests fine (via an upload form independent to EE).

In the Publish Submission Control Panel of EE I know that the process starts: I can see the fade (opacity) script in effect in the submitbox and the div tag placeholder for uploading is shown. (see attached image below)

start:function(){
$('#uploading').animate({height: 'show', opacity: 'show'}, 500);
$('input[type=submit]').attr('disabled',true);
},

$('form#entryform input[type=submit]').after('<div id="uploading">Uploading files…<span></span><div id="progress" class="bar"><div id="progressbar"> </div></div></div>');

But I think the code after this is not being fired or successful as I can’t see any ‘%’ or progress bar although these tags are being included in the HTML.

uploading: function(upload) {$('#percents').html(upload.percents+'%');},
interval: 2000,
uuid: uuid,

I have used Firebug to see behind the form and I can see the hidden input field for ‘UPLOAD IDENTIFIER’ is included in the form.

BUT strangely ... if I do a simple ‘view source’ in the browser on the form page the hidden input field is not found ??? Is this normal ???

Also

I can see via the Firebug html console that there is also a hidden “XID” input field.
But strangely I can also see this when I do a simple ‘view source’ in the browser.

I do also notice that when I end up with the “Invalid GET Data” page that the page URL has the X-Progress-ID included at the end. Is this correct ?

<a href="http://www.website.com/system/index.php?S=6221ab433a57b21d17009396890c101e728e67df&C=publish&M=new_entry?X-Progress-ID=aeaeee2684c877dd29af143c4136cef8">http://www.website.com/system/index.php?S=6221ab433a57b21d17009396890c101e728e67df&C=publish&M=new_entry?X-Progress-ID=aeaeee2684c877dd29af143c4136cef8</a>

I’m sorry that I can’t figure this one out. Can you think of anything else I should be checking like the processURL or ... ???

I have cross checked with my other forms that don’t include ngen file fields to see for any incongruities, but none seem to appear.

Thank you again for helping me work this one out.
Alison

Something is up with your actual uploadprogress.php code or setup. If it’s working right, in the headers you’ll see the server polling the php script…it’ll look something like “XHR loading http://domain.com/system/extensions/ngen_file_field/uploadprogress.php?id=17757992753975”. That last variable in the URL is the uuid.

Hello again 😊

All along I have been wondering about this uploadprogress.php ... but I really can’t pinpoint anything different to your instructions.

I have created a standalone uploadprogress.php file with the following code

<?php
    header("Cache-Control: no-cache, must-revalidate");
    header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

    if (@$_GET['id']) {
        echo json_encode(uploadprogress_get_info($_REQUEST['id']));
        exit();
    }

    if (@$_POST['UPLOAD_IDENTIFIER'])
        exit();
?>

... and I have placed this file it in the ngen_file_field folder on the same level as the ft.ngen_file_field.php file as per your suggestion.

What I don’t understand is where the call is to this file. I can’t see anywhere in the jquery.uploadProgress.js or the jquery.ngen_file_field.js any reference to this uploadprogress.php.

The only other point that I can see a possible problem is the

progressUrl: "/progress",

within the jquery.uploadProgress.js file.

Should this be something else ? My entire website concerned is self contained, ie so there is no external webserver or domain here.

I’m sorry for being a complete ding-dong here but I can’t see any reason for the discrepancy.

Can you suggest how else I can manage the uploadprogress.php ?

Thanks again.

What I don’t understand is where the call is to this file. I can’t see anywhere in the jquery.uploadProgress.js or the jquery.ngen_file_field.js any reference to this uploadprogress.php.

The only other point that I can see a possible problem is the

progressUrl: "/progress",

within the jquery.uploadProgress.js file.

Should this be something else ?

Yes, that should be the path to uploadprogress.php. You’re not seeing any reference to it because you didn’t put it in.

Good luck, I am a little pressed for time lately so you’re on your own. 😉

Thanks rmedek. Good point, well made .... 😉 I appreciate your guidance so far ... I always cringe having to pester people. So thank you for your efforts. 😊

Not trying to shut you off, just warning you that I’m not the best guy to count on for consistent, timely customer support. But if it encourages you, I have the programming skills of a houseplant so I’m sure you will get this working!

Hi rmedek

This looks fantastic and is exactly what I need on a project I’m currently working on. I have just one question:

Do you know if this is going to play nicely with nGen File Field when used with FF Matrix?

Cheers

Jim

Do you know if this is going to play nicely with nGen File Field when used with FF Matrix?

I have no idea, but I don’t see why it wouldn’t. What I would do is set it up in a FF Matrix and then see what happens. 😉

Just thought I should mention the only real issues I’m seeing at the moment are errors with TinyMCE fields (and then, only in Safari). TinyMCE somehow throws an error when the file field JS is used, and it’ll occasionally freeze up click events in Safari. So if you’ve got a huge need for TinyMCE fields, this file mod, and a hard-core Mac user as a client I’d think twice about incorporating everything together.

Hey journalistone

Did you get this working? I’ve got up to the point where it hides the buttons and starts displaying the progress but with no percentage indication and unfortunately the “Invalid GET data” on the final page.

Here’s my error in Firebug:

uncaught exception: [Exception… "Component returned failure code: 0x80004003 
(NS_ERROR_INVALID_POINTER) [nsIDOMHTMLFormElement.removeChild]" nsresult: "0x80004003 
(NS_ERROR_INVALID_POINTER)" location: "JS frame :: <a href="http://www.mydomain.com/system">http://www.mydomain.com/system</a>
/index.php?S=18a23c2cd4ce05087cb28f9676c6433b0664aefb&C=edit&M=edit_entry&weblog_id=5&
entry_id=46493#topBar :: anonymous :: line 3973" data: no]

Any ideas?

Hey Jim, is your script accessing the .php script with a proper UUID? It needs the unique identifier for it to work…not sure that this is why you’re getting the “invalid GET data” error but I seem to remember one of the things which would produce that error for me was the lack of a UUID.

I don’t think it needs a “proper” UUID, just a unique ID of some sort, but I used a jQuery plugin to produce one and it was easy and painless.