PDA

View Full Version : [2.0] Ext.ux.UploadForm2 File Upload Widget



SilveR316
12 Nov 2007, 8:30 PM
This is a port to ExtJS 2.0 of the excellent work done by jsakalos in this thread: http://extjs.com/forum/showthread.php?t=9305

I updated the code to work in 2.0, and added a few tweaks.
- Progress displays ~ values instead of nothing if the file uploads before 1st progress response is received
- As the files are uploaded, the are checked off (something missing in the 1.x version)
- A few code clean ups and various little fixes

For the most part the initialization code for an upload form should be directly compatible with the 1.x version.


Link: http://bwegrzyn.com/extjs/ux/uploadform2

Obviously there is a bit of work to do, and I will be tweaking the code during the next couple of days. But it is working. Once everything is ready to go, I will probably post a zip file containing everything needed to get you started, including php examples of how to get the progress info and process the uploaded files. For now, you can view the code in the source.

TODO:
- Fix qtips... who knows how qtips work in 2.0?

Note: I havent tested in IE6 (yet) as I don't have access to it on this pc.

tavox
12 Nov 2007, 10:32 PM
I just test it with IE 6 and shows up the error window with the following data:

Line: 922
Char: 5
Error: 'console' is not defined
Code: 0
URL: http://bwegrzyn.com/extjs/ux/uploadform2/

With FF 2 works fine and without errors, congrats nice work.

gUstavo

wm003
13 Nov 2007, 12:03 AM
I just test it with IE 6 and shows up the error window with the following data:

MMh, i just tested the given link above and it works perfect on IE6:D for me without any errors.. maybe already fixed?

Another Question:
Are you going to port the swfUpload-Part to 2.0 also? (Yes, i know there are issues on FF@Linux and discussion, if Flash should be nested in Ext anyway, but i (and i think many others too) would like to use this.) But if not, the already ported upload is great enough! :)

Matt
13 Nov 2007, 6:28 AM
Thank you so much for doing this! I have been waiting for this one. Looking forward to a full zip and working php examples as well. Thanks again!

SilveR316
13 Nov 2007, 7:20 AM
Oops, I left a firebug console.log() in there. I've removed it and it should be working in IE6 now.


I probably will end up porting the flash version over as well, as it seems a bit cleaner, and none of the visitors on the website I need it for run a Linux/Firefox combo.

I have plans for a few other widgets as well, including one that you put directly inline with an existing form as a form field.

wm003
13 Nov 2007, 9:49 AM
I probably will end up porting the flash version over as well, as it seems a bit cleaner, and none of the visitors on the website I need it for run a Linux/Firefox combo.

I have plans for a few other widgets as well, including one that you put directly inline with an existing form as a form field.


yummy!=P~ Can't wait to see it...:D

mschering
14 Nov 2007, 1:54 AM
I've created a simplified version of the orginal widget from saki for 2.0. You can add it to a formpanel as a field and it's not a form itself. This way you can add other form fields in the form as well. Progress is not supported.

You can add it to a form like this:



var uploadFile = new Ext.ux.UploadFile({
inputName : 'attachments'
});
var upForm = new Ext.form.FormPanel({
fileUpload:true,
items: uploadFile,
bodyStyle: 'padding:5px'
});




The code of upload file:


/**
* @copyright Copyright Intermesh 2007
* @author Merijn Schering <mschering@intermesh.nl>
*
* Based on the File Upload Widget of Ing. Jozef Sakalos
*
* This file is part of Group-Office.
*
* Group-Office is free software; you can redistribute it and/or modify it
* under the terms of the GNU General Public License as published by the
* Free Software Foundation; either version 2 of the License, or (at your
* option) any later version.
*
* See file /LICENSE.GPL
*/

Ext.namespace('Ext.ux');

Ext.ux.UploadFile = function(config) {

this.inputs = new Ext.util.MixedCollection();

Ext.ux.UploadFile.superclass.constructor.call(this, config);


};


