PDA

View Full Version : [2.0] Ext.ux.UploadDialog extension.



Pages : [1] 2

MaximGB
23 Dec 2007, 7:41 PM
Hi,

I've ported my Ext.ux.UploadDialog extension to ExtJS 2.0, any feedback is highly appreciated.
The code was mostly rewritten, so any bug reports are welcome too.

Description, demo and download page is here at
http://max-bazhenov.com/dev/upload-dialog-2.0/index.php

B)

alos
23 Dec 2007, 8:50 PM
Very nice! thanks MaximGB, I'll test it tomorrow :D

tavox
24 Dec 2007, 11:43 PM
Nice job, i don't know if it is exactly a bug but when you open the demo page with Internet Explorer 6 the scrollbars doesn't show, with Firefox 2 works perfect.

Best regards,

gUstavo

MaximGB
25 Dec 2007, 12:07 AM
Fixed, thanks for report.

Ytorres
27 Dec 2007, 12:21 AM
Very nice work MaximGB ! ;)

scienceren
27 Dec 2007, 7:25 PM
Very very nice work !

sunmi629
28 Dec 2007, 12:00 AM
How to set up the upload file type, JPG and GIP file type as an example?

Thank you... :)

MaximGB
28 Dec 2007, 12:38 AM
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload-dialog-request.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
permitted_extensions: ['jpg', 'jpeg', 'gif']
});

But there was a bug in file type check methods, so please get the fixed version of the extension.

deepak
28 Dec 2007, 5:48 AM
this is a welcome update and looks quite good B)

ocheneson
28 Dec 2007, 8:21 AM
Hello,


Can you check my posting ?

I have a problem with the upload dialog . I cannot retreive the filename in my php page

http://extjs.com/forum/showthread.php?t=21783

thanks for your help and your very nice work.

Olivier

franckxx
28 Dec 2007, 9:20 AM
Impressive Work !

Thx for share this nice stuff !

jay@moduscreate.com
28 Dec 2007, 11:12 AM
Excellent work again :)

alos
28 Dec 2007, 2:01 PM
Thanks! This is really what I needed, very nice work =D>

Just one question: Is there a way to limit the number of uploads? :-?

MaximGB
28 Dec 2007, 2:16 PM
You can use filetest event for this purpose. On each filetest event you should increment a counter, and if counter is more then required number then you should return false from the handler.

vipcop
29 Dec 2007, 3:39 AM
First of all great work!

Is there any way to add multiple files. It's very onerous to click "add" all the time if you want to add some files.

Regards

jay@moduscreate.com
29 Dec 2007, 4:06 AM
First of all great work!

Is there any way to add multiple files. It's very onerous to click "add" all the time if you want to add some files.

Regards

unless you use flash, no.

alos
30 Dec 2007, 12:52 PM
You can use filetest event for this purpose. On each filetest event you should increment a counter, and if counter is more then required number then you should return false from the handler.

Can you post a little example? I'm kind of new to ExtJS.


permitted_extensions: ['jpg', 'jpeg', 'gif']

Adding this to my dialog does not work. I get a "wrong file" window every time. No matter what file is chosen. :(

MaximGB
30 Dec 2007, 1:00 PM
Can you post a little example? I'm kind of new to ExtJS.


permitted_extensions: ['jpg', 'jpeg', 'gif']

Adding this to my dialog does not work. I get a "wrong file" window every time. No matter what file is chosen. :(

Do you have the last extension version? There was a bug fix at 28 of December.
Post your code here, or give me a link to a page where I can see the bug you talking about.

alos
30 Dec 2007, 1:14 PM
Upon further testing it seams that only some files that end with ".jpg" work but not files with ".JPG". My mistake I suppose. Sorry! :">

Now, about the filetest. Is this correct?


function getDialog()
{
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload-dialog-request.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
permitted_extensions: ['jpg', 'jpeg', 'gif'],
filetest: cuenta
});
dialog.on('uploadsuccess', onUploadSuccess);
}
return dialog;
}
function subirRevista(){
var lugar = Ext.getCmp('botonPaSubir');
getDialog().show();
}

function cuenta(){
contador++;
if(contador>1){
return false;
}
return true;
}

function onUploadSuccess(dialog, filename, resp_data)
{
var parts = filename.split(/\/|\\/);
if (parts.length == 1) {
filename = parts[0];
}
else {
filename = parts.pop();
}
file_list_tpl.append('file-list', {name: filename});
}

mehdi
30 Dec 2007, 2:02 PM
Alos, Max,

I think I found a small uncorrected bug (I just checked...) :)
In line 540, it is necessary to replace:

predicate: [this.fireFileTestEvent, this.isPermittedFileType],
with

predicate: [this.fireFileTestEvent, this.isPermittedFile],
I tested it, and it works much better... :D

Also, in case you'd like (or have time for, or both) to add progress bars, I think 2 progress bars would be great (one for the Current file, one for the Total).
For that, you could make a great use of the emdev uploadprogress PHP extension.
Both a demo and the DLL file for Windows PHP >5.2.0 are available here (watch out 'coz further versions don't work correctly as far as I tried them):
http://www.emforge.org/wiki/AjaxBasedFileUploadForPHP

To get it to work correctly, if you've got a Windows-based setup, you need to copy the DLL file into you PHP /EXT folder, and to add the following to your PHP.INI file:

[uploadprogress]
extension=php_uploadprogress.dll
uploadprogress.file.filename_template="D:\server\tmp\upt_%s.txt"
and replace "D:\server\tmp\" with your Apache or PHP temp folder...

Then, your <INPUT TYPE="FILE" ...> form needs to be added with something like that:

'<input type="hidden" id="hidUploadID" class="upcls" name="UPLOAD_IDENTIFIER" id="UPLOAD_IDENTIFIER" value="' + upID + '" />'
and your upID defined somewhat like this:

var upID = new String(Math.floor(Math.random() * 65535));
var curDate = new Date();
upID += new String(curDate.getMilliseconds());
Then, each time you want to update your progress bar, you need to call this function in PHP:
uploadprogress_get_info($upID)
which returns a structure like that (C-code returned to PHP):
[
time_t time_start;
time_t time_last;
unsigned int speed_average;
unsigned int speed_last;
unsigned long bytes_uploaded;
unsigned long bytes_total;
unsigned int files_uploaded;
int est_sec;
]


Eventually, to avoid the lowercase/uppercase prolem with file extensions comparisons, we could use sthg like that in line 966 of your code. Replace:

result = this.permitted_extensions.indexOf(this.getFileExtension(filename)) != -1;
with

result = this.permitted_extensions.indexOf(this.getFileExtension(filename).toLowerCase()) != -1;
and force the permitted_extensions, when set, to all be converted to lowercase... For example, in lines 469-470:
Replace

config = Ext.applyIf(config || {}, default_config);
config.layout = 'absolute';
with

config = Ext.applyIf(config || {}, default_config);
this.formatPermittedExtensions();
config.layout = 'absolute';
and add before line 915:

formatPermittedExtensions: function() {
if (this.permitted_extensions.length > 0) {
for (var (i = 0 ; i < this.permitted_extensions.length ; i++)
this.permitted_extensions[i] = this.permitted_extensions[i].toLowerCase();
}
},
and replace, at line 1462:

this.permitted_extensions = value;
with

this.permitted_extensions = value;
this.formatPermittedExtensions();
Hope this will help... I make great use of your extension right now, and thought I would try to share my latest trials...

Very respectfully,
Mehdi DHAKOUANI

MaximGB
30 Dec 2007, 2:21 PM
Thanks for you post Mehdi :)

Tha bug you've mentioned was fixed at 28 of December and since the updated extension is available for download.

I know about uploadprogress php extension but don't want to use it since it's uncommon. So actually a progress bar in the upload dialog is mostly a "UI sugar".

For other fixes you are proposing there is a "filetest" event ;) It's porpose is for the cases when permitted_extensions is not enough for the user needs.

MaximGB
30 Dec 2007, 2:26 PM
Now, about the filetest. Is this correct?

No, the filetest is an event so you should use it same as uploadsuccess


function getDialog()
{
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload-dialog-request.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
permitted_extensions: ['jpg', 'jpeg', 'gif']
});
dialog.on('uploadsuccess', onUploadSuccess);
dialog.on('filetest', cuenta);
}
return dialog;
}
function subirRevista(){
var lugar = Ext.getCmp('botonPaSubir');
getDialog().show();
}

function cuenta(){
contador++;
if(contador>1){
return false;
}
return true;
}

function onUploadSuccess(dialog, filename, resp_data)
{
var parts = filename.split(/\/|\\/);
if (parts.length == 1) {
filename = parts[0];
}
else {
filename = parts.pop();
}
file_list_tpl.append('file-list', {name: filename});
}

mehdi
30 Dec 2007, 2:49 PM
Thanks for you post Mehdi :)

Tha bug you've mentioned was fixed at 28 of December and since the updated extension is available for download.

I know about uploadprogress php extension but don't want to use it since it's uncommon. So actually a progress bar in the upload dialog is mostly a "UI sugar".

For other fixes you are proposing there is a "filetest" event ;) It's porpose is for the cases when permitted_extensions is not enough for the user needs.

Alright, Max... Thanks for your responses. ;)

Very respectfully,
Mehdi

alos
30 Dec 2007, 6:25 PM
Thanks Mehdi, and thanks MaximGB! Im loving this :D

thameema
2 Jan 2008, 1:57 PM
Hi MaximGB

Nice work... Thanks for your effort.

I have a small issue.. i am using this with my struts2 application and the server side action class returns {"success":true} but the onAjaxSuccess function is not getting invoked hence i get "uploading error" in the status message. Please help me solve this issue.

Thanks,
Thameem

MaximGB
2 Jan 2008, 2:19 PM
Give me a link on a page where I can see the error, or post your code here.

thameema
2 Jan 2008, 3:05 PM
Great you are online. Thats an internal app so its not accessible from outside. But here is the code.

I am using Extdesktop application and popping up this dialog window within desktop window. Later I have to figure out how to fit this upload component inside desktop window.

Javascript:


var dialog = new Ext.ux.UploadDialog.Dialog({
url: '/global/provider/nodec/mediaUpload.action',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false
//renderTo:'upl-cont'
});
dialog.show();


Javacode:




public String execute() throws Exception {
logger.debug("File upload action execute method ");
logger.debug("Filename: "+filename);
success = true;
returnMessage="File uploaded";

return SUCCESS;
}


In my struts.xml config file i have this :



<action name="nodec/mediaUpload" class="com.vzw.vcm.core.actions.contentprovider.MediaUploadAction">
<interceptor-ref name="webAccessStack"/>
<interceptor-ref name="fileUpload">
<param name="allowedTypes">
image/png,image/gif,image/jpeg,application/octet-stream
</param>
<param name="maximumSize">
<!-- approx 2MB in bytes-->
2097152
</param>
</interceptor-ref>
<result type="json"/>
</action>


I am using json plugin which outputs {"success":true}

Thanks,
Thameem

MaximGB
2 Jan 2008, 3:12 PM
Your code gives me no clue where the error is. But since you get 'Upload error' in the 'Note' column of the dialog then your json output is probably invalid. Try to use Fiddler and see what's actualy returning from the upload action.

thameema
2 Jan 2008, 3:42 PM
I used fiddler and here is the output.

{"message":"File uploaded","success":true}

I forgot to mention that the response has content-type:application/json;charset=UTF-8. Firefox prompting me to save the mediaUpload.action file... I am not sure its because of json content type.

Thanks,
Thameem

MaximGB
2 Jan 2008, 3:49 PM
Check the response headers, the response content type should be text/html, not application/xml or application/json

MaximGB
2 Jan 2008, 3:52 PM
I forgot to mention that the response has content-type:application/json;charset=UTF-8. Firefox prompting me to save the mediaUpload.action file... I am not sure its because of json content type.

That's the reason I think. See my previous post.

thameema
3 Jan 2008, 2:43 PM
That's the reason I think. See my previous post.


Yes. The json plugin i am using with struts2 is sending application/json as content type. I think struts2 is using dojo and they made the json plugin by keeping dojo in mind which requires application/json. I am now using json-lib to send json output and its working good.

Another question is, i am using desktop window and I am not sure how do I make this upload dialog fit into that window as component.

Thanks
Thameem

MaximGB
3 Jan 2008, 2:50 PM
Since dialog is a descendant of Ext.Window I doubt that it can be added to any panel as a component. I think I should rewrite it to be a descendant of Ext.Panel but it is not my number one task for now.

thameema
3 Jan 2008, 3:09 PM
My understanding is you are extending Ext.Window which extends the Ext.Panel. So this means you should be able to add the uploaddialog to any other window... Am I guessing right?

-Thameem

MaximGB
3 Jan 2008, 3:14 PM
Probably, look at the Desktop example, may be it will help you to find a way to add dialog into the desktop window.

keithnlarsen
3 Jan 2008, 3:24 PM
Great work, thanks a lot for the port to 2.0! This is one extension that I really rely on right at the moment.

Alantin
6 Jan 2008, 4:51 AM
I've tried integrating this widget into my application and I can't seem to get it to work. What's worse, I get no feedback whatsoever from Firebug. I'm pretty certain that the upload is accomplished using Ext.Ajax.request so Firebug should show me at least the post data, right?

MaximGB
6 Jan 2008, 7:25 AM
I've tried integrating this widget into my application and I can't seem to get it to work. What's worse, I get no feedback whatsoever from Firebug. I'm pretty certain that the upload is accomplished using Ext.Ajax.request so Firebug should show me at least the post data, right?

No. The upload indeed is accomplished using Ext.Ajax.request but the firebug won't show you any post data, since the file upload is made with hidden iframe. Firebug will show you request made with XHR object only, so only one option to see the post data is to use Fiddler HTTP proxy.

