Thread

This looks good man.  Maybe we can get Fred at nGen to give his thumbs up on this modification.  Thanks for sharing!

This looks good man.  Maybe we can get Fred at nGen to give his thumbs up on this modification.  Thanks for sharing!

It’d also be cool if someone could get this injected into EE’s pop-up “Upload File” window…for those who want to use the default upload options. I tried some time ago to dig around there and I couldn’t figure it out without hacking the core.

This looks good man.  Maybe we can get Fred at nGen to give his thumbs up on this modification.  Thanks for sharing!

It’d also be cool if someone could get this injected into EE’s pop-up “Upload File” window…for those who want to use the default upload options. I tried some time ago to dig around there and I couldn’t figure it out without hacking the core.

It’s probably possible with the use of the show_full_control_panel_end hook provided that you check for the page that you’re on.

Anybody give this a run successfully?

This looks very nice…I was just contemplating this approach as well as the article from wits.sg ...great number of people have issues using FTP..understanding how to use the application…have to install it etc etc. so this would be great! 😊

Is it doable using SAEF?
Thanks for sharing!

This looks very nice…I was just contemplating this approach as well as the article from wits.sg

I was too, actually…in the end I didn’t go that route ‘cause I wanted to keep the file field’s behavior of integrating with the publish form’s submit action. Using the Flash plugin means uploads would be a different action than submitting the entry, and I thought that would make things a little confusing in the admin area…my opinion only, 2¢, etc… 😉

As far as the SAEF, I can’t think of a reason why this method wouldn’t work.

Is this available for download anywhere? Have a need for this on a client site.

Is this available for download anywhere? Have a need for this on a client site.

No, mostly because of licensing and the fact that the server needs a PHP extension installed. But I wrote fairly specific instructions to help you get it going. 😉

Is this available for download anywhere? Have a need for this on a client site.

No, mostly because of licensing and the fact that the server needs a PHP extension installed. But I wrote fairly specific instructions to help you get it going. 😉

Thank you.

I’ll have to do without for now then. With my PHP skills -or lack there of- would likely end up breaking something. lol

Hello rmedek,

Thank you so much for all your efforts here. I have just followed your instructions to the dot, but have a few (hopefully what are minor) questions / problems.

1.
You say to create an 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();
?>

Where do I put this file on my server ? as I am not sure where the call for using this is coming from ?

2.
Also, the final part where you edit the ngen_file_field.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();


// add identifier
var uuid = jQuery.uuid();
$('form#entryform').prepend('<input name="UPLOAD_IDENTIFIER" type="hidden" value="' + uuid + '" />');    


// fire script
$('form#entryform').uploadProgress({
    jqueryPath: 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js',
    uploadProgressPath: '/system/extensions/fieldtypes/ngen_file_field/scripts/jquery.uploadProgress.js',
    start:function(){
        $('#uploading').animate({height: 'show', opacity: 'show'}, 500);
        $('input[type=submit]').attr('disabled',true);
    },
    uploading: function(upload) {$('#percents').html(upload.percents+'%');},
    interval: 2000,
    uuid: uuid,
});

Do you simply add this script to the js file (top, bottom, middle - does it matter?) or is it replacing a specific section ?

(Sorry, almost novice in programming land, so there are some things that aren’t obvious).

3.
Am I correct in presuming that I would then simply create my custom file fields using the nGen File Field option?

4. And lastly, does this process also allow for other file uploads such as audio or movie ?

Thank you again and I very much can’t wait to hear from you.

... and a further key question I just realised…

You mentioned that you used the uploadprogress PHP extension ...

Did you actually install this on your web server before any of this method can work ?