Ext.extend(Ext.ux.UploadFile, Ext.BoxComponent, {

defaultAutoCreate : {tag: "div"},
addText : 'Browse your PC',
addIcon : 'add.png',
deleteIcon : 'delete.png',
fileCls: 'file',

onRender : function(ct, position){
this.id=Ext.id();
this.el = ct.createChild({tag: 'div', id: this.id});

this.createButtons();

this.createUploadInput();

},

createUploadInput: function() {

if(!this.inputName)
{
this.inputName = Ext.id();
}

var id = Ext.id();

var inp = this.inputWrap.createChild({
tag:'input'
, type:'file'
, cls:'x-uf-input'
, size:1
, id:id
, name:this.inputName+'[]'
});
inp.on('change', this.onFileAdded, this);
this.inputs.add(inp);

return inp;
},

createButtons: function() {

// create containers sturcture
this.buttonsWrap = this.el.createChild({
tag:'div', cls:'x-uf-buttons-ct',
children:[
{ tag:'div', cls:'x-uf-input-ct'
, children: [
{tag:'div', cls:'x-uf-bbtn-ct'}
, {tag:'div', cls:'x-uf-input-wrap'}
]
}

]
});

// save containers for future use
this.inputWrap = this.buttonsWrap.select('div.x-uf-input-wrap').item(0);
this.addBtnCt = this.buttonsWrap.select('div.x-uf-input-ct').item(0);

// add button
var bbtnCt = this.buttonsWrap.select('div.x-uf-bbtn-ct').item(0);
this.browseBtn = new Ext.Button({
renderTo: bbtnCt,
text:this.addText + '...'
, cls: 'x-btn-text-icon'
, icon: this.addIcon
});


},

/**
* File added event handler
* @param {Event} e
* @param {Element} inp Added input
*/

onFileAdded: function(e, inp) {

// hide all previous inputs
this.inputs.each(function(i) {
i.setDisplayed(false);
});

// create table to hold the file queue list
if(!this.table) {
this.table =this.el.createChild({
tag:'table', cls:'x-uf-table'
, children: [ {tag:'tbody'} ]
});
this.tbody = this.table.select('tbody').item(0);

this.table.on({
click:{scope:this, fn:this.onDeleteFile, delegate:'a'}
});
}

// add input to internal collection
var inp = this.inputs.itemAt(this.inputs.getCount() - 1);

// uninstall event handler
inp.un('change', this.onFileAdded, this);

// append input to display queue table
this.appendRow(inp);

// create new input for future use
this.createUploadInput();

},
/**
* Appends row to the queue table to display the file
* Override if you need another file display
* @param {Element} inp Input with file to display
*/
appendRow: function(inp) {
var filename = inp.getValue();
var o = {
id:inp.id
, fileCls: this.getFileCls(filename)
, fileName: Ext.util.Format.ellipsis(filename.split(/[\/\\]/).pop(), this.maxNameLength)
, fileQtip: filename
}

var t = new Ext.Template([
'<tr id="r-{id}">'
, '<td class="x-unselectable {fileCls} x-tree-node-leaf">'
, '<img class="x-tree-node-icon" src="' + Ext.BLANK_IMAGE_URL + '">'
, '<span class="x-uf-filename" unselectable="on" qtip="{fileQtip}">{fileName}</span>'
, '</td>'
, '<td id="m-{id}" class="x-uf-filedelete"><a id="d-{id}" href="#"><img src="' + this.deleteIcon + '"></a>'
, '</td>'
, '</tr>'
]);

// save row reference for future
inp.row = t.append(this.tbody, o, true);
},

onDeleteFile: function(e, target) {
this.removeFile(target.id.substr(2));
},

/**
* Removes file from the queue
* private
*
* @param {String} id Id of the file to remove (id is auto generated)
* @param {Boolean} suppresEvent Set to true not to fire event
*/
removeFile: function(id) {
if(this.uploading) {
return;
}
var inp = this.inputs.get(id);
if(inp && inp.row) {
inp.row.remove();
}
if(inp) {
inp.remove();
}
this.inputs.removeKey(id);

},

getFileCls: function(name) {
var atmp = name.split('.');
if(1 === atmp.length) {
return this.fileCls;
}
else {
return this.fileCls + '-' + atmp.pop();
}
},
clearQueue: function() {
this.inputs.each(function(inp) {
if(!inp.isVisible()) {
this.removeFile(inp.id, true);
}
}, this);
},

/**
* Disables/Enables the whole form by masking/unmasking it
*
* @param {Boolean} disable true to disable, false to enable
* @param {Boolean} alsoUpload true to disable also upload button
*/
setDisabled: function(disable) {

if(disable) {
this.addBtnCt.mask();
}
else {
this.addBtnCt.unmask();
}
}

});

JeffHowden
14 Nov 2007, 2:04 AM
As file uploads in a formpanel are handled via an iframe and not via XHR like the rest of the fields, I see no reason why some manner of progress indicator wouldn't be possible. Additionally, if you use some sort of flash-based file uploader, the iframe wouldn't even be necessary and a progress indicator would be almost child's play.

mschering
14 Nov 2007, 2:11 AM
I didn't say it wasn't possible. It's not implemented.

I'll have to figure out how to do it with PHP on the server side. When I got it working I'll post it here.