chluehr
11 Jan 2008, 4:46 AM
Is your extension supposed to work with the latest ExtJS 2.0 release?
I copyied your example code + the Ext on your server - works.
Then i replaced the ExtJS folder with the latest release and i get
a "path has no properties" error on line 888 in ext-all-debug.js.
any idea? Thanks!

kind regards, Chris

MaximGB
11 Jan 2008, 8:10 AM
There is two versions of Ext.ux.UploadDialog extension for Ext 1.1.x and 2.0. I have no ideas why you get an error. All my fellow mindreaders are currently away, so until you give me more details, like code fragment where you use my extension, I can't help you ;)

chluehr
14 Jan 2008, 9:03 AM
Ok - Any help is greatly appreciated. As i said, i copied your complete working example (from your server) and just replaced the ExtJS directory with the latest Ext2.0 release, see sample here (omitting just your stylesheet):
http://farcaster.net/fup/

Am i missing s.th.?
Thanks in advance for your time!

Kind regards, Christoph Luehr

MaximGB
14 Jan 2008, 11:01 AM
The last version of ExtJS is 2.0 Stable, you are using 2.0 beta 1. There is no property 'buttonSelector' in Ext.Button class but I use it in my code, that's why the error was raised. Update ExtJS to 2.0 Stable and everything will be ok.

chluehr
15 Jan 2008, 1:38 AM
Ah, bummer - thanks a lot, i guess i just copied the wrong ExtJs directory .. 8-|
Sorry for wasting your time!

Kind regards, Chris

pilotjohn
15 Jan 2008, 8:43 AM
Good work MaximGB!!!
I have a few questions though
1. Does the licensing policy of extjs cover your module too?
2. Would your module be integrated with the code base of extjs

Regards
John

MaximGB
15 Jan 2008, 11:07 AM
Hi.

Does the licensing policy of extjs cover your module too?
It's free and opensource, I don't forbid anybody to use the extension in free or commercial apps. The only requirement is to post me a response on the ExtJS forum.

Would your module be integrated with the code base of extjs
I guess not, since it's an extension to ExtJS and I haven't got any proposals from ExtJS developers about integrating it to the code base.

pilotjohn
15 Jan 2008, 12:01 PM
Hello Maxim,
Thanks for your reply. I was wondering if your utility could be used in the main page itself instead of opening in a Dialog window. That way I could be be able to submit the files selected for upload as well as the other form fields at the same time.

Any pointers?

Appreciate your help
Thanks
John

MaximGB
15 Jan 2008, 8:42 PM
It is impossible with this extension. First there should be kind of UploadPanel (subclass of the Ext.Panel) and not UploadDialog (subclass of the Ext.Window). Second the upload process goes sequentially one file by one and not in a bulk.

huling
16 Jan 2008, 1:56 AM
function showDialog(button)
{
var dig = getDialog();
dig.setUrl('upload_file.asp');
dig.setBaseParams({path: '/WAP/'});
dig.show(button.getEl());
}
this is my test code.
but i can't get params use 'Request("path")'.how do i can?

MaximGB
16 Jan 2008, 2:17 AM
Sorry, last time I've program ASP pages were 5 years ago, so I don't remeber much. Post you ASP code here and may be someone who knows more will help you.

p.s. There is one user liping (http://extjs.com/forum/member.php?u=6805) who successfully use the upload dialog with ASP, you can send him PM for help request.

huling
16 Jan 2008, 2:49 AM
my ASP code is:

<!--#include FILE="../Include/upload_5xsoft.inc"-->
<%
dim jsonData,path
jsonData = "{success: false,error: 'Error or success message'}"
set upload=new upload_5xsoft
set file=upload.file("file")
'path = Request("path")
path = Request.ServerVariables("URL")
if file.fileSize>0 then
if (not file.SaveAs(Server.mappath(file.FileName))) then
jsonData = "{success: false, error: 'aaaa" & path & "bbb" & "'}"
end if
end if
set file=nothing
set upload=nothing
Response.write jsonData
%>

it's ok in same directory with program file.but i can't get parameter 'path'.

MoShAn480
16 Jan 2008, 10:01 AM
Awesome module! I was trying to create one like this, but why reinvent the wheel right? Looks very clean and slick. I am working on an application to manage files online, and this is great for it. THANX!

send2dd
17 Jan 2008, 9:36 AM
Hi Maxim, Very nice job. :D

I am not php guy. Do you have any idea how to upload file to a java backend, say servlet?

Here's my code, the servlet I am calling is called 'activity'


function getDialog()
{
fileCount = 0;
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog({
url: '/jsonext/activity?action=upload',
title: 'SEDD File Uploader',
reset_on_hide: false,
allow_close_on_upload: false,
upload_autostart: false
//base_params: {action: 'UPLOAD', reqaction: 'uploadfile', resptype: 'json'}
//permitted_extensions: ['zip']
});

dialog.on('uploadsuccess', onUploadSuccess);
dialog.on('filetest', checkFileCount);
dialog.on('resetqueue', function(){fileCount=0;});
dialog.on('fileremove', function(){fileCount--} )
}
return dialog;
}


After I clicked the upload button, the firebugs tells me that Response is 'Failure'. However my servlet has never been called? Any idea? or maybe you can point me a direction?

Thanks,

MaximGB
17 Jan 2008, 10:17 AM
What do you mean by "firebugs tells me that Response is 'Failure'". If you have XHR report in firebug console saying that response was failed (response != 200 OK) then you actually not uploading anything, since upload process goes using hidden IFRAME not XHR. Nevertheless if there goes an XHR request then your servlet should be at least called unless you request an invalid URL...

pipe
18 Jan 2008, 9:30 AM
I want to share with you the asp.net implemetation:

protected void Page_Load(object sender, EventArgs e)
{
string jSONString = string.Empty;
try
{
if (Request.Files.Count > 0)
{
HttpPostedFile postedFile = Request.Files[0];
string savePath = Request.PhysicalApplicationPath
+ @"uploadedImages\"
+ Path.GetFileName(postedFile.FileName);
if (File.Exists(savePath))
{
File.Delete(savePath);
}
postedFile.SaveAs(savePath);
jSONString = "{\"message\":\"File uploaded\",\"success\":true}";
}
}
catch (Exception)
{
jSONString = "{\"message\":\"Error uploading file\",\"success\":false}";
}
finally
{
Response.Write(jSONString);
}
}

send2dd
18 Jan 2008, 12:02 PM
What do you mean by "firebugs tells me that Response is 'Failure'". If you have XHR report in firebug console saying that response was failed (response != 200 OK) then you actually not uploading anything, since upload process goes using hidden IFRAME not XHR. Nevertheless if there goes an XHR request then your servlet should be at least called unless you request an invalid URL...


Thank you for your quick response, I realized the problem is from my servlet code. It's working now.:D

One more question:

Is there any setting in this extension that provides file size limitation, say < 1MB?:-/

MaximGB
19 Jan 2008, 12:42 AM
Is there any setting in this extension that provides file size limitation, say < 1MB?
No, since the extension is using JS and HTML only.

alos
21 Jan 2008, 12:17 AM
Thank you for your quick response, I realized the problem is from my servlet code. It's working now.:D

One more question:

Is there any setting in this extension that provides file size limitation, say < 1MB?:-/

Could you post your code? We are working with JSP's too and would like to see an example =)

send2dd
21 Jan 2008, 7:26 AM
Could you post your code? We are working with JSP's too and would like to see an example =)



function getDialog()
{
fileCount = 0;
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload',
title: 'File Uploader',
reset_on_hide: false,
allow_close_on_upload: false,
upload_autostart: true,
base_params: {reqaction: 'uploadfile', resptype: 'json'},
permitted_extensions: ['xml']
});
dialog.on('uploadsuccess', onUploadSuccess);
dialog.on('uploadsuccess', onUploadSuccess);
dialog.on('filetest', checkFileCount);
dialog.on('resetqueue', function(){fileCount=0;});
dialog.on('fileremove', function(){fileCount--} )
}
return dialog;
}

specify your servlet as url like this: url: 'upload',, keep it in mind it's a HTTP POST, ;)

raymartinshair
21 Jan 2008, 9:04 PM
hi,

Just like to say thanks for the hard word you have put into this control.

I am getting an error with the UploadDialog the first time its tries to upload a file. Below is a sample of the JS code I am using to instantiate the dialog.


var selectedId = this.store.data.items[this.selectedRow].get('id');
if(selectedId !== undefined) {

if(this.uploadWindow){
this.uploadWindow.close();
}

this.uploadWindow = new Ext.ux.UploadDialog.Dialog({
url: Application.SITE_ROOT + '/XXXXView/UploadFile.rails?id=' + selectedId
, reset_on_hide: false
, allow_close_on_upload: true
, upload_autostart: true
, permitted_extensions: ['jpg', 'jpeg', 'gif', 'bmp', 'png']
, listeners:
{
'uploadsuccess' : this.uploadImageSuccess
, scope : this
}
});

this.uploadWindow.show('show-button');
}

the error I get back from firebug is.