Or is there some way of determining whether my web server has this extension installed ? It seems very tricky at this point to have to dig into my web server – I got most of the way and feel like I’ve hit a wall :-(

Have you any simple solutions or further suggestions to understand how this php upload extension can be treated or tested?

(Anyone else out there manage to get this up and running - or even better, devise an EE plugin / extension ???;-)

Thank you again.
Alison

Hey Alison,

You mentioned that you used the uploadprogress PHP extension ... Did you actually install this on your web server before any of this method can work?

Yes, you need this installed to use this method.

is there some way of determining whether my web server has this extension installed?

I just sent an email to my hosting provider (I have a VPS setup at Servint) and asked them about it. They had it installed in just a few minutes…Servint is awesome and hopefully your hosting is, too. 😉

Have you any simple solutions or further suggestions to understand how this php upload extension can be treated or tested?

The PHP page on it has some helpful direction but the best thing I read to understand it was a comment left on that page.

You say to create an uploadprogress.php file with the following code. Where do I put this file on my server ? as I am not sure where the call for using this is coming from?

I put it in the same folder as the ngen_file_field extension, but you can put it anywhere you want. The file gets called in the uploadprogress.js file (the file that does most of the work, found here

Also, the final part where you edit the ngen_file_field.js. Do you simply add this script to the js file (top, bottom, middle - does it matter?) or is it replacing a specific section ?

I think I put it at the end, just to make sure I’d realize it was a mod later. It doesn’t replace anything.

Am I correct in presuming that I would then simply create my custom file fields using the nGen File Field option?

Yep!

does this process also allow for other file uploads such as audio or movie ?

Yep! It tracks the upload of whatever you are uploading with nGen.

Hope that helps…

Hello ! Thank you so much for the detailed reply. I am getting there ... but still need some help.

My web host has enabled the uploadprogress extension, so we are good there 😊

Now I can see the progress iframe by default below my submit buttons (see attached image file) ... that is to say, “uploading files with the question mark symbol” appears without clicking submit. Is that normal ?

And, when I do hit submit, I get a new window open with simply this message:
“Invalid GET Data”

Any idea here?

Otherwise, I have basically done this procedure:

1. Get Web Host to install PHP uploadprogress extension.
2. Increased memory_limit, post_max_size and upload_max_filesize in PHP.ini
3. Added header(“connection: close”); to very top of my system/index.php file
4. Install nGen and FieldFrame extensions, enable.
5. Ensure jQuery for the Control Panel is enabled.
6. Added the extra 2 scripts to ngen_fil_field scripts folder and to the ft.ngen_file_field.php

$this->include_js('scripts/jquery.uuid.js');
$this->include_js('scripts/jquery.uploadProgress.js');

7. Created the uploadprogress.php and placed in the ngen_file_field extension folder on same level as ft.ngen_file_field.php file.

8. Replaced the relevant ‘function(e, options)’ in the uploadprogress.js as per your code:

jQuery.uploadProgress = function(e, options) ... etc

... or was this an added function? as I replaced the original function with yours?

9. Added your javascript to the end of the ngen_file_field.js (directly before these last few lines

nGenFile = {};
    nGenFile.lang = {};
    nGenFile.thumbpaths = {};
    
})(jQuery);

10. I have no TinyMCE in the particular form I am testing.

Side queries that may be related to the above “Invalid GET Data” ???:

In the javascript file, line:

uploadProgressPath: '/system/extensions/fieldtypes/ngen_file_field/scripts/jquery.uploadProgress.js',

I have changed the /system/ to my system folder name. That is correct, right?

In the css file, do I need to create specific css in order to create the ‘div’ or ‘iframe’ where the upload progress bar appears / hides ? or should a default actually work / appear without me doing anything here ?

Can you perhaps paste your css relating specially to the upload div / iframe for quick reference ??

Otherwise, any guidance as to getting the final bugs sorted out would be much appreciated.

Again. Thank you. Alison

Now I can see the progress iframe by default below my submit buttons (see attached image file) ... that is to say, “uploading files with the question mark symbol” appears without clicking submit. Is that normal ?

no, the “question mark” thing you are talking about looks like the text encoding isn’t handling the ellipses (…) — that is, is should say “Uploading files…” not “Uploading files <?>”

And, when I do hit submit, I get a new window open with simply this message: “Invalid GET Data” Any idea here?

that could be a zillion things…is a uuid being output? are the paths right? if you check out the headers in Firebug or Webkit’s inspector, do they check out? my first hunch is it’s a UUID issue. if you’re linking to a “uuid.js” make sure you’re actually using it — the script I linked to was a simple jQuery plugin that created a UUID for me.

Replaced the relevant ‘function(e, options)’ in the uploadprogress.js as per your code:

jQuery.uploadProgress = function(e, options) ... etc

... or was this an added function? as I replaced the original function with yours?

yep, that should replace the original code, as the original used a different PHP extension.

In the javascript file, line:

uploadProgressPath: '/system/extensions/fieldtypes/ngen_file_field/scripts/jquery.uploadProgress.js',

I have changed the /system/ to my system folder name. That is correct, right?

yep

In the css file, do I need to create specific css in order to create the ‘div’ or ‘iframe’ where the upload progress bar appears / hides ? or should a default actually work / appear without me doing anything here ?

the iframe doesn’t actually appear anywhere…it’s only injected into the page to make the ajax call as a workaround in Safari. there’s no default appearance for the bar, although the HTML that makes up the “uploading files…” bit and the progress bar is created in the jQuery code added to the ngen code.

the CSS is custom but it’s really not much more than background images, I added the CSS to the ngen styles in the fieldframe folder:

/* ---------------------------------------------------------
    upload progress
--------------------------------------------------------- */

#uploading p {
    margin: 1em 0 5px 14px;
    font: bold 12px/1em arial, 'lucida grande', sans-serif;
    color: #fff;
    text-align: left; }

.bar {
    width: 300px;
    height: 20px;
    margin: 0 auto; }

#progress {
    background: url(../images/progressbar-bg.gif) no-repeat left top;
    position: relative; }

#progressbar {
    width: 0;
    position: absolute;
    top: 2px;
    left: 2px;
    height: 16px;
    background: url(../images/progressbar.gif) no-repeat left top;
    line-height: 0; }

hope that helps…

Wow. You are speedy. I’ll take a look and double check over everything and get back to ...
Thank you.