wm003
14 Nov 2007, 5:17 AM
I didn't say it wasn't possible. It's not implemented.

I'll have to figure out how to do it with PHP on the server side. When I got it working I'll post it here.

As jsakalos mentioned earlier, he did the progress-indicator by help of the php pecl-extension
php_uploadprogress...

madrabaz
14 Nov 2007, 7:08 AM
Check this side : http://www.swfupload.org/
They released new version of swfupload and it is look very good...

SilveR316
14 Nov 2007, 8:26 AM
That does look very good. I can't wait to try something with it. The posibilities are endless. :D

Matt
14 Nov 2007, 9:50 AM
SilveR316, do you know when you will be able to provide the code with php examples? I don't want to rush you, but I would really love to use this add-on for a project but find myself stuck without the php code. Thank you for your contributions!

SilveR316
14 Nov 2007, 11:46 AM
Here they are (in a nutshell). Nothing too complicated, but it shows you how can process the data and return results.

This is the file you post the upload to (upload.php):

<?php
$return = array('success' => true);
foreach ($_FILES as $key => $values)
{
if (/* add your own error checking here*/)
{
$return['success'] = false;
$return['errors'][$key] = 'test error';
}
move_uploaded_file($values['tmp_name'], $values['name']);
}
echo json_encode($return);
?>


And how to get the progress info in progress.php:


<?php
$data = uploadprogress_get_info($_POST['UPLOAD_IDENTIFIER']);
$data['success'] = true; // add a success flag to the result
echo json_encode($data);
?>


Of course, they are very basic examples. You will have to modify them to suit your needs.

SilveR316
14 Nov 2007, 11:50 AM
One more note, the json_encode() function I used in those examples requires php 5.2 or greater.

If you don't have php 5.2+, you will either have to install the pecl json extension for php or find a class that can encode/decode json.

Matt
14 Nov 2007, 1:01 PM
Thanks!

xpressive
14 Nov 2007, 1:13 PM
hey SilveR316,
thanks for sharing ... I

SilveR316
14 Nov 2007, 2:08 PM
I might have sometime to work on it tonight. I'll see where I get with it.

tavox
14 Nov 2007, 7:50 PM
Oops, I left a firebug console.log() in there. I've removed it and it should be working in IE6 now.


I probably will end up porting the flash version over as well, as it seems a bit cleaner, and none of the visitors on the website I need it for run a Linux/Firefox combo.

I have plans for a few other widgets as well, including one that you put directly inline with an existing form as a form field.
Yes, it works perfectly.

Lucian
15 Nov 2007, 12:55 AM
Hi!...

I try to use this upload widget into a Panel, as an item of it, but no succes.
Can you post an example for this situation?

Otherwise, great script.

SilveR316
15 Nov 2007, 6:10 AM
It's a bit weird because you need to pass in the ID of the container the widget is supposed to render to. That's how the BasicForm class works (as far as I know).

Try creating an empty element div as one of your items, give it an ID, and render the upload form to it.

Matt
15 Nov 2007, 8:44 AM
Since the upload part is already ported over, would it be much more complicated to port over the file manager tree panel as well? Just curious...

SilveR316
15 Nov 2007, 3:42 PM
Probably not too complicated, but I probably won't be doing it unless I have an immediate need for it.

zaunaf
16 Nov 2007, 3:47 PM
Firstly thanks to Saki & Silver for the great widget (and of course Jack and team for the awesome framework) !!

I thought i'd like to show my gratitude by sharing a short tutorial from my experience on how to setup php server side to support this widget, so that any newbies like me will be able to get this widget up and running in their web apps in no time. I'm using xampp, by the way. Here goes :

<< HOW THINGS WORKS >>
Basically, it works just as normal php fileupload works. The widget sends the file via POST request, and it triggers a $_FILE variable on the receiving php script (i.e upload.php). But in addition, there is a php extension called "uploadprogress" for php that generates a file that monitors the upload progress of the file in the tmp directory, in a form of a textfile. The extension also gives you an uploadprogress_get_info() function that accesses that file. The widget uses progress.php to call this function and gives back the JSON info so the widget will be able to display the progress. To differs between files, the widget (CMIIW) uses an ID as the parameter for the uploadprogress_get_info().

<< INSTALL IN WINDOWS >>
Get the latest xampp package (one with php-5.2, otherwise installation will fail).
Download the "upload progress" php extension here : http://pecl4win.php.net/ext.php/php_uploadprogress.dll then put it in extensions directory in php
Change php.ini :
[code]
extension=php_uploadprogress.dll

[uploadprogress]
uploadprogress.file.filename_template=