[Exception... "'State 'adding-file' has no transition for event 'grid-selection-change'.' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
Line 0

and


[Exception... "'Permission denied to get property HTMLInputElement.nodeType' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]

Line 0

If I close the dialog box and open it up again reselect an image file the file is successfully uploaded and processed by the monorail server code.
???????

Any help would be appreciated

Cheers
Adam

MaximGB
22 Jan 2008, 1:53 AM
[Exception... "'State 'adding-file' has no transition for event 'grid-selection-change'.' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "<unknown>" data: no]
Line 0
This exception tells that when dialog in the adding-file state it recieves the 'grid-selection-change' event, and since there is no transition for this event at that state then exception is thrown. Actualy it shouldn't happen, I mean I didn't suppose that 'grid-selection-change' event can be recieved at 'adding-file' state. Is your code using dialog's internal gridpanel element somehow?

origin
22 Jan 2008, 4:03 PM
Hey mate, thanks for your work, it's excellent.
Bit of a noob question here, how do you read the response?



dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
closable: false,
modal: true,
permitted_extensions: ['xml']
});

dialog.on({
uploadsuccess: function(updialog, filename, json){
// alert(json.?????);
}
});

raymartinshair
22 Jan 2008, 7:11 PM
This exception tells that when dialog in the adding-file state it recieves the 'grid-selection-change' event, and since there is no transition for this event at that state then exception is thrown. Actualy it shouldn't happen, I mean I didn't suppose that 'grid-selection-change' event can be recieved at 'adding-file' state. Is your code using dialog's internal gridpanel element somehow?

Thanks for your prompt reply.
I am not doing anything special with the dialogs internal elements via code.

I have noticed a few timing issues/quirks with the EXT framework since using it. Not sure if this is related ????
Anyway to move forward with the development and to fix the exception I modified the Ext.ux.UploadDialog.js file by adding code for the missing transition. The added transition is marked in red below.



// --------------
'adding-file' : {
// --------------
'file-added' : [
{
predicate: this.isUploading,
action: [this.incInitialQueuedCount, this.updateProgressBar, this.fireFileAddEvent],
state: 'uploading'
},
{
predicate: this.getUploadAutostart,
action: [this.startUpload, this.fireFileAddEvent],
state: 'ready'
},
{
action: [this.updateToolbar, this.fireFileAddEvent],
state: 'ready'
}
]
, 'grid-selection-change' : [
{
// Do nothing.
}
]
}


Cheers
Adam

origin
22 Jan 2008, 8:59 PM
Ok, I got the response worked out, I uh, used the force and read the source, lol.

Next problem:
Firefox is sending the $_FILE array to PHP, but IE 6 isn't. Any ideas?

origin
22 Jan 2008, 9:06 PM
Ok, I know what the problem is:




dialog.on({
fileadd: function() {
dialog.disable(); // this causes the issue
},
uploadsuccess: function(updialog, file, response){
var httpRequest = fs.load({url:'getData.php',
waitMsg:'Loading...',
params: {
file: response.filename
}
});
dialog.hide();
},
uploadfailed: function(updialog, file) {
errorBox('Failed to commence upload.');
},
uploaderror: function(updialog, file, response) {
errorBox(response.message);
}
});




Weird yes.

zhangbo
28 Jan 2008, 12:45 AM
very thanks, I used your upload componet in my project.

thanks again.

and I translate it to chinese, also give a demo in my blog. if you want to see, go my blog

http://blog.csdn.net/zhangyunbo1116/archive/2008/01/28/2070097.aspx

Animal
2 Feb 2008, 6:00 AM
Maxim, fantastic extension, thanks for the hard work you've put into it!

I've just been using this in a project, and I added one event which I think is very useful. Perhaps you could add it to your base version.

The beforefileupload event passes to the handler the object hash parameter to Ext.Ajax.request, so that the request may be modified. For instance extra parameters added.

The change is to the uploadFile method:



uploadFile : function(record)
{
var reqParams = {
url : this.url,
params : this.base_params || this.baseParams || this.params,
method : 'POST',
form : this.form,
isUpload : true,
success : this.onAjaxSuccess,
failure : this.onAjaxFailure,
scope : this,
record: record
};
if (this.fireEvent('beforefileupload', this, reqParams) !== false) {
Ext.Ajax.request(reqParams);
}
},

alos
2 Feb 2008, 12:57 PM
Could someone help with a JSP backend example to this? I have no idea on what to do on the server's end :-/

Nikoms
3 Feb 2008, 2:20 PM
Hello!

I use this extension, but I prefer to display myself the list of files, error message, etc..

So I use it with the dialog in hide mode... And I have reuse the Ext.ux.UploadDialog.BrowseButton class to display a button in case of the ugly "browse".

like thise :



//create dialog before... with new UploadDialogController()
//The dialog must be rendered so I show and hide it directly... If someone have a better idea :)
dialog.show();
dialog.hide();
var myButton = new Ext.ux.UploadDialog.BrowseButton({
text: 'Selectionner un fichier',
tooltip: '',
iconCls: 'ext-ux-uploaddialog-addbtn',
handler: dialog.onAddButtonFileSelected,
applyTo : 'myButton',
scope:dialog
});


It works perfect, but sometimes the "hidden input file" takes more place than the "beautiful button", so you can click near the button and it's open the browse dialog. I already modify a little the "createInputFile" function in the js file, but it's not enough.

Does anyone already use this browsebutton "alone" (without all the extension) ?

Here is a picture of what happen if I click near the button. I can type someting because of the textfield of the "input file"... I hope I'm clear enough :) Sorry English is'nt my mother language :p

MaximGB
3 Feb 2008, 9:37 PM
Animal:
Thanks for response, I'll add the beforefileupload event after some extension refactoring.

Nikoms
You have to put the browse button inside some container element with overflow:hidden style.

//The dialog must be rendered so I show and hide it directly... If someone have a better idea :)
Show the dialog and move it to the -1000, -1000 offset.

buenavida
3 Feb 2008, 10:09 PM
Hello,

I have seen a user called Thameem has successfully implemented UploadDialog with Struts2.

I am trying to get the same to work in my implementation.

Can someone share what needs to be done at the Struts2 side to receive the uploaded file. MaximGB dialog appears to have uploaded the file.

Also my Action is called, but the no Filename and File being intercepted by FileUploadInterceptor of Struts2.

Code as follows:

ACTION

public class StrutsFileUpload extends ActionSupport implements ServletRequestAware, Action {

private File upload;//The actual file
private String uploadContentType; //The content type of the file
private String uploadFileName; //The uploaded file name
private String fileCaption;//The caption of the file entered by user
private HttpServletRequest request;
private boolean scriptTag;

public void setServletRequest(HttpServletRequest httpServletRequest) {
this.request = httpServletRequest;
}

public String execute() throws Exception {

System.out.println("\n........... In Struts action........." + this.getFileCaption());
System.out.println("\n........... In Struts action........." + this.getUploadContentType());
System.out.println("\n........... In Struts action........." + this.getUploadFileName());

System.out.println("\n..... content type = " + request.getContentType());

HttpSession session = request.getSession();

session.setAttribute("_myContentType", "text/html");

JSONObject jsonData = new JSONObject();
jsonData.put("success", true);
jsonData.put("message", "File uploaded");


session.setAttribute("jsonObject", jsonData.toString());

return "JSON";

}
public String getFileCaption() {
return fileCaption;
}
public void setFileCaption(String fileCaption) {
this.fileCaption = fileCaption;
}
public File getUpload() {
return upload;
}
public void setUpload(File upload) {
this.upload = upload;
}
public String getUploadContentType() {
return uploadContentType;
}
public void setUploadContentType(String uploadContentType) {
this.uploadContentType = uploadContentType;
}
public String getUploadFileName() {
return uploadFileName;
}
public void setUploadFileName(String uploadFileName) {
this.uploadFileName = uploadFileName;
}


}

STRUTS.XML
<action name="doUpload" class="tst.StrutsFileUpload">
<interceptor-ref name="basicStack"/>
<interceptor-ref name="fileUpload">
<param name="allowedTypes">
image/png,image/gif,image/jpeg,application/octet-stream,application/pdf
</param>
<param name="maximumSize">
<!-- approx 2MB in bytes-->
2097152
</param>
</interceptor-ref>
</action>

Thanks in advance for anyone sharing their experience in this.

Nikoms
4 Feb 2008, 3:01 AM
Nikoms
You have to put the browse button inside some container element with overflow:hidden style.

Show the dialog and move it to the -1000, -1000 offset.

Perfect i tried the overflow, and it's perfect now! Thank you very much!

To hide the dialog, do you think it's better to show it in the -1000 offset? Is it faster than hide it?

MaximGB
4 Feb 2008, 4:30 AM
To hide the dialog, do you think it's better to show it in the -1000 offset? Is it faster than hide it?
There were reports that safari doesn't like hidden <input type='file'> fields.

MoShAn480
5 Feb 2008, 12:10 PM
Hi, I got it to work with struts2 actions, but then reverted to using plain servlet inorder to do a streamed upload. Struts2 actions do not support streamed upload yet and actually physically create the file on the server (unless that is what you want to do).

Anyway, I had similar problem as you, and it turned out, i needed some extra libs in my path. One of them was the apache commons fileupload jar. If this is the case for you, your servers error logs should state this. Also note, the errors may not be appearing in you application logs based on the server you are using (what will appear in your servers error log or stdout log).

Hope this helps.

buenavida
6 Feb 2008, 12:12 AM
Hi, I got it to work with struts2 actions, but then reverted to using plain servlet inorder to do a streamed upload. Struts2 actions do not support streamed upload yet and actually physically create the file on the server (unless that is what you want to do).

Anyway, I had similar problem as you, and it turned out, i needed some extra libs in my path. One of them was the apache commons fileupload jar. If this is the case for you, your servers error logs should state this. Also note, the errors may not be appearing in you application logs based on the server you are using (what will appear in your servers error log or stdout log).

Hope this helps.

First of all Moshan480, thanks for taking the time to share your experience.
I have always had commons-fileupload-1.2.jar in my WEB-INF/lib.

I found out that the fileUploadInterceptor appers to be executed, as I played with the setting of the interceptor-ref, i.e
:



<param name="allowedTypes">
image/png,image/gif,image/jpeg,application/octet-stream,application/pdf
</param>


In my server log, I can see that FileUploadInterceptor is rejecting file uploaded using the UploadDialog which is not any of the above types that I allowed. So this is good news, however my action does not seem to be populated by the Interceptor with the details of the uploaded file.



<action name="doUpload" class="tst.StrutsFileUpload">
<interceptor-ref name="basicStack"/>
<interceptor-ref name="fileUpload">
<param name="allowedTypes">
image/png,image/gif,image/jpeg,application/octet-stream,application/pdf
</param>
<param name="maximumSize">
<!-- approx 2MB in bytes-->
2097152
</param>
</interceptor-ref>
</action>

Any other pointer or special config thing you needed to do?

Best Regards

redlz2500
6 Feb 2008, 10:56 PM
thanks for your Ext.ux.UploadDialog
but i think ,though you add a place for different language
(i mean i18n)
why don't you put the language inteface or tips in another js file?
it should be useful for people who use another language
sorry for my english.

MaximGB
7 Feb 2008, 2:14 AM
It does. Look at the locale folder of the extension there is ru.utf8.js it's a russian translation of messages and tips, all you have to do is include ru.utf8.js after Ext.ux.UploadDialog.js and everything will be translated into russian. You can do the same for you own language. Or you can set i18n in dialog's config and dialog instance will use your own messages.

KRavEN
8 Feb 2008, 5:36 AM
Can you add an option to set the file input name? I looked at the source and see that it's hardcoded to 'name' but couldn't see a way to add it as an option.

BTW, we're integrating this plugin with the sfExtjsThemePlugin for symfony.

MaximGB
8 Feb 2008, 7:08 AM
Can you add an option to set the file input name? I looked at the source and see that it's hardcoded to 'name' but couldn't see a way to add it as an option.
Done.

KRavEN
8 Feb 2008, 8:17 AM
Thank you. Love the addon btw. It "Just Works".

redlz2500
8 Feb 2008, 5:41 PM
It does. Look at the locale folder of the extension there is ru.utf8.js it's a russian translation of messages and tips, all you have to do is include ru.utf8.js after Ext.ux.UploadDialog.js and everything will be translated into russian. You can do the same for you own language. Or you can set i18n in dialog's config and dialog instance will use your own messages.
I am sorry I make such a stupid question
I'm try to translate to my mother language now

and, i think two function is useful:
1, the filename
when client choose file, the filename show in the grid is fullpath, it's hard to client to check which file is chose, as he has to resize the column 'Filename' to watch the real file name
could you give us an option to show filename & fullpath?
or a column named Filename show the real filenam, with tips as Fullpath of the file?

2, only allow single file
maybe it is just suit for me, as i am so lazy so i decide use your UploadDialog to upload all file which is less than 20M
but more times i only need the client only can upload one file
so i add some code as this:(still in test, but run well)


var upd = new Ext.ux.UploadDialog.Dialog();

upd.on({
fileadd:bbcd,
fileremove:bbcd,
resetqueue:bbcd,
uploadsuccess:bbcd,
uploaderror:bbcd,
uploadfailed:bbcd
});

//this is a test function force client can only upload one file to server
//the function will used to file update
//and more, when a single file upload success, the uploaddialog will auto close to aviod user upload again
//to new file, the function will not work
//redlz2500 2008-02-07
function bbcd(dialog,fname){
if(dialog.getQueuedCount()){
dialog.grid_panel.getBottomToolbar().x_buttons.add.disable();
}else{
dialog.grid_panel.getBottomToolbar().x_buttons.add.enable();
}
}

e...what's your opinion to my function? coulde you give me some advice?

markusreimers
11 Feb 2008, 8:09 AM
Hey guys!

I have a little problem using the UploadDialog.

This ist my code:


handler: function(){
uploaddialog = new Ext.ux.UploadDialog.Dialog({
url:'../sysconfig/handleUserimport.php',
baseParams: {module: 'uploadfile', resptype: 'json'},
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true
});
uploaddialog.show();
}


Now my firebug control:
The php-file is loaded, but there is still no $_POST or $_FILES transferred.

I also checked the php.ini.
file_uploads = on
and
upload_tmp_dir = /tmp/ (I also tested system standard)

Now I have no more idea where the error is. Can you help me? Thanks!

MaximGB
11 Feb 2008, 8:31 AM
First that I can see is that instead of baseParams should be base_params

petoile
11 Feb 2008, 9:07 PM
Hey, great work!
I'm trying to use your component with a java servlet on the backend.
The file is uploaded to the server without any problem but my java class returns a 500 error claiming that the request content-type is null.

I tried modifying the createForm function in Ext.ux.UploadDialog js in order to set the content type to multipart/form-data.

createForm : function()
{
this.form = Ext.DomHelper.append(this.body, {
tag: 'form',
method: 'post',
action: this.url,
style: 'position: absolute; left: -100px; top: -100px; width: 100px; height: 100px',
isUpload: 'true'
...
enctype: 'multipart/form-data'
...
headers: {'content-type':'multipart/form-data'}
});
},


I have tried setting isUpload:true,
I also tried enctype:'multipart/form-data',
and finally I tried headers: {'content-type':'multipart/form-data'}

but I keep getting the same error... I'm sure I'm missing something here, any ideas?

Thanks a lot!

lobo-tuerto
11 Feb 2008, 10:39 PM
If you want to embed your extension inside a tab panel, how would you accomplish it?

I'm using the desktop 2.0, and I'm trying to display it inside a window that contains a tab panel, with no success until now.

Thanks, in advance.

MaximGB
12 Feb 2008, 1:01 AM
petoile
Use the fiddler proxy to see what headers are actually sent to your servlet. I'm almost sure that headers are OK, and the problem is on the server side.

lobo-tuerto
Since the UploadDialog is a descendant of Ext.Windows I guess it's impossible to embed into a Ext.Panel. I have plans to refactor the extension and divide it on UploadPanel and Dialog window with panel embedded but it's not the first item in my current todo list.

mehdi_kazemi
12 Feb 2008, 2:12 AM
Very nice, MaximGB.
=D>

enterco
12 Feb 2008, 12:32 PM
Thanks for sharing this plugin, it's very nice and easy to use! I couldn't manage to integrate Saki's uploadform into my app, but with the uploaddialog everything went fine!

Luerssen
12 Feb 2008, 2:04 PM
Great work, thanks you very much.

P.S. can showbody show me, hot to dynamically change params? ('url' of Dialog) ? And add some additional post-variables?

MaximGB
13 Feb 2008, 2:26 AM
There are methods getUrl()/setUrl() and getBaseParams()/setBaseParams() in the dialog class. Use them.

lobo-tuerto
14 Feb 2008, 11:56 PM
Hello MaximGB,

I'm testing your extension with a Rails backend.

So far it uploads the file correctly (I can see the files saved in the server), but the reporting has some issues.
When checking what response text the dialog is trying to decode this is what I've got:

<pre>{"success": true}</pre>

Obtained with:

console.log(response.responseText);

In:

onAjaxSuccess : function(response, options)
{
var json_response = {
'success' : false,
'error' : this.i18n.note_upload_error
}
try { var json_response = Ext.util.JSON.decode(response.responseText); } catch (e) {}
console.log(response.responseText);
var data = {
record: options.record,
response: json_response
}

if ('success' in json_response && json_response.success) {
this.fsa.postEvent('file-upload-success', data);
}
else {
this.fsa.postEvent('file-upload-error', data);
}
}

How can I get rid of those <pre> tags? why is the server sending those? why your demo works without problems?


Best regards.

MaximGB
15 Feb 2008, 5:05 AM
To get get rid of those tags you should filter them. The server didn't send them, it's browser who adds them. I guess it's related to DOCTYPE (I use XHTML 1.0 Strict) or maybe Content-Type response header. It doesn't matter, I've modified the extension to filter those bogus tags. Try it now.

lobo-tuerto
15 Feb 2008, 5:45 PM
Thank you MaximGB, it's all good now ;)

I hope they release a new version of Opera soon, seems like my 9.50b1 in Ubuntu doesn't like something about:

json_response = Ext.util.JSON.decode(rt);

That lines throws an exception when it tries to decode the text:

{"success": true}

bleh

fellfresse
19 Feb 2008, 10:14 AM
Hy,

i want to use this uploaddialog, but i can't get it to work.
i have a tabpanel that holds the button to show the upload form (works)
when i add a file and click on upload i get an error.

in firebug i can't see any response from my php script. in this script i only want to print what it's receive via POST and GET, but this doesn't work.

here my code:
the tab with the button


{
title: 'Foto',
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Foto',
name: 'Picture',
readOnly: true,
anchor:'40%',
tabIndex: 17
},
button = new Ext.Button({
id: 'show-button',
text: 'Dateiupload starten',
handler: showDialog
})]
}