Overlord
16 Nov 2007, 10:53 PM
Is it possible to add some extra parameters to the request along with the file upload? I'd like to be able to tell my php backend where to upload the files by sending the filepath as a parameter.

SilveR316
17 Nov 2007, 6:35 AM
Is it possible to add some extra parameters to the request along with the file upload? I'd like to be able to tell my php backend where to upload the files by sending the filepath as a parameter.

Yes, you can pass them in the base params config.


baseParams: { cmd:'upload', path: 'root' }

The api for the widget is the same as the 1.x version. Have a look here:

http://aariadne.com/uploadform/

gelleneu
18 Nov 2007, 8:07 AM
Hey SilveR,

thanks for your great work. But I have a question:
In Ext2.0 I add my forms (and other elements) with the config option "items", so like:
"Ext.Window({....
items: new Ext.ux.UploadForm(..),
...
})".

With uploadform2 it doesn't work. I also need a div for rendering.

Do you have a workaround, how I could add an uploadform to a window panel or a region?

SilveR316
18 Nov 2007, 10:24 AM
I think the original intent of this widget was to have it stand alone, but I'm not sure. I just ported this to 2.0 and kept all of the functionality the same.

You can try the work around I posted in this post: http://extjs.com/forum/showthread.php?p=87133#post87133

Overlord
18 Nov 2007, 6:13 PM
Yes, you can pass them in the base params config.


baseParams: { cmd:'upload', path: 'root' }The api for the widget is the same as the 1.x version. Have a look here:

http://aariadne.com/uploadform/

This worked perfectly. Thank you! :D

razy
23 Nov 2007, 6:09 AM
hi there!
im trying to port this to RubyOnRails, and got a little problem: it seems like php's upload_progress plugin is sending different data than mongrel's upload_progress plugin
could you please point me on how do i change your script to accept mongrel's upload_progress data?

thanks

SilveR316
23 Nov 2007, 9:53 AM
How is it returning the data? If it just a json string that has a different format, you can just modify the progress mapping.



var upform = new Ext.ux.UploadForm2('form-ct-in', {
url: 'upload.php',
method: 'post',
maxFileSize: 1048570,
iconPath: '../../../icons',
pgCfg: {
uploadIdName: 'UPLOAD_IDENTIFIER',
uploadIdValue: 'auto',
progressBar: true,
progressTarget: 'under',
interval: 1000,
maxPgErrors: 10,
options: {
url: 'progress.php',
method: 'post'
},
map: {
time_start: 'time_start',
time_last: 'time_last',
speed_average: 'speed_average',
speed_last: 'speed_last',
bytes_uploaded: 'bytes_uploaded',
bytes_total: 'bytes_total',
files_uploaded: 'files_uploaded',
est_sec: 'est_sec'
}
}
});

Overlord
25 Nov 2007, 9:58 PM
Any way to limit the amount of files that they can upload (not just the filesize)?

Overlord
27 Nov 2007, 12:29 AM
Another issue I've run into... I cannot upload files larger than 2MB, even though I've tried setting the max file size to 5, 50, and even 500 MB. Here is my code:


var upform = new Ext.ux.UploadForm2('form-ct-in',{
autoCreate: true,
url: 'php/upload_mymusic.php',
method: 'post',
maxFileSize: 5242880, // Tried setting this also to 52428800 and 524288000
baseParams: {
cmd:'upload'
}
});

wm003
27 Nov 2007, 1:13 AM
perhaps your PHP configuration doesn't allow more than 2 MB per Upload. Try to check your php.INI for the entry

upload_max_filesize

SilveR316
27 Nov 2007, 6:40 AM
Any way to limit the amount of files that they can upload (not just the filesize)?

There is no built in way to limit the number of files someone can upload. Feel free to add it yourself. :)

PHP has a default file size upload limit of 2mb, try increasing it.

george.antoniadis
27 Nov 2007, 7:06 AM
Has anyone tried using any of these components for use in the htmleditor? :)

Overlord
27 Nov 2007, 10:37 AM
Yep, that was the issue. It worked after modifying the php config file. Thanks!

dangreenfield
27 Nov 2007, 1:37 PM
TODO:
- Fix qtips... who knows how qtips work in 2.0?


Quick Tips work (when hovering over the selected filename) if you add the following to the top of the js file.


Ext.QuickTips.init();


Great tool!

deepak
29 Nov 2007, 2:53 AM
This does not behave as a true Form component in Ext 2.0. How do I use it as part of a FieldSet ? or as part of a FormPanel without manually getting into the uploadform2.js?

SilveR316
29 Nov 2007, 6:40 AM
It wasn't really meant to do something like that. It was meant as a standalong widget for uploading files.

I'm working on creating an upload "field" which you can stick in as you would a regular field in to a field set or form.It should be released in the next couple days.

It'll be slightly more complicated in getting setup, but it is definately quite a bit nicer than this widget.

tony1016
6 Dec 2007, 5:31 AM
It wasn't really meant to do something like that. It was meant as a standalong widget for uploading files.

I'm working on creating an upload "field" which you can stick in as you would a regular field in to a field set or form.It should be released in the next couple days.

It'll be slightly more complicated in getting setup, but it is definately quite a bit nicer than this widget.

yeah,I think that's what we expect,the simpler the better

stever
6 Dec 2007, 5:30 PM
It wasn't really meant to do something like that. It was meant as a standalong widget for uploading files.

I'm working on creating an upload "field" which you can stick in as you would a regular field in to a field set or form.It should be released in the next couple days.

It'll be slightly more complicated in getting setup, but it is definately quite a bit nicer than this widget.

How is that coming?

:D

SilveR316
6 Dec 2007, 8:04 PM
How is that coming?

:D

Pretty nicely.

Here's a teaser of it integrated right in to a regular fieldset with extjs.

stever
6 Dec 2007, 8:06 PM
Pretty nicely.

Here's a teaser of it integrated right in to a regular fieldset with extjs.


Nice indeed!

SilveR316
6 Dec 2007, 8:08 PM
The upload is pretty dang smooth too. I still have some kinks to work out to make it function exactly like an extjs field.

It should be out soon enough for everyone to test.

stever
6 Dec 2007, 8:19 PM
The upload is pretty dang smooth too. I still have some kinks to work out to make it function exactly like an extjs field.

It should be out soon enough for everyone to test.

Heh! "Soon enough"? You underestimate our crazy desire to check out new stuff... ;)

SilveR316
6 Dec 2007, 8:23 PM
Heh! "Soon enough"? You underestimate our crazy desire to check out new stuff... ;)

I'm working as fast as I can, I swear! (:|

lol

SilveR316
6 Dec 2007, 9:03 PM
I'll see about getting a demo up tomorrow...

bsahin
8 Dec 2007, 5:14 PM
Hi,

is it possible to integrate this with htmleditor. a toolbar button in htmleditor to open a dialog with uploadform and show uploaded image in editor? thank you, regards.

eli_s
9 Dec 2007, 3:15 AM
Hi SilveR316,
thank you for your hard work. I am looking forward to seeing your demo =D>

My fingers are crossed that you will be able to create a swfupload version!

SilveR316
9 Dec 2007, 11:31 AM
Hi,

is it possible to integrate this with htmleditor. a toolbar button in htmleditor to open a dialog with uploadform and show uploaded image in editor? thank you, regards.


I'm sure it can be done, but I haven't tried it personally.



Hi SilveR316,
thank you for your hard work. I am looking forward to seeing your demo =D>

My fingers are crossed that you will be able to create a swfupload version!

I won't be doing an swfupload version with this widget, but I am working on an swfupload version that integrates right in to a form field. It should be much more flexible than this widget is.

alos
9 Dec 2007, 3:51 PM
Im really new at Ext JS. I got the uploadform2.js and the uploadform.css. Where exactly do i need to put them so they have access to the images they need? :">

I also get an error when clicking on the upload button:

Error: [Exception... "Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND) [nsIXMLHttpRequest.send]" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame :: file:///Users/alos/workspace/Redalyc/ExtJS/adapter/ext/ext-base.js :: anonymous :: line 10" data: no]
Source File: file:///Users/alos/workspace/Redalyc/ExtJS/adapter/ext/ext-base.js
Line: 10

http://img339.imageshack.us/my.php?image=picture1vi2.png

Iveco
11 Dec 2007, 6:56 AM
Great widget, thank you very much.

It should be added to the EXTJS->Learn->Extensions 2.0 Wiki-Page.

If have a question about this widget:

When I am not possible to use PHP 5.2 (for php_uploadprogress) I am still able to use this widget without problems?

Thank you very much.

SilveR316
11 Dec 2007, 1:11 PM
Great widget, thank you very much.

It should be added to the EXTJS->Learn->Extensions 2.0 Wiki-Page.

If have a question about this widget:

When I am not possible to use PHP 5.2 (for php_uploadprogress) I am still able to use this widget without problems?

Thank you very much.

You should still be able to use it, you just won't be getting any progress information.

stever
11 Dec 2007, 4:54 PM
I'll see about getting a demo up tomorrow...

Cool... any url... ;)

SilveR316
11 Dec 2007, 8:14 PM
Cool... any url... ;)