than the functions for the upload dialog


var dialog = null;
var button = null;
var file_list_tpl = new Ext.Template(
"<div class='file-list-entry'>Die Datei {name} wurde erfolgreich gespeichert.</div>"
);
file_list_tpl.compile();

function showDialog(button)
{
getDialog().show(button.getEl());
}

function getDialog()
{
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'modules/customer/saveFileUpload.php',
reset_on_hide: false,
allow_close_on_upload: false,
upload_autostart: false,
permitted_extensions: ['jpg', 'jpeg', 'gif', 'png'],
post_var_name: 'upload'
});

dialog.on('uploadsuccess', onUploadSuccess);
}
return dialog;
}

function onUploadSuccess(dialog, filename, resp_data)
{
var parts = filename.split(/\/|\\/);
if (parts.length == 1) {
filename = parts[0];
}
else {
filename = parts.pop();
}
file_list_tpl.append('file-list', {name: filename});
}


and my php file



print_r($_POST);
print '<br/><br/>';
print_r($_GET);


does anyone could help me with the php backend?

MaximGB
19 Feb 2008, 12:44 PM
Use Fiddler proxy to see what is sent from the browser and what's in server response.

buenavida
19 Feb 2008, 11:03 PM
Thanks MaximGB,

I have succcessfully integrated your fileUpload dialog.

Initially I tried to integrated it with Struts2, Sitemesh in a J2EE environment, due to unresolved hurdle at the Struts2 end, I decided to receive the file uploaded using a humble servlet.

It works well. Work well done

Salute
:):)

fellfresse
19 Feb 2008, 11:22 PM
@MaximGB
i can't use this tool cause i have no running windows installation.

MaximGB
20 Feb 2008, 4:00 AM
Probably you've got an error course uploaddialog expects a valid JSON response, but you gave it some mess ;) Try to incapsulate the information you need in JSON response, like this.


echo json_encode(
array(
'success' => true,
'message' => implode(',', array_keys($_FILES))
)
);

Manikandan
21 Feb 2008, 6:02 AM
hi,

your plugin is uploading one file at a time,
is there any way to upload bulk of files at a time,

could u tell me changes that i want to do in your plugin to perform bulk files upload.

Thanks in advance

MaximGB
21 Feb 2008, 6:16 AM
It's impossible with plain HTML/Javascript. There is SWF Upload Panel (http://extjs.com/forum/showthread.php?t=19082) plugin it should be capable to do the task

lossendae
26 Feb 2008, 3:41 AM
Great extension!

I've successfully integrated it in my application.

The only "issue" is that i can't retreive any response.message in JSon from my php files.

Firebug only gives an error for my php file (either the file is uploaded/erased/failed) nothing on the POST section, but POST are passed since my files are renamed with a variable from a textfield.

Seems that it retreive data from the php file since no error window show on success, but if failure, impossible to show the response.

Any ideas?

My js:



var dalleBtn = dalleFld.addButton({
text: 'Photo de la dalle',
disabled:true,
handler: function(){
uploaddialog = new Ext.ux.UploadDialog.Dialog({
url:'admin/upload.php',
base_params: {task:'dalle', name:sav.getValue()},
allow_close_on_upload: true,
modal:true,
title: 'Ajoutez photo de la dalle',
upload_autostart: true,
permitted_extensions: ["jpg","JPG"]
});

uploaddialog.show();

uploaddialog.on({ uploadsuccess: function(updialog, file, response){
dalle.load({
url: ['admin/pics.php'],
params:{
task: 'dalle',
name: sav.getValue()
},
text: "Collecting data...",
scripts : true
});
uploaddialog.hide();
modelBtn.enable();
sav.disable();
},
uploadfailed: function(updialog, file) {
alert('Warning','Impossible d\'envoyer la photo.');
uploaddialog.hide();
},
uploaderror: function(updialog, file, response) {
Ext.MessageBox.alert('Warning','response.message'); //(response.message);
uploaddialog.hide();
}
});
}
});
and the php file:

[php]
function defaultPics($name)
{
$fichier = basename($_FILES['file']['name']);
$uploaddir = '../data/pics/';
$uploadfile = $uploaddir . $fichier;
$newfichier = $name.'dalle.JPG';

$response = array();

if (file_exists($uploaddir.$newfichier)) {
unlink($uploaddir.$newfichier);

if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {

rename($uploadfile , $uploaddir.$newfichier);
resizeToFile($uploaddir.$newfichier,'800','600',$uploaddir.$newfichier,'90');
chmod($uploaddir.$newfichier, 0644);

$response['success'] = true;
$response['message'] = 'Photo sauvegard

wisecounselor
26 Feb 2008, 9:43 AM
This is a great extension !

Can anyone help me, I need to add three text fields somewhere on the upload dialog, so a user can enter up to three items when they upload files. I have read the source.

I tried to append the html in the createForm method, it didn't work well. I added them as items in the GridPanel, which might be the best way, not sure yet.

I am following the flow of processing actions, and I think I can modify the code to add my own form panel, I'm just not sure if it will submit my three fields along with the file uploads.

Brian

MaximGB
26 Feb 2008, 10:10 AM
lossendae
Can you give the link to online demo? I'll try to solve the case.

wisecounselor
You can try to subscribe to fields change events and set upload dialog base params object according to those fields values.

wisecounselor
26 Feb 2008, 11:03 AM
I'm adding a form panel to the grid portion of the dialog, then when I submit the files, I will grab the values of the 3 fields and add them to the upload params.

Thanks again for the great tool.

Can you tell me how you came up with your whole dispatch type model, that seems like a design pattern that might apply to other applications.
Brian

MaximGB
26 Feb 2008, 11:40 AM
Can you tell me how you came up with your whole dispatch type model, that seems like a design pattern that might apply to other applications.
Hm, it's a Final State Automata (State machine)
http://en.wikipedia.org/wiki/Finite_state_machine
and it's the basics of IT Science. The upload dialog is implemented as a Mealy machine.

wisecounselor
26 Feb 2008, 12:31 PM
Didn't mean to waste your time, I'm not formally trained in "IT Science"

lossendae
27 Feb 2008, 2:28 AM
[quote=MaximGB;129475]lossendae
Can you give the link to online demo? I'll try to solve the case.

Here is a test link : uploaddialog (http://dev.vestel-france.fr/test/demo.html)

Manikandan
28 Feb 2008, 1:39 AM
hi ,
could u tell how to set encryption type" multipart file" property in ur code


sorry for my bad english,

thanks

MaximGB
28 Feb 2008, 3:44 AM
.

MaximGB
28 Feb 2008, 3:48 AM
Losendale
Your server returns
Warning: move_uploaded_file(pics/avatar100x100.jpg) failed to open stream: No such file or directory in /var/www/www.vestel-france.fr/htdocs/test/upload.php on line 89

MaximGB
28 Feb 2008, 3:56 AM
Manikandan
Find createForm() method, end set enctype in form Dom specification object.
p.s. I've troubles with forum, can't post larger messages.

lossendae
28 Feb 2008, 5:44 AM
Losendale
Your server returns
Warning: move_uploaded_file(pics/avatar100x100.jpg) failed to open stream: No such file or directory in /var/www/www.vestel-france.fr/htdocs/test/upload.php on line 89

Sorry i had make a mistake on my code.

The upload form now is working. but upload.php return success false in firebug.

MaximGB
28 Feb 2008, 10:13 AM
It seems that demo is gone already, so pleese be more specific.

mrdavinci
28 Feb 2008, 11:27 PM
How to upload file that have size more than 1MB.
if file size less than 1M it work.
i using php5 and apache

What i should setting your code?

help me!

lossendae
29 Feb 2008, 12:48 AM
It seems that demo is gone already, so pleese be more specific.


My bad again, here is the finally good URL (http://www.vestel-france.fr/test/demo.html).

MaximGB
29 Feb 2008, 1:07 AM
mrdavinci
Max allowed upload file size isn't depended from UploadDialog.
You should check your php.ini setting upload_max_filesize and post_max_size

MaximGB
29 Feb 2008, 1:30 AM
lossendae
I don't see any errors on the demo, I've upload my avatar and got following response from the server:

HTTP/1.1 200 OK
Date: Fri, 29 Feb 2008 09:10:27 GMT
Server: Apache
Content-Type: text/html; charset=ISO-8859-1
Content-Length: 44

{"success":true,"message":"Photo sauvegard"}

quantumrider
2 Mar 2008, 9:17 AM
any chance you could add a parameter to specify maximum number of files to be uploaded?

as well as allow a list of already uploaded previously files to be passed?

MaximGB
2 Mar 2008, 9:36 AM
any chance you could add a parameter to specify maximum number of files to be uploaded?
You could attach a handler to filetest event and return false if queue length is more then required.


as well as allow a list of already uploaded previously files to be passed?
I can do that, but it's not clear what to do with previously uploaded files list when user clicks the reset queue button or removes one of them. Should file be removed, or should it be protected from removing?

quantumrider
2 Mar 2008, 9:43 AM
having a setting for maximum allowed files would be really helpful and simple.

there could be a switch allowing or disallowing deletion of files previously uploaded so the interface can reflect that...

also very helpful would be a preview thumbnail if url for it is specified from the server...

we are adding your extension to our setup right now, as it is right now, after file is uploaded in our interface, the server returns the filename of the thumbnail to preview the image, would that be possible?

here is the image of the grid with the preview thumbnail, something similar in your extension would be nice for image types...

http://www.crm20.com/image1.gif

jon.whitcraft
3 Mar 2008, 12:37 PM
I agree a max file limit would be great in the extension.

kk_kkk
4 Mar 2008, 9:38 PM
any chance to select more than one file at the same time .

the file select dialog seems to be permittd to select the only one file.

Thks! kk_kkk

MaximGB
4 Mar 2008, 11:37 PM
No this is impossible with pure html and javascript.

jon.whitcraft
5 Mar 2008, 5:50 AM
Any chance of you building in support for max number of files?

MaximGB
5 Mar 2008, 6:00 AM
Should it be the maximum queue length, or should it be the maximum total files uploaded during current session?

kk_kkk
5 Mar 2008, 7:32 AM
well , good work anyway.,
thkS in advance

kk_kkk

jon.whitcraft
5 Mar 2008, 7:47 AM
I vote for total files uploaded.

jon.whitcraft
5 Mar 2008, 11:33 AM
I just created a patch to support max_file_size as i tried to use it in the base_params option and it didn't work.

What i did was just add a config option called max_file_size and it defaults to false

then in the createForm() method i added this code



if(this.max_file_size) {
this.input_file = Ext.DomHelper.append(
this.form,
{
tag: 'input',
type: 'hidden',
name: 'MAX_FILE_SIZE',
value: this.max_file_size
},
true
);
}
which just created a hidden field in the form with the value you passed in.

let me know what you think.

** Edit ** Attached Patch File.

MaximGB
5 Mar 2008, 1:34 PM
I think it's a good addition or better say harmless ;) since the PHP's form MAX_FILE_SIZE feature is very questionable. I've never use it. I'll upgrade the extension to support the max number of files feature during this weekend and will add your patch too. Thanks.

jon.whitcraft
5 Mar 2008, 1:38 PM
Cool thanks! Can't wait to see an update!

anjelika
5 Mar 2008, 11:59 PM
Hi Maxim,
Nice extension, thank you!
Is it possible to use it as adding the widget to a form also, or only as a pop-up window?
Also, is there a way to parse the uploaded file before uploading it to the server? I need to upload only valid file formats (csv), or the only way is to upload it and then parse it and delete it in case it does not comply with my needs? (I know this could be more a server side related question than a Ext one)
Thanks

kaki
19 Mar 2008, 3:26 AM
Very nice work MaximGB !=D>

kaki
20 Mar 2008, 11:14 PM
function getDialog()
{
fileCount = 0;
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload',
title: 'File Uploader',
reset_on_hide: false,
allow_close_on_upload: false,
upload_autostart: true,
base_params: {reqaction: 'uploadfile', resptype: 'json'},
permitted_extensions: ['xml']
});
dialog.on('uploadsuccess', onUploadSuccess);
dialog.on('uploadsuccess', onUploadSuccess);
dialog.on('filetest', checkFileCount);
dialog.on('resetqueue', function(){fileCount=0;});
dialog.on('fileremove', function(){fileCount--} )
}
return dialog;
}

specify your servlet as url like this: url: 'upload',, keep it in mind it's a HTTP POST, ;)


thank you !

but what means that "HTTP POST"???

sae
24 Mar 2008, 2:05 AM
good dialog, but there is 2 problem working with it..
1. I cannot add many files in one time in fileselect window.. (in windows file dialog i can select only 1 file per time :( there is any possibility to make possible select many file per time? )
2. cosmetic: when the windows show.. there is "waiting" status on the top.. users doesn't understand what this message about..

MaximGB
24 Mar 2008, 2:46 AM
1. Impossible to implement due to HTML input file element limitations.
2. You can change all dialog strings as you like. Just provide you own i18n object with the strings in dialog's config, or override Ext.ux.UploadDialog.Dialog.i18n globaly.

odara_sena
27 Mar 2008, 6:29 AM
Great widget!!
Taking a look at your code I didn't see a function to disable the browser button :((. Is it true? So, how can i do this?

Thanks and sorry for my english! :">

ffrr
3 Apr 2008, 7:30 AM
Ok, first of all: great extension, and kudos to you, MaximGB.

I've run into a minor, but very annoying problem, maybe someone here can help me with it.

My setup: Ext 2.0.2 over Prototype 1.6.0.2 (with the prototype-adapter).

My problem:
After adding a file, the upload starts, finishes correctly, the response from the server is returned in correct form (i've checked thru fiddler). Everything should be alright, but this is where the problem pops up and i get the following exception in firebug:


node has no properties
[Break on this error] return Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : ...

Any ideas? I tried to track down the exception in Firebug, but with no luck.

MaximGB
3 Apr 2008, 9:08 PM
Please try it with Ext.Base adapter first. If the error will still exist then let's investigate it deeper.

ffrr
3 Apr 2008, 10:31 PM
Please try it with Ext.Base adapter first. If the error will still exist then let's investigate it deeper.

Well, problem solved. :D Thanks a lot, Maxim. So the problem is in the prototype adapter, i suppose. Nevermind, i can use the base adapter instead.

daihuarong
7 Apr 2008, 1:04 AM
I use your dialog very well in FF,but in IE6,give me a wrong message
"The object does not support this attribute or the method" at the line which color is red


function build() {
var dialog = new Ext.ux.UploadDialog.Dialog( {
url : 'imageUpload.action',
reset_on_hide : false,
allow_close_on_upload : true,
upload_single_file : false ,
upload_autostart : false
});

var btn = new Ext.Button( {
text : 'Launch Sample Uploader',
renderTo : 'btn',
handler : function() {
dialog.setBaseParams({'id':2});
dialog.show();//at this line
}

});

MaximGB
7 Apr 2008, 4:02 AM
Could you provide a link to the online demo with the error?

scalerocebrian
7 Apr 2008, 6:36 AM
Hello Maxim,

congratulations for your widget!!
I found it in the page: GWT-EXT-Ux Showcase.
There the example code imports the class:
import com.gwtextux.client.widgets.upload.UploadDialog;

please, could U provide us with this class??

Or... where can i download it?

We would be grateful for it to you.

Thanks a lot!!

mlim1972
7 Apr 2008, 6:45 AM
scalerocebrian,
Widgets in gwt-ext-ux are gwt wrappers to ext-ux extensions... If you browse the source, you can see the implementation... You can also build from source...

http://code.google.com/p/gwt-ext-ux/source/browse/trunk/main/src/com/gwtextux/client/widgets/upload/UploadDialog.java

thx Maxim for the great UX!

scalerocebrian
7 Apr 2008, 6:48 AM
thank you mlim1972!!

i just seen that there is a new release of gwt-ext-us that include fileupload facilities.

sorry!!!

mlim1972
7 Apr 2008, 7:09 AM
Yeah, the new zip is out! Enjoy!

daihuarong
7 Apr 2008, 7:07 PM
i have found the resean which caused by JSP page .because i added some letter in my jsp page
like this:


<body>
THIS PAGE FOR TEST PIC UPLOAD AND DOWNLOAD
</body>

in fact ,i should do like this:


<body>
<div>THIS PAGE FOR TEST PIC UPLOAD AND DOWNLOAD</div>
</body>

scalerocebrian
8 Apr 2008, 2:52 AM
hello,
do anybody know how to change the default-language in UploadDialog class??

thanks!!

MaximGB
8 Apr 2008, 6:57 AM
http://extjs.com/forum/showthread.php?p=120692

scalerocebrian
9 Apr 2008, 4:00 AM
i have read the code and i found the strings than i had to change.
i translated to spanish, my native language.

thank you Maxim!

wout
10 Apr 2008, 5:03 PM
I made a modification to your fantastic UploadDialog component:

// var filter = rt.match(/^<pre>((?:.|\n)*)<\/pre>$/i);
var filter = rt.match(/^<[^>]+>((.|\n)*)<\/[^>]+>$/);

This is needed because Safari 3.1 puts a strange <pre> tag around the json result. This tag contains some attributes, so testing for <pre> is not enough. The new regex checks for the '<' some characters '>'[the result]'</' some characters '>'.

MaximGB
10 Apr 2008, 9:08 PM
Thanks, I'll add new filter into the distro soon.

aibathest
18 Apr 2008, 7:48 PM
Here is an example of a function that can be used to limit files in upload queue through variable max_upload_files, hope it helps:

[PHP] function getDialog()
{
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'IFileUpload.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false,
post_var_name: 'file'
});

uploaded_files = 0;
max_upload_files = 2;

function checkUploadedFiles(){
uploaded_files++;
if(uploaded_files > max_upload_files){
Ext.Msg.show({
title: 'Mensaje',
msg: 'Se han agregado a la lista el m

aibathest
18 Apr 2008, 7:55 PM
Ive seen a lot of questions about accesing data in $_FILES with php, this is a code example that outputs some of this information in the note column after a file transfer. This data is not accesible via firebug and I replaced the variable name sent in dialog with [key($_FILES)] for simplicity:


$response = array(
'success' => true,
'message' => "filename ".$_FILES[key($_FILES)]['name']." size ".$_FILES[key($_FILES)]['size']." tmp_name ".$_FILES[key($_FILES)]['tmp_name'];
);
$data = json_encode($response);
echo $data;

gkassyou
29 Apr 2008, 7:05 AM
Hi. I'm trying to use the extension with another server soft language other than php. I can't see the post messages in the debugger so I'm not sure what is being posted?
I see $__FILES in the forum posting but not sure what that means?

any help from JSP or ASP guys.

MaximGB
29 Apr 2008, 12:15 PM
http://extjs.com/forum/showthread.php?p=111402#post111402
http://extjs.com/forum/showthread.php?p=149158#post149158

anjelika
9 May 2008, 12:59 AM
Hi,
I'm trying to extend yout extension in order to display the already uploaded files also.
This involves adding a second grid along with a second toolbar (for eventually deleting already uploaded files).
However, I have some difficulties achieving this solution, some advice from you could help.
Here is how I implemented the second grid:


var cm = new Ext.grid.ColumnModel([
{
header: this.i18n.state_col_title,
width: this.i18n.state_col_width,
resizable: false,
dataIndex: 'state',
sortable: true,
renderer: this.renderStateCell.createDelegate(this)
},
{
header: this.i18n.filename_col_title,
width: this.i18n.filename_col_width,
dataIndex: 'filename',
sortable: true,
renderer: this.renderFilenameCell.createDelegate(this)
},
{
header: this.i18n.note_col_title,
width: this.i18n.note_col_width,
dataIndex: 'note',
sortable: true,
renderer: this.renderNoteCell.createDelegate(this)
}
]);

var cm2 = new Ext.grid.ColumnModel([
{
header: 'Fisier',
width: 450,
resizable: false,
dataIndex: 'fisier',
sortable: true,
renderer: this.renderStateCell.createDelegate(this)
}
]);
//first grid panel (alreay implemented in original version)
this.grid_panel = new Ext.grid.GridPanel({
ds: store,
cm: cm,

x: 0,
y: 22,
//anchor: '0 -22',
border: true,
height: 100,

viewConfig: {
//autoFill: true,
//forceFit: true
},

bbar : new Ext.Toolbar()
});

//grid panel 2
this.grid_panel2 = new Ext.grid.GridPanel({
ds: store,
cm: cm2,

x: 0,
y: 122,
//anchor: '0 -22',
border: true,
height: 120,

viewConfig: {
//autoFill: true,
//forceFit: true
},

bbar : new Ext.Toolbar(),
});

this.grid_panel.on('render', this.onGridRender, this);
//this.grid_panel2.on('render', this.onGridRender, this);

this.add(this.grid_panel);
this.add(this.grid_panel2);

this.grid_panel.getSelectionModel().on('selectionchange', this.onGridSelectionChange, this);
//this.grid_panel2.getSelectionModel().on('selectionchange', this.onGridSelectionChange, this); //this triggers an error
},

fillToolbar : function()
{
var tb2 = this.grid_panel2.getBottomToolbar();
console.log (tb2);
tb2.x_buttons.add = tb2.addItem(new Ext.ux.UploadDialog.TBBrowseButton({
input_name: this.post_var_name,
text: this.i18n.add_btn_text,
tooltip: this.i18n.add_btn_tip,
iconCls: 'ext-ux-uploaddialog-addbtn',
handler: this.onAddButtonFileSelected,
scope: this
})); //this also triggers an error


var tb = this.grid_panel.getBottomToolbar();
tb.x_buttons = {}

tb.x_buttons.add = tb.addItem(new Ext.ux.UploadDialog.TBBrowseButton({
input_name: this.post_var_name,
text: this.i18n.add_btn_text,
tooltip: this.i18n.add_btn_tip,
iconCls: 'ext-ux-uploaddialog-addbtn',
handler: this.onAddButtonFileSelected,
scope: this
}));
....

I think the problem might be in the way in the way you are initiating the components (I didn't full understand the init process).
Thanks!

fercho07
19 May 2008, 1:24 PM
Hi, i'm trying to use your extension that looks very pretty but i have no luck with it. I'm not getting any information from the server. I read all the thread so, i know that there is implemented with no XHR so there will be no response in firebug. I don't know how to see what's wrong.


dialog = new Ext.ux.UploadDialog.Dialog(null, {
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
proxyDrag: true,
resizable: true,
constraintoviewport: true,
title: 'File upload queue.',
url: '/propiedades/instantsite/upimagen/',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
base_params: { reqaction: 'uploadfile', resptype: 'json' }
});
dialog.show();


Thanks.

MaximGB
20 May 2008, 9:42 AM
Use fiddler proxy tool to view the server response.
You upload dialog use following url: http://www.3roles.com.ar/propiedades/instantsite/ is it ok?
Since the response from that URL is full html page code.

wangtong40
21 May 2008, 12:21 AM
Very nice work MaximGB !

anjelika
21 May 2008, 2:11 AM
Hello Maxim,
Another question, please...
Is it possible to send another parameters along with the $_FILES ['file'] ['name'] to the upload URL?
I am trying to upload files to diffrent campaigns which have unique ids.
I transmit the ID to the uploader by adding another property but as soon as an upload is successfull I would like to transfer the Id also to the final (upload url) page so I can save the file link in a database along with the corespondent Id.
I saw something like base_params in your code but don't know exacly how to use it.
Thanks

kuiava
21 May 2008, 4:25 AM
Hi, first sorry by my english (is very bad :)).

This extension is very good (nice work!), but i have a problem: the Ext.Ajax.Request not work (line 1185). In firebug, not XmlHttpRequest appears.

Thank you for your attention.

MaximGB
21 May 2008, 4:28 AM
anjelika
Here is the base params sample.


dialog.setBaseParams({
id: 'some unique id',
another_param: 'some value'
});

The post body will also have id and another_param fields with corresponding values.

MaximGB
21 May 2008, 4:31 AM
Hi, first sorry by my english (is very bad :)).

This extension is very good (nice work!), but i have a problem: the Ext.Ajax.Request not work (line 1185). In firebug, not XmlHttpRequest appears.

Thank you for your attention.

What adapter do you use (prototype, ext_base, jquery)?
Can you post the sample code where you use the dialog?

rhymes
22 May 2008, 5:50 AM
I made some little fixes just feeding the source to http://jslint.com

I think it's an important tool because tracks a lot of stuff that our eye could easily miss and it helps with the cross compatibility.

I also fixed setAllowCloseOnUpload which was not assigning any values at all.

I posted the diff here: http://www.oluyede.org/files/Ext.ux.UploadDialog.js.diff

Let me know if it is useful and thanks for the great widget!

darlingke
23 May 2008, 10:52 PM
Hello everybody!
How can i get the uploaded file info with struts2?

pludikhu
25 May 2008, 1:42 AM
Hello everybody!
How can i get the uploaded file info with struts2?

By reading through this thread?!

:-?

MaximGB
25 May 2008, 3:03 PM
I made some little fixes just feeding the source to http://jslint.com

I think it's an important tool because tracks a lot of stuff that our eye could easily miss and it helps with the cross compatibility.

I also fixed setAllowCloseOnUpload which was not assigning any values at all.

I posted the diff here: http://www.oluyede.org/files/Ext.ux.UploadDialog.js.diff

Let me know if it is useful and thanks for the great widget!

Thanks for the bug report rhymes.

shuang
25 May 2008, 10:25 PM
this upload dialog very nice

but ,when i'm open page . it's occured error

and it's error at "ext-all.js" (check by using 'alert' before and after tag), but it's working usually

i don't know. anyone can help me?

i'm no serious with this problem :) thank you very much.

shuang
26 May 2008, 5:35 PM
i'm sorry.

may be mistake at my source.

because modify original source code for with my work.

neenhouse
28 May 2008, 10:07 AM
Great extension! I'm having issues, My base_params are not being posted, (I'm using firebug and I'm reading the "Net" Tab, which shows the regular posts)-- My server side is returning missing keys, which is my default message when It receives requests without particular keys in the post.


var upload_dialog = new Ext.ux.UploadDialog.Dialog({
url: 'php/operations.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
post_var_name: 'resume',
base_params:{view:'control', op:'command'}

});

Did I miss something? Everything else seems to work great.

fercho07
28 May 2008, 3:57 PM
Is there a way to config the extension to see the UploadDialog as a panel and not as a window ?

See you,
Fernando.

mystix
28 May 2008, 6:10 PM
Is there a way to config the extension to see the UploadDialog as a panel and not as a window ?

See you,
Fernando.

hint: A Window is (i.e. extends) a Panel.

erymski
29 May 2008, 9:33 AM
Hi Maxim!

Thanks for the nice dialog!

I'm experiencing a strange behavior - if 'filetest' event handler returns false then it will not be called again if I'll try to add the same file again. But the event handler gets called if I choose any other file.

I tried to create a snippet to demonstrate the problem:



function askUser() { return confirm('Are you sure?'); }

var config = {
url: 'http://test.com',
reset_on_hide: true,
allow_close_on_upload: false,
upload_autostart: false,
modal: true
};

var uploadDialog = new Ext.ux.UploadDialog.Dialog(config);
dialog.on('filetest', askUser);

uploadDialog.show();


The sample asks for confirmation on each added file.
To reproduce:
1. Click 'Add' button.
2. Select any file (say, 1.txt)
3. In confirmation dialog press 'Cancel'.
4. 'Add'
5. Select the same file again
=> No confirmation dialog shown.

Probably, the latest answer is cached by dialog if file is not changed.

Or did I missed something?

Thanks,
Eugene

MaximGB
29 May 2008, 12:03 PM
Thanks Eugene.
The bug confirmed and fixed.
Reason:
When the same file selected twice in a row the selectionchange event isn't fire from the hidden input type file element.

anjelika
30 May 2008, 2:45 AM
Great extension! I'm having issues, My base_params are not being posted, (I'm using firebug and I'm reading the "Net" Tab, which shows the regular posts)-- My server side is returning missing keys, which is my default message when It receives requests without particular keys in the post.


var upload_dialog = new Ext.ux.UploadDialog.Dialog({
url: 'php/operations.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
post_var_name: 'resume',
base_params:{view:'control', op:'command'}

});

Did I miss something? Everything else seems to work great.

Try: base_params:{'view':'control', 'op':'command'}

edui
30 May 2008, 11:37 PM
Hi ..

I want to integrate UploadDialog on the Wizard.
I have create object UploadDialog.Dialog and add it to the wizard Card. It has already shown but when I add new File the file didn't show on the grid list and error occured : el has no properties. I trace in firebug and the code ended here

addFileToUploadQueue(Object initialConfig=Object input_name=file text=Add)

or

input_file.appendTo(this.form);

My Code:


var upDialog = new Ext.ux.UploadDialog.Dialog({
url : 'json/uploadFile.action',
id : 'upload1',
reset_on_hide : false,
allow_close_on_upload : true,
upload_autostart : false
});

this.fourthCard = new Ext.ux.Wiz.Card({
id : 'ext-comp-method-upload',
title : 'Contents',
monitorValid : true,
items : upDialog
});
Any body knows how to solve this problems?

Thanks,
DM

tzqdo
3 Jun 2008, 8:16 AM
action code:

package my;

import java.io.ByteArrayInputStream;
import java.io.InputStream;
import java.sql.ResultSet;
import java.io.BufferedInputStream;
import java.io.BufferedOutputStream;
import java.io.ByteArrayOutputStream;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Date;

import javax.servlet.http.HttpServletRequest;

import org.apache.struts2.ServletActionContext;

import com.opensymphony.xwork2.ActionSupport;

public class FileAdmin extends ActionSupport {
private static String uploadDir = "data";
private InputStream resultStream;

public InputStream getResultStream() throws Exception {
return resultStream;
}

private File file;
private String fileFileName;
private String fileContentType;

public String getUploadFileName() {
return fileFileName;
}

public void setFileFileName(String fileName) {
this.fileFileName = fileName;
}

public File getFile() {
return file;
}

public void setFile(File upload) {
this.file = upload;
}

public void setFileContentType(String contentType) {
this.fileContentType = contentType;

}

public String getFileContentType() {
return this.fileContentType;
}


public String execute() throws Exception {
String msg = "{success:true,message:'No action'}";
resultStream = (InputStream) (new ByteArrayInputStream(msg.getBytes()));
return "Ajax";
}

public String upload() throws Exception {
java.io.InputStream is = new java.io.FileInputStream(file);
java.io.OutputStream os = new java.io.FileOutputStream(ServletActionContext.getServletContext().getRealPath(uploadDir)+"\\pic\\"
+ fileFileName);
byte buffer[] = new byte[8192];
int count = 0;
while ((count = is.read(buffer)) > 0) {
os.write(buffer, 0, count);
}
os.close();
is.close();
String msg = "{success:true,message:'upload success!'}";
resultStream = (InputStream) (new ByteArrayInputStream(msg.getBytes()));
//System.out.println("\n... In Struts action....."+ServletActionContext.getServletContext().getRealPath("data"));
return "Aajx";
}

public String del() throws Exception {
String msg = "{success:true,message:'del success'}";
resultStream = (InputStream) (new ByteArrayInputStream(msg.getBytes()));
return "Ajax";
}

}


part of struts.xml:

<action name="FileAdmin" class="my.FileAdmin">
<result name="Aajx" type="stream">
<param name="contentType">text/html;charset=UTF-8</param>
<param name="inputName">resultStream</param>
<param name="bufferSize">4096</param>
</result>
</action>

Ext CODE:

new Ext.Button({
text : '上传文件',
listeners : {
click : function(btnThis, eventobj) {
dialog = new Ext.ux.UploadDialog.Dialog({
url : 'FileAdmin!upload.inspire',
reset_on_hide : false,
allow_close_on_upload : true,
upload_autostart : true,
permitted_extensions : ['jpg', 'jpeg', 'gif', 'bmp', 'swf', 'flv', 'avi']
});
dialog.show('show-button');
}
}
})

markfigley
4 Jun 2008, 7:23 AM
Hello friends,
Is it possible to add an exclusion filter that specifies which file extension are not to be allowed. I need this because the client has given us the exclusion list instead of permitted file types.

If this is not built-in, I guess I can use the filetest event handler:-?

Regards
John

tzqdo
4 Jun 2008, 8:11 AM
Hello friends,
Is it possible to add an exclusion filter that specifies which file extension are not to be allowed. I need this because the client has given us the exclusion list instead of permitted file types.

If this is not built-in, I guess I can use the filetest event handler:-?

Regards
John

you may can reffer the document of struts2 about the config of struts.xml

markfigley
5 Jun 2008, 7:00 AM
Hello Maxim,
Can you please point me to the code for resolving bug when the same file selected twice in a row the selectionchange event isn't fire from the hidden input type file element.
Would it be easy to copy paste that part of the code into my existing file. I don't want to upgrade to a newer version yet since I had made some tweaks after I downloaded your code initially and we are in the process of UAT right now.

Regards
John

MaximGB
6 Jun 2008, 1:08 AM
markfigley
Find strings

// If file is not permitted then do nothing.
in the dialog's transition map and replace them with:

// If file is not permitted then resetting internal input type file.
action: this.resetAddButton
also add this method to the dialog:

resetAddButton : function(browse_btn)
{
browse_btn.detachInputFile();
},

markfigley
6 Jun 2008, 1:27 PM
Thanks Maxim, it worked

orno
7 Jun 2008, 5:26 AM
Hello, I'm new using Ext2, but it is wonderful.
I need upload files to server, I'm using Java, how I get the file on the server side?
I can see the post with the firebug?

MaximGB
7 Jun 2008, 5:34 AM
Read through the thread, there were Java server side examples.

orno
7 Jun 2008, 6:08 AM
I'm searching for a good example for me, but only I found one of Struts, I'm using Spring Framework, you can explain how will get the uploaded file on server side?

mystix
7 Jun 2008, 6:19 AM
@orno,

typing "spring framework fileupload" into google returned this:
http://static.springframework.org/spring/docs/2.0.x/api/org/springframework/web/multipart/commons/CommonsFileUploadSupport.html
which in turn uses (jakarta) Commons FileUpload.

you should read up on jakarta commons fileupload, and figure out how to upload files using a plain old html form first.

Hussein
7 Jun 2008, 6:56 AM
hello and very nice work with the Ext.ux....
but I have a problem, when I up load the file, the firebugs show the following error.

[Exception... "Component returned failure code: 0x80520012 (NS_ERROR_FILE_NOT_FOUND) [nsIDOMHTMLFormElement.submit]" nsresult: "0x80520012 (NS_ERROR_FILE_NOT_FOUND)" location: "JS frame :: file:///D:/Contratacion/Estudio/boberias/ext-2.0/ext-all.js :: anonymous :: line 17" data: no]

somebody knows how fix the problem??

fercho07
8 Jun 2008, 9:19 PM
hint: A Window is (i.e. extends) a Panel.

Yes, i know but i can't get it ! Can you help me ?



var bd = Ext.getBody();

var dialog = new Ext.ux.UploadDialog.Dialog({
// ******
height: 200,
width: 300,
autoShow: true,
closable: false,
draggable: true,
resizable: false,
renderTo: panel,

// ******
url: 'upload.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false,
permitted_extensions: ['jpg', 'jpeg', 'gif']
});
dialog.show();

var panel = new Ext.Panel({
frame:true,
border:true,
autoScroll: true,
height: 480,
collapsible:false,
layout:'fit',
title:'Imagenes',
renderTo: bd,
items: dialog
});

wsn24x7
23 Jun 2008, 6:12 PM
Thanks anjelika that is what was missing.


anjelika
Here is the base params sample.


dialog.setBaseParams({
id: 'some unique id',
another_param: 'some value'
});
The post body will also have id and another_param fields with corresponding values.

huoyan_21
25 Jun 2008, 1:28 AM
Thanks Maxim,your work nice
bu i use prototype,firebug say "node has no properties" when upload success,
can you fix it?

MaximGB
25 Jun 2008, 5:44 AM
It's probably a prototype bug, it was reported a couple of times already. I can't fix it since it's not related to Ext (I guess) and I don't use prototype. If you can provide a patch to fix the bug, I'll be glad to incorporate it into the extension. Or if you can investigate the problem deeply, it'll be helpful.

mahe4us
30 Jun 2008, 3:31 AM
Hi Maxim,

After a long search in forums, I have found your file dialogupload tool. Really it is very nice. But Iam facing some problems while using this dialogbox into the panel. Actually now it opens as a seperate window.. But I want to embed this dialogbox into my panel.

Also I tried this one, Ext.extend(Ext.ux.UploadDialog.Dialog, Ext.Panel instead of Ext.extend(Ext.ux.UploadDialog.Dialog, Ext.Window

But it didnt display anything in the screen.

Kindly help in this ....

Thanks & Regards,
Mahe

mahe4us
30 Jun 2008, 3:34 AM
Hi ferch0o7,

Have you find any solution for that?

anjelika
4 Jul 2008, 4:29 PM
Hi ..

I want to integrate UploadDialog on the Wizard.
I have create object UploadDialog.Dialog and add it to the wizard Card. It has already shown but when I add new File the file didn't show on the grid list and error occured : el has no properties. I trace in firebug and the code ended here

addFileToUploadQueue(Object initialConfig=Object input_name=file text=Add)

or

input_file.appendTo(this.form);

My Code:


var upDialog = new Ext.ux.UploadDialog.Dialog({
url : 'json/uploadFile.action',
id : 'upload1',
reset_on_hide : false,
allow_close_on_upload : true,
upload_autostart : false
});

this.fourthCard = new Ext.ux.Wiz.Card({
id : 'ext-comp-method-upload',
title : 'Contents',
monitorValid : true,
items : upDialog
});
Any body knows how to solve this problems?

Thanks,
DM

Hello,
Have you found any solution for that?
I am interested in integrating this extension in a wizard too.
Also, can anyone please give an example on how to use this (window) into a panel container as more people are looking for this feature.
mystix can you please help us? :)
Thanks

MaximGB
4 Jul 2008, 10:32 PM
I think it's hardly possible, to integrate UploadDialog into a panel, it should be direct descendant of Ext.Panel but not Ext.Window. I.e it should be UploadPanel.

Chemist
8 Jul 2008, 4:49 AM
can someone tell me, how can I add mask on the dialog before opens system dialog for file selection? Sometimes it opens two long and I need to close input from users before the file is selected...

Chemist
9 Jul 2008, 1:33 AM
One more issue - if I use russian language in IE 7 there is a problem with Add button. On the image shown this... The button works only if you click at the dotted area, but not in the button working area... If I would click on the plus sign - there is nothing happening...

In FireFox everything's fine.

http://i070.radikal.ru/0807/f9/3350b9904828.gif

MaximGB
9 Jul 2008, 2:26 AM
Fixed. Thanks for the bugreport.

christocracy
9 Jul 2008, 6:44 PM
Fabulous widget.

I'm writing a little wrapper for myself.

slight issue. I thought I'd try over-riding the FileRecord below:


/**
* re-define Ext.ux.UploadDialog.FileRecord
*/
Ext.ux.UploadDialog.FileRecord = Ext.data.Record.create([
{name: 'model'}, // <-- add a couple of extra fields
{name: 'column'},
{name: 'filename'},
{name: 'state', type: 'int'},
{name: 'note'},
{name: 'input_element'}
]);


However, in doing so, I didn't notice the state-machine constants and ended up clobbering them.



Ext.ux.UploadDialog.FileRecord.STATE_QUEUE = 0;
Ext.ux.UploadDialog.FileRecord.STATE_FINISHED = 1;
Ext.ux.UploadDialog.FileRecord.STATE_FAILED = 2;
Ext.ux.UploadDialog.FileRecord.STATE_PROCESSING = 3;


Clobbering those constants pretty much starts a DOS attack against yourself when you next try to upload a file.

try it yourself.


<script>
Ext.onReady(function() {
delete(Ext.ux.UploadDialog.FileRecord.STATE_QUEUE);
delete(Ext.ux.UploadDialog.FileRecord.STATE_FINISHED);
delete(Ext.ux.UploadDialog.FileRecord.STATE_FAILED);
delete(Ext.ux.UploadDialog.FileRecord.STATE_PROCESSING);
});
</script>


what to do?

MaximGB
10 Jul 2008, 12:19 AM
/**
* re-define Ext.ux.UploadDialog.FileRecord
*/
Ext.ux.UploadDialog.FileRecord = Ext.data.Record.create([
{name: 'model'}, // <-- add a couple of extra fields
{name: 'column'},
{name: 'filename'},
{name: 'state', type: 'int'},
{name: 'note'},
{name: 'input_element'}
]);

I don't understand how can this changes clobber the record state constants? There should be anything else in your code which clobbers them.

christocracy
10 Jul 2008, 6:40 AM
[code]
I don't understand how can this changes clobber the record state constants? There should be anything else in your code which clobbers them.

ok, let's do a simpler example:



Foo = Ext.data.Record.create([
{name: 'filename'}
]);
Foo.SOME_CONSTANT = "BAR";
.
.
.
// Now, later in the code, I decide to re-define the Foo record to add another field:
Foo = Ext.data.Record.create([
{name: 'filename'},
{name: 'type'} // <--- added type field to record
]);

// Foo.SOME_CONSTANT has just been clobbered.
console.log(Foo.SOME_CONSTANT) // <-- 'undefined'


why not attach the State constants to the UploadDialog namespace instead?


Ext.ux.UploadDialog.Dialog = function(config) {
.
.
.
}

// attach state constants to Ext.ux.UploadDialog instead.
Ext.ux.UploadDialog.STATE_QUEUE = 0;
Ext.ux.UploadDialog.STATE_FINISHED = 1;
Ext.ux.UploadDialog.STATE_FAILED = 2;
Ext.ux.UploadDialog.STATE_PROCESSING = 3;

MaximGB
10 Jul 2008, 7:29 AM
If you fully replace some class in the extension then it's your responsibility to make it behave like original one. So just redeclare those constants after your redefinition of FileRecord.

christocracy
10 Jul 2008, 8:02 AM
If you fully replace some class in the extension then it's your responsibility to make it behave like original one. So just redeclare those constants after your redefinition of FileRecord.

of course, of course...I haven't a problem with that (though it would be cleaner to extend by moving the constants as suggested above).

what I'm really concerned with is the possibility for malicious exploitation of this code by simply undefining those 4 constants.

have you done that test as I suggested? try undefining those constants then doing a file-upload.

you might find the state-machine goes into an infinite loop sending requests to the server.
perhaps you could add some error-checking on those constants? if they're 'undefined', *stop everything* and throw an exception.

MaximGB
10 Jul 2008, 8:52 AM
I understand your worryings, but don't feel that it's necessary to check for existence of theese constants. If some malicious code will able to undefine the constants then it can undefine or redeclare anything else even the error-checking code.

lorezyra
10 Jul 2008, 9:29 AM
Just found your plugin/widget for the uploadfile extention! I love it!!!!! Keep up the awesome work...


I'm currently working on an ImageEditor for qWikiOffice environment using EXTjs... I have a stand-alone version I wrote last year... but I really like the menu/toolbar system EXTjs offers... much cleaner than my source... so, I'm porting it over... I'll post the results when I'm happy enough with it...

christocracy
10 Jul 2008, 9:31 AM
[QUOTE=MaximGB;193609If some malicious code will able to undefine the constants then it can undefine or redeclare anything else even the error-checking code.[/QUOTE]

This is true.

christocracy
11 Jul 2008, 8:31 AM
The event "fileuploadstart" seems to fire *after* the file-upload has begun.

from http://www.max-bazhenov.com/dev/upload-dialog-2.0/index.php


fileuploadstart - fires when file as (sic) about to start uploading:
dialog - reference to dialog
filename - uploaded file name

uploadstart - fires when upload process starts, parameters:
dialog - reference to dialog




'file-upload-start' : [
{
action: [this.uploadFile, this.findUploadFrame, this.fireFileUploadStartEvent]
}
],


however, from the order-of-actions here, it seems the file will begin uploading *before* the event will fire.

should the order not go like this instead:


'file-upload-start' : [
{
action: [this.fireFileUploadStartEvent, this.uploadFile, this.findUploadFrame]
}
],

In my application, I need to add different base_params to each upload (which I've stored in an over-ridden FileRecord).

also, I think the event signature for "fileuploadstart" should include the entire FileRecord instance, rather than just the filename. I've over-ridden my code to do this.



// current
fireFileUploadStartEvent : function(record)
{
this.fireEvent('fileuploadstart', this, record.get('filename'));
},

// mine -- add record to event signature.
fireFileUploadStartEvent : function(record)
{
this.fireEvent('fileuploadstart', this, record.get('filename'), record);
},



This is a fabulous component, Comrade.

MaximGB
11 Jul 2008, 8:49 AM
I agree with fileuploadstart event signature.
On event order - may be should I add beforefileuploadstart event?

christocracy
11 Jul 2008, 9:45 AM
On event order - may be should I add beforefileuploadstart event?

absolutely.

I had to hack my own in, like so. maybe it should be fired from the FSA?



prepareNextUploadTask : function() {
// Searching for first unuploaded file.
var store = this.grid_panel.getStore();
var record = null;

store.each(function(r) {
if (!record && r.get('state') == Ext.ux.UploadDialog.FileRecord.STATE_QUEUE) {
record = r;
}
else {
r.get('input_element').dom.disabled = true;
}
});

record.get('input_element').dom.disabled = false;
record.set('state', Ext.ux.UploadDialog.FileRecord.STATE_PROCESSING);
record.set('note', this.i18n.note_processing);
record.commit();

//@chris: firebeforeupload event. this is the only reason to extend this function.
this.fireEvent('beforeupload', this, record);

this.fsa.postEvent('file-upload-start', record);
},

MaximGB
13 Jul 2008, 6:08 AM
absolutely.
I had to hack my own in, like so. maybe it should be fired from the FSA?

Yes, it is. The only reason why fsa transition map in the extension isn't minimized is for event firing methods were present in the map. I've modified the extension, without BC lost I hope. Record parameter was added to some event signatures, beforefileuploadstart and uploadcanceled events were added also.

franklt69
23 Jul 2008, 6:07 AM
Hi, is there some limitation about the size of file to upload?

I am testing it with file approx 2 Mb and work ok, now I am testing with a file of 24Mbyte and don't work, any info is welcome.

regards
Frank

Note: Sorry I posted it message in ext1.1 but I am using it with Ext2.0

MaximGB
23 Jul 2008, 7:07 AM
The limits might be set by serverside.

christocracy
23 Jul 2008, 8:32 AM
Hi, is there some limitation about the size of file to upload?
I am testing it with file approx 2 Mb and work ok, now I am testing with a file of 24Mbyte and don't work,

if you're using php, for example, you might wanna check your php.ini



; Maximum allowed size for uploaded files.
upload_max_filesize = 2M

GeeTee
24 Jul 2008, 1:16 PM
Hi
I am new to your code but cant figure out how to specify the Windows Common Controls Dialog box that the browser opens up when I use your code to specifiy:

Files Of Type:

e.g.
All files
HTML (bla bla)
Pictures (bla bla)

etc.

How do I specify my own?

Thank you

MaximGB
24 Jul 2008, 1:49 PM
That's impossible.

kimmking
24 Jul 2008, 1:56 PM
The extension is so nice and smart.I like it very much and I am going to research it just now.Thank a lot to MaximGB.

anjelika
24 Jul 2008, 8:25 PM
Hi
I am new to your code but cant figure out how to specify the Windows Common Controls Dialog box that the browser opens up when I use your code to specifiy:

Files Of Type:

e.g.
All files
HTML (bla bla)
Pictures (bla bla)

etc.

How do I specify my own?

Thank you

You can't specify that, this is not .NET, instead you can use
permitted_extensions: ['jpg', 'jpeg', 'gif'] to limit the accepted file extension for upload.

sailer
25 Jul 2008, 1:08 AM
In my upload-dialog.js:


function getDialog() {
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog({
url: 'upload-dialog-request.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false, //true,
post_var_name: 'upload',
title: 'upload',
permitted_extensions:['JPG','jpg','jpeg','JPEG','GIF','gif']
//minWidth: 400, //minHeight: 200, //width: 400, //height: 350
});
dialog.on('uploadsuccess', onUploadSuccess);
//dialog.on('beforefileuploadstart', onBeforeFileUploadStart);
}
return dialog;
}
My upload-dialog-request.php:


$file = "";
$result = array();
$ext = strrchr($_FILES["file"]["name"],'.');
$file = "". date("YmdHis") . $ext;
if(move_uploaded_file($_FILES["file"]["tmp_name"],"uploadIDPic/" . $file)){
$result = array('success'=>true,data=>$file);
}else{
$result = array('success'=> false, 'error'=> 'upload error');
}
echo json_encode($result);
I always upload files failed, when I debug upload-dialog-request.php, I found that the $ext is always blank, I don't know where is error.
Who can give me any ideas?
Thanks.

tidal
25 Jul 2008, 4:30 AM
This might be because $_FILES is usually an numeric array.

try something like this:


foreach($_FILES as $file){
[...]
}

Edit:

But this even isn

vagner.montenegro
25 Jul 2008, 12:49 PM
I'm in trouble after the upload when I try to run rmdir() of php. What?
Sorry my English.

MaximGB
25 Jul 2008, 3:27 PM
After upload you should call move_uploaded_file(). Why do need rmdir()?

elkin_celis
3 Aug 2008, 8:57 AM
Hi,

The Ext.ux.UploadDialog works fine, but when is called from a menutree in a layout like the api "examples" in a tab, just don't show the dialog, but if it called page .aspx along works!.

http://www.incomins.com/images/panel.jpg


http://www.incomins.com/images/along.jpg


Thanks for you help !




Animal:
Thanks for response, I'll add the beforefileupload event after some extension refactoring.

Nikoms
You have to put the browse button inside some container element with overflow:hidden style.

Show the dialog and move it to the -1000, -1000 offset.

MaximGB
3 Aug 2008, 9:51 AM
Hi,

The Ext.ux.UploadDialog works fine, but when is called from a menutree in a layout like the api "examples" in a tab, just don't show the dialog, but if it called page .aspx along works!.

http://www.incomins.com/images/panel.jpg


http://www.incomins.com/images/along.jpg


Thanks for you help !

Sorry, I don't understand what you've wrote. Also I can't open the images you've attached.

elkin_celis
3 Aug 2008, 1:02 PM
this is te website, when call the complete url the uploaddialog is showing fine.
see the picture:
http://extjs.site88.net/uploaddialog/along.JPG

Ok, but if the webpage subirfoto.aspx is called from a menutree in complex layout like the "api examples", the uploaddialog dont showing.
see the picture:
http://extjs.site88.net/uploaddialog/panel.JPG

Thanks again, my friend.

MaximGB
3 Aug 2008, 1:44 PM
Check the URLs of Ext.ux.UploadDialog.js and Ext.ux.UploadDialog.css.
Also my demo page not designed to work inside panel, since it's depends on Ext.onReady call, which will not be fired when the page loaded into an Ext.Panel.

elkin_celis
3 Aug 2008, 2:36 PM
Thank you MaximGB,

I hope learn about Extjs. becouse i like that works.

Joschy
4 Aug 2008, 4:55 AM
Thank you very much for your nice dialog.

Today I tried using it with Ruby On Rails and the Plugin "Attachment Fu". The image upload works fine - but I am not able to transport the json response message to your dialog. Instead a file/save dialog will be openend to save the json response.

Same results with Firefox and IE7.

Do you have any idea?
Thanks a lot,
Joschy



My code:


Layout:
<%
= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css"%>

<%= stylesheet_link_tag "../javascripts/ext_upload/css/Ext.ux.UploadDialog.css"%>


View:
upload_win
=new Ext.ux.UploadDialog.Dialog({

url
:'user_images?format=json',

reset_on_hide
:true,

allow_close_on_upload
:true,

upload_autostart
:false,

modal
:true,

post_var_name
:'uploaded_data'

});


Model:
has_attachment
:content_type => :image,
:max_size => 5.megabytes,

torage
=> :file_system,
:resize_to => '100x110>',

:path_prefix
=> '/public/images/user/',

:processor
=> :Rmagick



validates_as_attachment


Controller:
respond_to
do |format|

format.html
format.json {

@user_image = UserImage.new

@user_image
.uploaded_data = params[:uploaded_data]

if
@user_image
.save
render :json => { uccess => true }

else
render
:json => { uccess => false }

end

}

end

end
Edit/Delete Message

MaximGB
4 Aug 2008, 5:08 AM
Set response content-type to text/html

evelynloo
19 Aug 2008, 11:53 PM
It just occur in firefox 3.0.1, the filename textfield only show the name not the full path of the file.
Did anyone know how to solve this problem?

evelynloo
20 Aug 2008, 1:38 AM
I am using JSP now, and i dont know how to get the file name in the servlet, is it request.getParameter("file") ? But i got nothing by using that. Did anybody know how to get the file name in the servlet action?

MaximGB
20 Aug 2008, 4:02 AM
It just occur in firefox 3.0.1, the filename textfield only show the name not the full path of the file. Did anyone know how to solve this problem?
It's browser dependent, FF 3.0.1 returns basename for value attribute of input type file field, IE returns the full path, so it can't be fixed by extension itself.

alaska
20 Aug 2008, 9:27 AM
Dude! Great job!

Im not expert about extend or override some class, but i made some changes.

I link my attached file with an specific order when i post my files, then latter when
i come back to see this order, i load the store and can see/download/remove last attached files again.
Its linked with button panel, when panel is destroyed, its too.



Ext.namespace('Ext.ux.form');

Ext.ux.form.StoredUploadButton = Ext.extend(Ext.Button, {
onDestroy: function() {
if (this.updialog) {
this.updialog.close();
}
},
onClick: function(e){

if (!this.updialog) {

this.updialog = new Ext.ux.UploadDialog.Dialog({
url:'http://'+CGIFOLDER+'/tmp/backend.pl',
id: 'storeupload',
reset_on_hide: false,
base_params: {a: 'upload', nrid: this.nrid, tablex: this.table},
title: 'Anexos',
allow_close_on_upload: true,
upload_autostart: true,
sql: this.sql,
listeners: {
show: function() {

this.grid_panel.getStore().reader = new Ext.data.JsonReader({
root : "gimmeall",
id : "ID"
}, Ext.ux.UploadDialog.FileRecord);

this.grid_panel.getStore().proxy = new Ext.data.HttpProxy({
url : 'http://'+CGIFOLDER+'/tmp/backend.pl',
timeout: 300000,
method : 'POST'
});

this.grid_panel.getStore().load({params: {a: 'gimmeall', b: this.sql }});

this.grid_panel.on('dblclick', function(e){
var rec = Ext.getCmp('storeupload').grid_panel.getSelectionModel().getSelected();

var win = new Ext.Window({
id: 'showup-win',
title:'Anexo - '+rec.data.filename,
width:'70%',
height:600,
iconCls: 'window',
shim:false,
shadow:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
html: '<iframe src="http://'+SERVER+'/Delta/anexos/'+rec.data.filename+'" border="0" frameborder="no" framespacing="0" width="100%" height="570" />'
}); // win
win.show();

}); // function

} // onshow
} // handler
});

} // if
this.updialog.show();

} // Render
}); // eo extend

//// register xtype



Usage:


xtype: 'stupbt',
text: 'Anexos',
table: 'ORDEMDECOMPRA',
sql: nroc


Youll have to deal the backend with your own way..

Override:


Ext.override(Ext.ux.UploadDialog.Dialog, {
onRemoveButtonClick: function() {

var record = this.grid_panel.getSelectionModel().getSelected();
this.grid_panel.getStore().remove(record);


}, // onremove
prepareNextUploadTask : function() {
// Searching for first unuploaded file.
var store = this.grid_panel.getStore();
var record = null;

store.each(function(r) {
if (!record && r.get('state') == Ext.ux.UploadDialog.FileRecord.STATE_QUEUE) {
record = r;
}
});

record.get('input_element').dom.disabled = false;
record.set('state', Ext.ux.UploadDialog.FileRecord.STATE_PROCESSING);
record.set('note', this.i18n.note_processing);
record.commit();

this.fsa.postEvent('file-upload-start', record);
}, // prepare
removeFiles : function(file_records) {
var store = this.grid_panel.getStore();
for (var i = 0, len = file_records.length; i < len; i++) {
var r = file_records[i];
// r.get('input_element').remove();
store.remove(r);
}
} // remove
});


Extended because of this lines 1178,1200 at Ext.ux.UploadDialog.js that have the code:
// r.get('input_element').dom.disabled = true;

but my value on store isnt an object, its a string....

Can someone point me the right way to create the object input_element ?
Thanks

MaximGB
20 Aug 2008, 10:57 AM
1:

r.get('input_element').dom.disabled = true;
Is important, since without it the dialog will post queued files in a bulk.
2:
You can try to provide the dialog pseudo objects with fake dom.disabled property and remove() method. Something like:


var test = {
str_val : "I am a fake input type file object",
dom : {
disabled : false
},
remove : Ext.emptyFn,
toString : function() {
return this.str_val;
}
};

cjqcjq2008
21 Aug 2008, 12:01 AM
see the picture:

MaximGB
21 Aug 2008, 1:26 AM
And what?

alaska
22 Aug 2008, 6:04 AM
Thanks, its works like i expect!

So my actual code is:


Ext.namespace('Ext.ux.form');

Ext.override(Ext.ux.UploadDialog.Dialog, {
onRemoveButtonClick: function() {

var grid = this.grid_panel;

Ext.MessageBox.confirm('Confirmacao', 'Deseja EXCLUIR este anexo?', function (btn){
if (btn.match('yes')) {
var record = grid.getSelectionModel().getSelected();

Ext.Ajax.request({
url: 'http://'+CGIFOLDER+'/tmp/backend.pl'
,params: { a: 'upload-delete', nrid: this.nrid, fname: record.data.filename }
,callback: function (options, success, response) {
if (Ext.util.JSON.decode(response.responseText).success == false) {
Ext.Msg.alert('ERRO', 'Nenhuma informacao encontrada');
} else {
Ext.example.msg('Exclusao', 'Operacao realizada com sucesso!');
}
}
,failure: function() { alert('Falha de Comunicacao com o servidor'); }
,timeout: '10000'
}); // ajax

grid.getStore().remove(record);
}
});

} // onremove
});


Ext.ux.form.StoredUploadButton = Ext.extend(Ext.Button, {
onDestroy: function() {
// destroy a window qdo o botao for destruido
if (this.updialog) {
this.updialog.close();
}
},
onRender: function(){
this.text='[N] '+this.text;
Ext.ux.form.StoredUploadButton.superclass.onRender.apply(this, arguments);
},
onClick: function(e){

if (!this.updialog) {

// funcao afterLoad permite que obtenhamos os dados de campos do form qdo clicamos no botao, e nao qdo criamos o form que esta o botao
if (this.afterLoad) {
this.afterLoad();
}

// anexa o dialog no objeto do botao
this.updialog = new Ext.ux.UploadDialog.Dialog({
url:'http://'+CGIFOLDER+'/tmp/backend.pl',
id: 'storeupload',
reset_on_hide: false,
base_params: {a: 'upload', nrid: this.nrid, tablex: this.table},
title: 'Anexos',
allow_close_on_upload: true,
upload_autostart: true,
nrid: this.nrid, // armazena para usar no extend do delete
sql: this.sql, // armazena para usar dentro do show abaixo
listeners: {
show: function() {

this.grid_panel.getStore().reader = new Ext.data.JsonReader({
root : "gimmeall",
id : "ID"
}, Ext.ux.UploadDialog.FileRecord);

this.grid_panel.getStore().proxy = new Ext.data.HttpProxy({
url : 'http://'+CGIFOLDER+'/tmp/backend.pl',
timeout: 300000,
method : 'POST'
});

var store = this.grid_panel.getStore();
store.load({params: {a: 'gimmeall', b: this.sql }});

store.on("load", function() {
store.each(function(rec){
rec.data.input_element= {
str_val : "I am a fake input type file object",
dom : {
disabled : false
},
remove : Ext.emptyFn,
toString : function() {
return this.str_val;
}
};
});
});

this.grid_panel.on('dblclick', function(e){
var rec = Ext.getCmp('storeupload').grid_panel.getSelectionModel().getSelected();

var win = new Ext.Window({
id: 'showup-win',
title:'Anexo - '+rec.data.filename,
width:'70%',
height:600,
iconCls: 'window',
shim:false,
shadow:false,
animCollapse:false,
constrainHeader:true,
layout: 'fit',
html: '<iframe src="http://'+SERVER+'/Delta/anexos/'+rec.data.filename+'" border="0" frameborder="no" framespacing="0" width="100%" height="570" />'
}); // win
win.show();

}); // function

} // onshow
} // handler
});

} // if
this.updialog.show();

} // Render
}); // eo extend

//// register xtype
Ext.reg('stupbt', Ext.ux.form.StoredUploadButton);



Usage:


xtype: 'stupbt',
text: 'Attach',
table: 'CLIENTS',
afterLoad: function() {
this.sql=Ext.getCmp('ID').getValue();
this.nrid=Ext.getCmp('ID').getValue();
}


In the next update, ill load store on form render, and attach how many attached files is on this order at
button title.

Thanks again...

s_dellamonica
4 Sep 2008, 12:37 AM
Hi Maxim, i hope you can give me some tips about an extension i have to do to your (great!) upload dialog window. I have to insert two new columns, before the 'note' column: the first column must be a textbox, to associate a brief description to the file; The second column must be a combo box (select) to choose a characteristic of the file. When the 'start upload' button is pressed, i have to insert these informations into a db (i have already done this, but only with the name of the file).

Thanks for help.
Salvatore

MaximGB
4 Sep 2008, 2:16 AM
Try to change the dialog's createGrid() method to create an editable grid. You'll have to create your own Record class, so make sure it'll be compatible with Ext.ux.UploadDialog.FileRecord. Then change the dialog's uploadFile() method to merge extra params from record with base_params. Hope this will help :)

s_dellamonica
4 Sep 2008, 2:30 AM
Thanks Maxim.

I've just done something like you suggest, and now i'm able to create another column with an editable filed, on doubleclick on it. The changes that i have to apply to the UploadFile() method aren't so clear to me, how can i post this new field to upload-dialog-request.php page? Maybe i have to edit the 'params' section of the UploadFile() method, but how?

I'll try something, but i don't know exactly what :-)
Thanks,
Salvatore

MaximGB
4 Sep 2008, 3:45 AM
Read the docs the params section described in Ext.Ajax.request() method documentation
http://extjs.com/deploy/dev/docs/?class=Ext.Ajax

Scorpie
4 Sep 2008, 5:52 AM
Thats one hell of a nice extension!

wtfowned
16 Sep 2008, 7:05 AM
Nice extension, but is window - only one place, where upload panel can be in ?
// или по рус, можно ли как-нибудь легко затолкать панель загрузки НЕ в окно ? А в обычную Ext.panel например ? Заранее спс ;)

MaximGB
16 Sep 2008, 7:32 AM
There is no way to do it fast. The extension should be refactored to allow this kind of functionality.
// Легко затолкать не получиться.

skaue
17 Sep 2008, 5:53 AM
Ok, first of all: great extension, and kudos to you, MaximGB.

I've run into a minor, but very annoying problem, maybe someone here can help me with it.

My setup: Ext 2.0.2 over Prototype 1.6.0.2 (with the prototype-adapter).

My problem:
After adding a file, the upload starts, finishes correctly, the response from the server is returned in correct form (i've checked thru fiddler). Everything should be alright, but this is where the problem pops up and i get the following exception in firebug:


node has no properties
[Break on this error] return Element.extend(node.nodeType == Node.TEXT_NODE ? node.parentNode : ...

Any ideas? I tried to track down the exception in Firebug, but with no luck.

This is a known bug in prototype 1.6.0.2. Should be fixed in 1.6.0.3, expected in sept 08.

feiichi
18 Sep 2008, 5:59 AM
Hello,

in Opera (all versions at least since 9.5), the displayed message/note is always the note_upload_error even if the upload is successful. The problem is in this part of code:


var filter = rt.match(/^<[^>]+>((?:.|\n)*)<\/[^>]+>$/);
if (filter) {
rt = filter[1];
}
json_response = Ext.util.JSON.decode(rt);

It's ok in other browsers since the response text looks like:


<pre>{"success": true}</pre>

But in Opera the response looks like:


<PRE>{"success": true}

The missing closing tag causes the match function to fail and consequently the json decode function fails too.

I couldn't find out how to modify the regexp so that it returns only the part between html tags whether the closing tag is present or not, so this is my substitute solution:


var filter = rt.match(/^<[^>]+>((?:.|\n)*)/);
if (filter) {
rt = filter[1].replace(/<\/[^>]+>$/, "");
}
json_response = Ext.util.JSON.decode(rt);

MaximGB
18 Sep 2008, 12:02 PM
Hi, feiichi.

Thanks for the report, but I can't reproduce it. I'm using opera 9.51 build 10081 under WindowXP and the response I get is always without <pre> tags at all.

skaue
19 Sep 2008, 2:03 AM
I want to share with you the asp.net implemetation:

protected void Page_Load(object sender, EventArgs e)
{
string jSONString = string.Empty;
try
{
if (Request.Files.Count > 0)
{
HttpPostedFile postedFile = Request.Files[0];
string savePath = Request.PhysicalApplicationPath
+ @"uploadedImages\"
+ Path.GetFileName(postedFile.FileName);
if (File.Exists(savePath))
{
File.Delete(savePath);
}
postedFile.SaveAs(savePath);
jSONString = "{\"message\":\"File uploaded\",\"success\":true}";
}
}
catch (Exception)
{
jSONString = "{\"message\":\"Error uploading file\",\"success\":false}";
}
finally
{
Response.Write(jSONString);
}
}

Thanks!! =D>

skaue
19 Sep 2008, 8:24 AM
Ok, I've read through all the posts in this thread but I'm still unsure of one thing.

How can I extend this extension (so its core is still updateable) and then have above the grid a form where I can add some more values to the uploaded files (ie. these files will be attached to some businessobjects). I know there is a "createGrid" I can override. Could someone please outline a good way to do this.

MaximGB
19 Sep 2008, 9:02 AM
Override createGrid method, or add another one method into window-render event action queue, then attach to beforefileuploadstart and change the base params using setBaseParams method to add more values to the uploaded files.

skaue
19 Sep 2008, 10:03 AM
Override createGrid method, or add another one method into window-render event action queue, then attach to beforefileuploadstart and change the base params using setBaseParams method to add more values to the uploaded files.

hehe... nice.. that surely sounds easy enough... (I still have to figure out how to do exactly what you describe, tho) ;)

How would I add content above the progressbar, say an inputfield for example. That would have me going. And as a bonus, how would I then add the content of that field as a param...

(yea, I know.... feeding with spooooon)

skaue
19 Sep 2008, 10:56 AM
This is my first attempt to add a form above the progressbar... unfortunately the form is placed ON the progressbar, instead of above it. Seems the layout is fixed. Unless I'm doing this the wrong way.

This is my current code:



var uploaderWindow = new Ext.ux.UploadDialog.Dialog({
url: 'upload-dialog-request.php'
});

var uploaderWindowForm = new xf.FormPanel({
baseCls: 'x-plain',
labelWidth: 80,
defaultType: 'textfield',
items: [
{
fieldLabel: 'Foo',
name: 'foo',
anchor: '100%' // anchor width by percentage
}
]
})

uploaderWindow.on('render', addExtraFields);

function addExtraFields(w)
{
w.add(uploaderWindowForm)
}