I knew someone would ask sooner or later....

No, no yet. I'm going to update the widget to use swfupload 2.0 with a bunch of bug fixes. Right now I have a full working (and final) version of the widget that I'm using for my own stuff, but I find myself writing a bunch of hacks for it to overcome basic features that are provided by swfupload, but they are buggy and almost unusable.

As soon as I update it to swfupload 2.0, I'll make my code available to everyone else. That should be soon.... :-?

I just don't want to release something that doesn't work great out of the box.

aeonsun
16 Dec 2007, 9:33 PM
cool!!
Can I add some textfield to Ext.ux.UploadForm2?

nicrox
26 Dec 2007, 10:41 PM
I've transfered everything to localhost with progress.php n upload.php (uploadprogress installed correctly) but I still can't get this to work. thought someone might've come across the same problem and found a solution.
Error:

missing ) in parenthetical
http://localhost/project/js/lib/ext-all.js
Line 23after firebugging I foundout that file input does not get file name or the file/file name is not being sent to the server as $_FILES values are all empty, except for its $key.

I've noticed the same error when using aariadne's V1.1 online demo (http://aariadne.com/uploadform/):

missing ) in parenthetical
http://aariadne.com/extjs/ext-all-debug.js
Line 6521upload.php

foreach ($_FILES as $key => $values) {
if (!$values['tmp_name']) {
$return['success'] = false;
$return['errors'][$key] = 'There was no file';
echo json_encode($return);
break;
}else
move_uploaded_file($values['tmp_name'], './uploads/'.$values['name']);
}
echo json_encode($return);progress.php

$data = uploadprogress_get_info($_POST['UPLOAD_IDENTIFIER']);
$data['success'] = true; // adds a success flag to the result
echo json_encode($data);

Alantin
5 Jan 2008, 5:09 PM
Is there any update on this widget, either the BasicForm variant or the Field variant?

I tried implementing this widget and I got as far as rendering it. However, whenever I click the upload button after selecting a file to upload, I get the following error:



F.elements has no properties
getViewWidth(div#form-ct-in.x-form)ext-base.js (line 10)
request(Object scope=Object timeout=30000)ext-all-debug.js (line 5139)
run()ext-all-debug.js (line 28808)
apply()ext-base.js (line 9)
[Break on this error] (function(){var B;Ext.lib.Dom={getViewWidth:function(E){return E?this.getDocumen...


I can't quite figure out if this is a problem with my code or if the BasicForm variant doesn't work anymore.

If anyone could help me with this, I'd greatly appreciate it.

SilveR316
5 Jan 2008, 9:41 PM
Is there any update on this widget, either the BasicForm variant or the Field variant?

I tried implementing this widget and I got as far as rendering it. However, whenever I click the upload button after selecting a file to upload, I get the following error:



F.elements has no properties
getViewWidth(div#form-ct-in.x-form)ext-base.js (line 10)
request(Object scope=Object timeout=30000)ext-all-debug.js (line 5139)
run()ext-all-debug.js (line 28808)
apply()ext-base.js (line 9)
[Break on this error] (function(){var B;Ext.lib.Dom={getViewWidth:function(E){return E?this.getDocumen...


I can't quite figure out if this is a problem with my code or if the BasicForm variant doesn't work anymore.

If anyone could help me with this, I'd greatly appreciate it.


It's hard to tell what the problem may be without actually seeing the code you are working with.

The upload field is basically done and I am using it a project of mine, but its not exactly in state that can be released to the public yet. I'm also hoping to move it to the new version of swfupload to eliminate some bugs and hacks in the code.

I'll have some free time near the end of january once I finish up this project. Then I'll clean it up and release it.

nicrox
9 Jan 2008, 7:09 PM
for those of you who have the same problem as myself (nicrox http://extjs.com/forum/showthread.php?t=17956&page=6)
Piclens addon was attaching itself to the iframe created in DOM and causing a parse error.
I un-installed Piclens and it works all fine now.

HmblProgrammer
9 Feb 2008, 11:05 AM
Has anyone had the issue where firebug states:

node has no properties

from line 3777 of prototype.js

after the upload completes? I'm using the prototype adaptor and I'vbe narrowed the issue down to the following prototype function:


element: function(event) {
var node = Event.extend(event).target;
return Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : node);
},

node is null, the event is a load event.

Any ideas?

StErMi
10 Feb 2008, 4:20 PM
Maybe i don't understand well this thing... I have to use this like an uploader standalone?

Couse the problem is that i need to integrate this with a formpanel...

that's a way to do that?

webunity
10 Feb 2008, 11:30 PM
Well, this is cool.

I've also made a Flash based file uploader (for jQuery). It has been sitting on my webserver for almost 6 months now, and it is finished and working with the latest version of jQuery. I had the idea to port it to Ext, to create a cross-library file uploader. It is based on swfUpload (old version) but i now see that they have a new version available. Well it is back to the drawing board for me, i am going to look if they made any neat additions that i could also use.

I don't know how it behaves under Linux, but all other "default file errors" like timeouts and so on have been fixed in my version.

Demo? http://uploader.webunity.nl/

yenduttjain
13 Feb 2008, 11:39 PM
Hi,

Is there any example for showing Upload Progress bar in ASP.NET 2.0 ?

Thanks,

Yen

Emachan
22 Feb 2008, 6:33 AM
Greeting to everyone.
I am trying to use uploadForm in the next version for Ext 2.0.
I installed everything but I am not able to use this important tool.

I think the problem is server side, for I am using exactly your code for client side.
I am working with PHP, through Zend framework.

I divided my upload service in 2 parts, to (try to) take advantage of upload progress features.
This is my code for upload progress:


public function progress()
{
// Get progress information
$data = uploadprogress_get_info($_POST['UPLOAD_IDENTIFIER']);

if (is_null($data) || !is_array($data))
{
$data = array();
$data['success'] = false;
$data['error'] = 'Error in '.$_POST['UPLOAD_IDENTIFIER'].' identifier';
}
else
{
$data['success'] = true;
$data['id'] = $_POST['UPLOAD_IDENTIFIER'];
}

$this->getResponse()->setBody(Zend_Json::encode($data));

}


And this is the code for actual upload function:


public function upload()
{

$result = array('success' => true);

if (isset($_FILES) && count($_FILES) > 0)
{

// Import files into the repository
foreach($_FILES as $key => $file)
if (!empty($file['tmp_name']))
//save action
}

// Send the response
$this->getResponse()->setBody(Zend_Json::encode($result);
}

I am working currently in Windows environment, everything is installed correctly, but the only thing I can get from Firebug is :
"unexpected end of XML source"

This "kind of" error is really unuseful, and I am loosing a lot of time to figure out what to to to upload a file with my system.

It seem also that uploadprogress_get_info() always returns null, and I have no idea on how to get useful values from it.

Could you possibly give me a very helpful hand ?
Thank you all very much

EMA

crxtech
27 Feb 2008, 7:45 AM
The upload field is basically done and I am using it a project of mine, but its not exactly in state that can be released to the public yet. I'm also hoping to move it to the new version of swfupload to eliminate some bugs and hacks in the code.

I'll have some free time near the end of january once I finish up this project. Then I'll clean it up and release it.

Have you had a chance to finish this and post it? Thanks

Lobos
14 Mar 2008, 6:17 PM
I too would be interested in seeing the updated version of this - it is so nice on that demo site, but I found it a nightmare to try and install and get working... specially with the way you need to render it.... anyway prolly my fault cause it is late and I am tired. Would be really nice to see you come thru with this man!

-Lobos

jsakalos
14 Mar 2008, 6:36 PM
I too would be interested in seeing the updated version of this - it is so nice on that demo site, but I found it a nightmare to try and install and get working... specially with the way you need to render it.... anyway prolly my fault cause it is late and I am tired. Would be really nice to see you come thru with this man!

-Lobos

Take a look here: [In Progress] Saki's FileTree for Ext 2.0 (http://extjs.com/forum/showthread.php?t=29090&highlight=Progress+FileTree)

UploadPanel (formerly UploadForm) is in a separate class and can be used independently of FileTreePanel as you can see in the window of the demo page.

Lobos
15 Mar 2008, 10:41 AM
Saki,

Nice job on that man, real nice... the main thing with the upload was that I was looking for progress indication which I found here:

http://www.silverbiology.com/ext_samples/SwfUploadPanel/uploaddemo.php?debug=true

Now the file tree is another story and I tell you I am looking forward to using that at some stage, it is really excellent.

-Lobos

jsakalos
15 Mar 2008, 10:51 AM
Progress indicators will come last but I'm not going to use flash for upload - too buggy on FF@Linux.

You can see progress in my old Ext 1.x filetree/uploadform at:

http://aariadne.com/uploadform
http://aariadne.com/filetree

BTW, this is official thread for new FileTreePanel: [In Progress] Saki's FileTree for Ext 2.0 (http://extjs.com/forum/showthread.php?t=29090)

JohnStalcup
20 Mar 2008, 7:11 AM
[QUOTE=zaunaf;87951]Firstly thanks to Saki & Silver for the great widget (and of course Jack and team for the awesome framework) !!

I thought i'd like to show my gratitude by sharing a short tutorial from my experience on how to setup php server side to support this widget, so that any newbies like me will be able to get this widget up and running in their web apps in no time. I'm using xampp, by the way. Here goes :

<< HOW THINGS WORKS >>
Basically, it works just as normal php fileupload works. The widget sends the file via POST request, and it triggers a $_FILE variable on the receiving php script (i.e upload.php). But in addition, there is a php extension called "uploadprogress" for php that generates a file that monitors the upload progress of the file in the tmp directory, in a form of a textfile. The extension also gives you an uploadprogress_get_info() function that accesses that file. The widget uses progress.php to call this function and gives back the JSON info so the widget will be able to display the progress. To differs between files, the widget (CMIIW) uses an ID as the parameter for the uploadprogress_get_info().

<< INSTALL IN WINDOWS >>
Get the latest xampp package (one with php-5.2, otherwise installation will fail).
Download the "upload progress" php extension here : http://pecl4win.php.net/ext.php/php_uploadprogress.dll then put it in extensions directory in php
Change php.ini :
[code]
extension=php_uploadprogress.dll

[uploadprogress]
uploadprogress.file.filename_template=

symfony
8 Apr 2008, 2:29 AM
Has anybody the same error, or solved it already? I'm using the latest ext-version, with the prototype-adapter.. I figured out, where the error comes from, but I can't imagine why it does :(..



doAction : function(action, options){
if(typeof action == 'string'){
action = new Ext.form.Action.ACTION_TYPES[action](this, options);
}
if(this.fireEvent('beforeaction', this, action) !== false){
this.beforeAction(action);
action.run.defer(100, action);
}
return this;
},




Has anyone had the issue where firebug states:

node has no properties

from line 3777 of prototype.js

after the upload completes? I'm using the prototype adaptor and I'vbe narrowed the issue down to the following prototype function:


element: function(event) {
var node = Event.extend(event).target;
return Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : node);
},

node is null, the event is a load event.

Any ideas?

edui
30 May 2008, 10:24 PM
Hi ..

I create an object of UploadForm2 and add it to the wizard panel.


......
var upForm2 = new Ext.ux.UploadForm2('form-ct-in', {
autoCreate : true,
url: 'json/uploadFile.action',
method: 'post',
maxFileSize: 1048570,
iconPath: '../../../icons',
pgCfg: {
uploadIdName: 'UPLOAD_IDENTIFIER',
uploadIdValue: 'auto',
progressBar: true,
progressTarget: 'under',
interval: 1000,
maxPgErrors: 10,
options: {
url: 'json/progress.action',
method: 'post'
}
}
});

this.fourthCard = new Ext.ux.Wiz.Card({
id : 'ext-comp-method-upload',
title : 'Uplaod File',
monitorValid : true,
items : upForm2
});

........
I got error el has no properties.
I know this error occurs because element with id 'form-ct-in' doesn't exist. When Ext.DomHelper.append(ct, autoCreate) on the UploadForm2 class.

How to create div element with id 'form-ct-in' on the fly on the Wizard Card, so UploadForm2 can be add to the wizard panel?

regards,

DM

orno
11 Jun 2008, 6:20 PM
How I get the Ext.ux plugins and where?

jsakalos
12 Jun 2008, 1:04 PM
http://extjs.com/forum/forumdisplay.php?f=21

My extensions and plugins are here: http://extjs.eu

jibuas
15 Jul 2008, 11:43 PM
I want to add the upload widget in a form panel.
i am sending image for the form

http://imageupload.com/out.php/i138646_styleForm.jpg
i tried
var upform = new Ext.ux.UploadForm2('form-ct-in', {
......
this code is working
but i want to show in form panel...

Please help me

enrico@maniciati.it
5 Jan 2009, 2:27 AM
hi
for upload directory/file rather than /file ?
it's complicate?

thank's

jsakalos
5 Jan 2009, 2:26 PM
Browsers do not support directory upload. I doubt a directory upload is currently possible.

enrico@maniciati.it
5 Jan 2009, 4:06 PM
thank you for answer!

smokeman
6 Jan 2009, 12:33 PM
what about multiple file selection from the browse window, when you click add...

jsakalos
6 Jan 2009, 12:52 PM
Standard input type=file allows one selected file. There are some Flash uploaders where you can select multiple files.

smokeman
13 Mar 2009, 1:18 PM
sorry, I should have posted a follow up back when I was working on this....

I was able to get this one working:
http://extjs.com/forum/showthread.php?p=252360#post252360

it's the version that @temporary re-wrote, and is supporting.