PDA

View Full Version : [Ext.ux.UploadDialog] upload dialog extension.



MaximGB
14 Aug 2007, 2:15 AM
Hi,

just created the Upload dialog extension, any feedback is highly appreciated.

http://www.max-bazhenov.com/dev/upload-dialog.jpg

description and download page is here at http://www.max-bazhenov.com/dev/upload-dialog.php

tobiu
14 Aug 2007, 3:13 AM
hi max,

tested it short and this tool looks nice.
but somehow it is a bit similar to jozefs file file uploader.

what i am still missing in general by uploadtools, is the possibility, to select multiple files or even folders at once. i have not worked with it yet, but think that it is only possible with using flash or a plugin...

when using php in the backend, it would be possible to integrate a status-bar to see, how much of a file is already submitted / still missing. im not sure, if / how it is possible in other serverside-languages, but guess it is.

in your extension, i like the small grid-view in the dialog, which makes it possible via sorting, which file is uploaded first.

the abort-button is not working as intended right now, i guess.
it stops an upload after one file is completed.
if you just upload one big file, it does nothing.


interesting project! kind regards, tobiu

MaximGB
14 Aug 2007, 3:31 AM
Hi, tobiu,



tested it short and this tool looks nice.
but somehow it is a bit similar to jozefs file file uploader.

what i am still missing in general by uploadtools, is the possibility, to select multiple files or even folders at once. i have not worked with it yet, but think that it is only possible with using flash or a plugin...

Yes you are right, but as Jozef mentioned it's unstable under FF && linux, that's why I don't use swf-upload or fancy-upload (or any other flash uploaders) right now.



when using php in the backend, it would be possible to integrate a status-bar to see, how much of a file is already submitted / still missing. im not sure, if / how it is possible in other serverside-languages, but guess it is.

Yes I know it, but still haven't time to play with php's uploadprogress pecl extension.



in your extension, i like the small grid-view in the dialog, which makes it possible via sorting, which file is uploaded first.

Sorry, english isn't my native, I can't understand what do you mean :-?



the abort-button is not working as intended right now, i guess.
it stops an upload after one file is completed.
if you just upload one big file, it does nothing.

It's by design actually, just don't know how to abort the hidden iframes form submit action.



interesting project! kind regards, tobiu

Thanks for response :D

tobiu
14 Aug 2007, 4:02 AM
hi max,

the ext.ajax class has a method abort().
have not tested it though.

"in your extension, i like the small grid-view in the dialog, which makes it possible via sorting, which file is uploaded first."

i meant, that your upload queue always submits the first row of the grid, then the second etc. (chronologically).

i inserted 3 files and sorted the grid by the column filename.
then the upload-order was different from the order, i inserted my files into the queue.

i am not sure if the row-model of the grid support exchanging rows via drag and drop, but if so, users could complete order their files to their own upload-priority before uploading them to the server.


kind regards, tobiu

MaximGB
14 Aug 2007, 4:13 AM
Hi, tobiu



the ext.ajax class has a method abort().
have not tested it though.

It doesn't abort the form submit.



"in your extension, i like the small grid-view in the dialog, which makes it possible via sorting, which file is uploaded first."

i meant, that your upload queue always submits the first row of the grid, then the second etc. (chronologically).

i inserted 3 files and sorted the grid by the column filename.
then the upload-order was different from the order, i inserted my files into the queue.

i am not sure if the row-model of the grid support exchanging rows via drag and drop, but if so, users could complete order their files to their own upload-priority before uploading them to the server.

Ok, now I see, but this is a free feature derived from Ext.data.Store :D.

Nikoms
14 Aug 2007, 8:32 AM
Hi MaximGB!

That's (almost) exactly what I was looking for. Fantastic! (I just registered for you :p)

I have 2 questions :

- Is there anyway to simply limit the number of uploaded file? (1...n)

- Is it possible to upload the file directly when I choose a file? And so, have more than 1 process if I choose 5 files... and maybe give the possibility to put the upload process dialog on background (hide it) :)

MaximGB
14 Aug 2007, 8:49 AM
Hi, Nikoms, thanks for response ;)



- Is there anyway to simply limit the number of uploaded file? (1...n)
For now, I guess you can attach to dialogs 'filetest' event, and in handler check the dialogs store.getCount() method, and if the count is more then you need then you just need to return false from the handler, and the file will not be added to the upload queue.



- Is it possible to upload the file directly when I choose a file? And so, have more than 1 process if I choose 5 files... and maybe give the possibility to put the upload process dialog on background (hide it) :)
I didn't understand the first part of the quote, but for the second one...
Yes I think that disabling the close button during upload process is too restrictive, and I just was to curious. I will change this behaviour to not disabling in the next version.

p.s. And I think I know how to do the proper abort for the large files... at least Opera and FF already shows me the good results, IE as usual do on it's own way.

6epcepk
14 Aug 2007, 10:06 AM
Hi, Maxim.
Very good extension.
Is it possibly to display:
Size/Total
BSpeed
Avg. speed
Rem. time
?

MaximGB
14 Aug 2007, 10:11 AM
Hi, Maxim.
Very good extension.
Is it possibly to display:
Size/Total
BSpeed
Avg. speed
Rem. time
?
It's possible to implement with help of uploadprogress php pecl extension, or with one of the flash uploading components, but this are the future plans only.

6epcepk
14 Aug 2007, 11:20 AM
It's possible to implement with help of uploadprogress php pecl extension, or with one of the flash uploading components, but this are the future plans only.
Ok, thanks.

Extension doesn't work with ExtJs 2.0:

Ext.ux.UploadDialog.Dialog.superclass has no properties
[Break on this error] Ext.ux.UploadDialog.Dialog.superclass.constructor.call(this,el,_7);

MaximGB
14 Aug 2007, 11:55 AM
Ok, thanks.

Extension doesn't work with ExtJs 2.0:

Ext.ux.UploadDialog.Dialog.superclass has no properties
[Break on this error] Ext.ux.UploadDialog.Dialog.superclass.constructor.call(this,el,_7);
Since I am not a premium member (yet I hope), the extension is for 1.1 only.

MaximGB
14 Aug 2007, 11:56 AM
Hi, here comes the first upgrade:
Following was done:
- stopUpload() and abort action are now synchronous.
- uploadstopping event removed.
- allow_close_on_upload config parameter and respective getter/setter added.
- upload_autostart config parameter and respective getter/setter added.
- now user can add files during upload process.

Nikoms
14 Aug 2007, 1:56 PM
I didn't understand the first part of the quote, but for the second one...



I think you just respond with the "upload_autostart... I just want to start upload as soon as he chooses a file (he don't have to click on "upload").



ps : sorry for my poor English :p It's not my native language too :D

Nikoms
14 Aug 2007, 2:14 PM
Is it possible to create as many upload process as there are files?

I wonder if it's a good idea, but we can see that on gmail, yahoo mail, etc... I think It could be cool :p

It's not a request,... only a suggestion ;)

jsakalos
14 Aug 2007, 3:34 PM
Very nice!

It's for all who cannot or don't want to use my UploadForm.

The only thing I'm missing is (optional) progress info.

Keep on! =D>=D>=D>

MaximGB
15 Aug 2007, 1:34 AM
Very nice!

It's for all who cannot or don't want to use my UploadForm.

The only thing I'm missing is (optional) progress info.

Keep on! =D>=D>=D>

Thanks, I was too on the list who cannot or don't want ;)

Hutch
15 Aug 2007, 3:37 AM
Cool ~

jsakalos
15 Aug 2007, 4:03 AM
Thanks, I was too on the list who cannot or don't want ;)

Sure, otherwise you wouldn't write it... ;)

Saeven
15 Aug 2007, 9:10 PM
Hi Maxim,

First, great work - close to being a masterpiece. When using the Aero theme, the inner panel shows with scrollbars... switching to the gray theme (as on your demo page) or any other theme does fix the problem.

Possible to fix it up so that it works across all themes?

Cheers.
Alex

MaximGB
15 Aug 2007, 11:38 PM
Hi Alex,

I have no scrollbars even using aero theme, but I think I know what's the reason of those scrollbars showed in your screenshoot. Find createProgressBar method in the Ext.ux.UploadDialog.js and change Ext.ux.ProgressBar style from 'width: 100%' to 'width: auto'.

Saeven
16 Aug 2007, 7:27 AM
The problem isn't the progress bar actually, it's the grid (lines 284/285).. I can confirm that I don't have any custom CSS definitions affecting the result.

Saeven
16 Aug 2007, 7:47 AM
I would add that in IE7, the act of adding a file to the upload queue is also causing an error in ext-all-debug.js (1.1 stable) at line 2402:



setStyle : function(prop, value){
if(typeof prop == "string"){
var camel;
if(!(camel = propCache[prop])){
camel = propCache[prop] = prop.replace(camelRe, camelFn);
}
if(camel == 'opacity') {
this.setOpacity(value);
}else{
this.dom.style[camel] = value;
}
}else{
for(var style in prop){
if(typeof prop[style] != "function"){
this.setStyle(style, prop[style]);
}
}
}
return this;
},


That's the setStyle member of El.prototype - I'll try to help you figure out why.

Saeven
16 Aug 2007, 7:55 AM
The problem occurs in Ext.ux.ProgressBar.js at line 94:



refresh : function()
{
if (!this.disabled) {
if (this.text_el) {
this.text_el.dom.innerHTML = this.text;
}
if (this.line_el) {
this.line_el.setStyle('width', this.getPercentValue() + '%');
}
}

MaximGB
16 Aug 2007, 7:56 AM
Fixed the scroll bars issue, please update the package.

Saeven
16 Aug 2007, 8:06 AM
Fixed the scroll bars issue! A+ Just that pesky IE issue remaining. I'll gladly help you track down a fix if you need.

MaximGB
16 Aug 2007, 12:31 PM
Fixed the scroll bars issue! A+ Just that pesky IE issue remaining. I'll gladly help you track down a fix if you need.
I had have to upgrade my IE, but this was also fixed.

p.s. Oftopic: I was very surprised that [] operator isn't working on strings anymore in IE7.

Saeven
16 Aug 2007, 4:55 PM
+ rep! Thanks.

fercho07
18 Aug 2007, 3:37 AM
Hi, the extension is GREAT !! Just what i'm looking for. Could you put the php files that use in the demo to understand all the process please?

Thanks.

MaximGB
18 Aug 2007, 5:07 AM
There is nothing special in the php files used in the demo. The upload-dialog.php actually has no php code inside, it's just plain html. The upload-dialog-request.php simple sends json-encoded struct, the uploaded files isn't saved anywhere ;)


<?php
$response = array(
'success' => true
);
echo json_encode($response);
?>


In the real life use you have to anylize the $_FILES superglobal php array. The $_FILES['file'] contains any data you'll need to copy uploaded file somewhere in your server ;)

On success just send json-encoded response as one showed above, on fail send something like:


<?php
...
$response = array(
'success' => false,
'error' => 'Description of the error occured.'
);
echo json_encode($response);
...
?>

noso
22 Aug 2007, 12:04 AM
What a great extension! Much respect for you all ! =D>

damien
22 Aug 2007, 4:18 AM
I like this upload dialog a lot! Thanx

trbs
22 Aug 2007, 4:36 PM
cool nice User eXtension mate :)

MaximGB
22 Aug 2007, 4:58 PM
noso, damien, trbs thanks for good response :)

schambit
23 Aug 2007, 12:25 PM
first of all i'd like to say thank you very much.
ive searched for a lot of multifile uplaod dialogs and yours seems to be the best :D

but i have a problem with it:

after i uploaded a file, the json object is returned and the state of the file that was uploaded turns into succesfully uplaoded (the green thing)
but then the other files in the quee dont start to upload, the "uplaod button" keeps on being the "abort button" and the littel loading gif in the bottom right still shows up
this just changes if i select another entry in the queue manually... but on your demo page everything worked just perfect.

do u have any ideas how i could fix that?

MaximGB
23 Aug 2007, 12:41 PM
Do you have the last version of the UploadDialog? (I think first you should try to download the package again and check if the bug will be still in place). Then post your code here, may be you have something wrong in any of dialogs event handlers (if you have any).

schambit
23 Aug 2007, 1:01 PM
well, i tried it with redownloading the files, but the error is still there.

what code do u mean exactly i should post here?

the onAjaxSuccess ?

MaximGB
23 Aug 2007, 1:42 PM
I'm not a mind reader you know :D.

Show me how do you create the dialog, if you have any dialog event handlers, show me the code of handlers...

and I also didn't understand this phrase:


this just changes if i select another entry in the queue manually...

Do you mean that upload starts again if you add another file in the queue? If so and if the previous queue wasn't completly uploaded - means (imo) that you have an exception in one of the dialogs event handlers. Do you use FF with Firebug installed?

schambit
27 Aug 2007, 9:18 AM
sorry for not answering, but i had no time.

however a mate of mine already fixed it and now its working all fine :)

MaximGB
27 Aug 2007, 11:24 AM
Was it a bug in UploadDialog? If it was, then please point me where it is.

anjelika
28 Aug 2007, 2:43 PM
Hey, nice extension, indeed, keep up the good work.
I have a problem with uploading files tho. The $_FILES variable does not seem to fill with the file name and the other values from the POST? statement.
Do I need to set up anything before using this?
I know that in plain HTML I have to set up a form containing the upload/browse button, form wich look like this:

<form enctype="multipart/form-data" action="uploader.php" method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>.In my situation I just created a dialog and show it on the screen (as in your example), the dialog seem to access my (php) upload page according to Firebug but it does not POST anything?!
upload.js:
/**
* Copyright(c) 2006-2007, FeyaSoft Inc.
*
* This JS is mainly used to handle action in the list
* and create, edit, delete.
* There includes Search function, paging function etc
* Create/update is using pop-up dialog
* Delete can select multiple line
*/
Ext.onReady(function(){

var 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: 'upload.php',
reset_on_hide: false,
allow_close_on_upload: true
});
dialog.show('my-dlg');
});
upload.php:

$target_path = "uploads/";

if (!is_dir($target_path .$_SESSION['id_comanda']))
{
if ([email protected] ($target_path .$_SESSION['id_comanda'])) die ('({"success":false,"error":"Eroare la crearea directorului '.$target_path.$_SESSION[id_comanda].'"})');
}
$target_path .= $_SESSION['id_comanda'].'/';
$nume_fisier = basename($_FILES['uploadedfile']['name']);

$target_path = $target_path . basename($_FILES['uploadedfile']['name']);
//die (basename($_FILES['uploadedfile']['name'])); <- doesn't print anything?!
$_FILES['uploadedfile']['tmp_name'];

if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'], $target_path))
{
die ('({"success":true})');
}
else
{
die ('({"success":false,"error":"A aparut o eroare, va rugam incercati din nou!"})');
}


Any advices will be appreciated.
Thanks for your time and work ;)

MaximGB
28 Aug 2007, 5:51 PM
Hi, anjelika.

The dialog posts data under 'file' key, not 'uploadedfile'.

anjelika
28 Aug 2007, 11:58 PM
Sorry, I am such a fool.
It works now, thanks a lot!
Keep up the good work ;)

cgriffin
30 Aug 2007, 5:28 PM
I need to set a value for an extra parameter I want to return with the file. This value is set from a combobox. I have the combobox and a listener which gets called when the combobox value changes. I'm just not clear on the syntax to add another submit parameter at runtime. I have tried:


dialog.setBaseParams({leads_source: value})
dialog.setBaseParams('{leads_source: '+ value + ' }')

MaximGB
30 Aug 2007, 6:22 PM
I need to set a value for an extra parameter I want to return with the file. This value is set from a combobox. I have the combobox and a listener which gets called when the combobox value changes. I'm just not clear on the syntax to add another submit parameter at runtime. I have tried:


dialog.setBaseParams({leads_source: value})
dialog.setBaseParams('{leads_source: '+ value + ' }')

The first variant should work fine. In PHP you will have $_POST['leads_source'] set to value.

medusadelft
1 Sep 2007, 1:54 AM
Great tool, but I run against something strange.

I think it has to do with my JSON-return (I'm on php4, so json_encode doesnt' work). After succesfully uploading the first file, the second file doesn't start automatically. It doesn't matter if I set upload_autostart to false or true. When I click on a file in the grid, it changed the 'abort' button to 'upload'. When clicking this button, the file is uploaded.

In FireBug it shows these errors:

On opening the dialog:
mask has no properties
http://schanulleke/bvkd/inet/inet_v43/jsscripts/ext/upload-dialog.js
Line 14

After successfully uploading the first file:
el has no properties
http://schanulleke/bvkd/inet/inet_v43/jsscripts/ext/ext-all.js
Line 10

After hitting the 'abort' button:
record has no properties
http://schanulleke/bvkd/inet/inet_v43/jsscripts/ext/UploadDialog/Ext.ux.UploadDialog.js
Line 692



I'm using Ext 1.1, php 4.3 and IE 6 / FF 2.006.

Thanks in advance and keep up the good work!

MaximGB
1 Sep 2007, 7:29 AM
I think it has to do with my JSON-return (I'm on php4, so json_encode doesnt' work).
Can you post here the actual JSON-response, and the PHP code encoding the response into json-message?

Animal
1 Sep 2007, 7:44 AM
You can't return JSON from a file upload. The response is loaded into an iframe as HTML. The response text is scraped as the innerHTML of the document body.

That probably won't be valid JSON.

XML is returned correctly though.

MaximGB
1 Sep 2007, 8:20 AM
Why do you think that the returned json-message will be invalid?

southside
20 Sep 2007, 6:42 AM
Hi;

Your demo looks great, Iam trying to learn EXTJS to create someting just like this.

I have downloaded your zip, but it is missing upload-dialog-request.php, which I assume is the required file to save the uploads to a file location or mysql database.

Can you help by supplying the file so I can learn how it is done.

Thanks.

MaximGB
20 Sep 2007, 12:43 PM
The upload-dialog-request.php isn't missing ;), the code of upload-dialog-request.php which I use in the demo is following:


<?php
$response = array(
'success' => true
);
echo json_encode($response);
?>

As you can see it doesn't save uploaded file anywhere and just returns success response in any case. I don't want all that files that visitors uploaded during the demo testing ;)

If you are using php on the server side then you can get all data required to handle an uploaded file in the $_FILES['file'] variable. The PHP's uploaded file handling is described here
http://www.php.net/manual/en/features.file-upload.php

southside
20 Sep 2007, 1:55 PM
Thanks MaximGB I will have a look, sorry if this is elementary but I am just finding my way and appreciate the help.

southside
21 Sep 2007, 5:33 AM
[QUOTE=MaximGB;65415]The upload-dialog-request.php isn't missing ;), the code of upload-dialog-request.php which I use in the demo is following:
[code]

MaximGB
21 Sep 2007, 1:19 PM
Hi Maxim;
Hi southside


Do you have a zip of full project to assist in my learning curve, I am new to this and eager to learn.
Yes I do ;), now it contains 1391 files in 258 folders, and I guess it won't help you.


I know some are sensitive about being asked to supply their hard work so if this applies to you then let me know and I will trudge along through the forum until I can pull together a working example that I can build on.
No I am not such a sensitive, but I don't understand you request, if you need examples use extjs's examples that go with distribution. If you have questions ask them here or at other forums devoted to those technologies you have questions in.


Starting from a blank sheet may be to steep for me at this time. Thanks for your help. SC
"This is the talk for the poor peoples sake". If you have questions for which you can't find answers in the docs, books, net, then you should ask those questions.

southside
25 Sep 2007, 7:56 AM
Hi Maxim;

I have managed to get the files saving to my server location using your upload system.

I see threads about a response cannot be sent back from a php upload page.

Your code below is in a php page and sends an OK back to the dialog I assume.

I have tried to do the same in my php page and had no message returned to the dialog.

If I use your code in your upload-dialog-request.php I get the OK.

So my JSON I guess is running fine - my server is PHP 4.3.9 with json 1.2.1.

Can you help, I just need to know how to tell my php page to send th OK on success?

I thought I could just use the

MaximGB
25 Sep 2007, 11:11 AM
You should return a json-message in following format:


{
success: true of false,
error: 'String with error or message, with member also can be named message',
...
any other your code private data
...
}

There is only one required member in this message, it's 'success' flag.
Using php the message creation code should be like this:


$response = array();
if ($file_uploaded) {
$response['success'] = true;
$response['message'] = 'File uploaded successfully';
else {
$response['success'] = false;
$response['message'] = 'Some error occurred during file upload';
}
echo json_encode($response);


I advise you to install Firefox with Firebug plugin (if you still haven't done it) and see what json-message your code is actualy returning.

southside
26 Sep 2007, 3:01 AM
You should return a json-message in following format:


{
success: true of false,
error: 'String with error or message, with member also can be named message',
...
any other your code private data
...
}

There is only one required member in this message, it's 'success' flag.
Using php the message creation code should be like this:


$response = array();
if ($file_uploaded) {
$response['success'] = true;
$response['message'] = 'File uploaded successfully';
else {
$response['success'] = false;
$response['message'] = 'Some error occurred during file upload';
}
echo json_encode($response);


I advise you to install Firefox with Firebug plugin (if you still haven't done it) and see what json-message your code is actualy returning.
Maxim;

I think I see, I am a bit unsure though.

Say I am using the basic php upload file like below, this uploads the file but i obviously get no response back via json. (Ps I am using firebug to watch for response from your dialog upload utility).

When I try and enter the response code into the php upload your dialog upload returns an error and does not upload the file eg I get a red cross.

So I guess i am doing it wrong can you advise how the response should be placed in the simple php upload file.

Once I get the idea I will be able to work adding to it out myself.

Hope you can help.

SC

southside
26 Sep 2007, 7:38 AM
Hi Maxim;

I have just managed to get it working using your code snippett as the basis.

This returns

MaximGB
26 Sep 2007, 11:32 AM
Yes it is.

26 Sep 2007, 5:52 PM
Great job! I'm going to see if i can plug this into a back end for a client.

I got sick of using SWF Upload.
I was able to implement something like (dev): http://screencast.com/t/i2Hv2SC6

But when i went to deploy it in production i had HTTP 403s being reported by SWF Uploader. HTML Forms worked great for the upload form, but SWF uploader just would NOT work w/ this web server. Sooo strange.

milanz
26 Sep 2007, 8:10 PM
Awesome ux.

Just found a small logic fix. Seems that the permitted_extensions does not take case into consideration. So 'jpg' is not the same as 'JPG' depending how it is named on the user's machine. Simply solved it by defining my allowed extensions in lower case and added the "toLowerCase" as below:



getFileExtension : function(filename)
{
var parts = filename.split('.');
if (parts.length == 1) {
return null;
}
else {
return parts.pop().toLowerCase();
}
}

southside
27 Sep 2007, 1:54 AM
Hi Maxim;

Have you managed to implement a multiple file or folder select instead of single file select before uploading?

SC

27 Sep 2007, 3:11 AM
You can't return JSON from a file upload. The response is loaded into an iframe as HTML. The response text is scraped as the innerHTML of the document body.

That probably won't be valid JSON.

XML is returned correctly though.

That's not true. I've done a json return from a file upload from a generic ext.form.form

MaximGB
27 Sep 2007, 4:00 AM
Just found a small logic fix. Seems that the permitted_extensions does not take case into consideration. So 'jpg' is not the same as 'JPG' depending how it is named on the user's machine. Simply solved it by defining my allowed extensions in lower case and added the "toLowerCase"

Thanks for report milanz, I'll patch the extension according your suggestion.



Have you managed to implement a multiple file or folder select instead of single file select before uploading?
No, this can be implemented using helper flash object (SWFUpload for example), but flash is unstable under Mozilla/Linux configuration as jsakalos has reported in upload form thread, so I don't want to stick with it.

27 Sep 2007, 7:13 AM
Thanks for report milanz, I'll patch the extension according your suggestion.


No, this can be implemented using helper flash object (SWFUpload for example), but flash is unstable under Mozilla/Linux configuration as jsakalos has reported in upload form thread, so I don't want to stick with it.

Weirdly, i can select multiple files with OS X + FF2x, but it only really chooses the first of the list.

onlinesaratoga
3 Oct 2007, 12:54 PM
Alright, I got it working. Thank you! It's really beautiful.

I want to show the dialog with another button, created outside of the function. The reason is I need it styled, and when I apply 'cls' to the show-button, I get the ExtJS button inside of my formatting (rather than the full format of the button).

I am somewhat of a noob (to ExtJS), and I can't figure out how to access that dialog with a variable. I get all sorts of 'not defined' errors.

Simply put, please fill in the blank:

<input type="button" id="myOwnDialogShowButton" onClick="???">

Thank you!

*** UPDATE: SOLUTION ***

Alright, for all of you noobs out there like me, here is how you do it:

1. Remove the 'var' keyword in front of 'dialog' in the first line of the function. This allows the variable 'dialog' to be accessed globally (from anywhere on the page).

2. In the init function at the bottom, put only this item: getDialog(); This will create the dialog so you can refer to it. (The example creates the dialog when it is called.)

3. In your button (or function), call dialog.show(); and you're set!). Here is the full code as I adjusted it:



var UploadDialogController = function()
{
dialog = null;
var button = null;

function getDialog()
{
if (!dialog) {
dialog = new Ext.ux.UploadDialog.Dialog('imageUploadDialog', {
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 200,
proxyDrag: true,
resizable: true,
constraintoviewport: true,
permitted_extensions: ['gif','jpg','jpeg','png'],
title: 'Image upload - Click the \'Add\' Button',
url: 'ajaxForms/uploadImage.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true
});
//dialog.show('show-button'); // if you want it to open with the page launch
dialog.on('uploadsuccess', onUploadSuccess);
}
return dialog;
}

function onUploadSuccess(dialog, filename, resp_data)
{
// do this upon success
}

return {
init : function()
{
getDialog();
}
}
}();


Maxim, first off - do you see any issues with the modifications above?

Secondly, the hideLoadingMask() function was throwing errors to me, so I removed it. Can you explain what that does?

Thanks again!!

DigitalSkyline
3 Oct 2007, 2:21 PM
Any one get this working with Ext2 ?

I've only gone live with 1 app and I'd like to use 2.0 for future apps... No idea if any of these plugins will work with 2.0 so far its been a hellova learning curve. :/

Wonder how long it will take for people to adapt ...

MaximGB
4 Oct 2007, 6:16 AM
Maxim, first off - do you see any issues with the modifications above?

Secondly, the hideLoadingMask() function was throwing errors to me, so I removed it. Can you explain what that does?

1. Polluting the global scope is actually a bad idea, with var the dialog variable becomes private for UploadDialogController.

2. The UploadDialogController has private and public interfaces, the public interface is declared in the return {} statement. And if you have to call the getDialog() function from outside of the UploadDialogController scope than you should make it public:

return {
init : function()
{
...
},

getDialog : getDialog
}

The code marked with bold will expose getDialog method to the outer scope and you'll be able to call it in your onclick handler:

<input type="button" id="myOwnDialogShowButton" onClick="UploadDialogController.getDialog().show(this)">

3. The hideLoadingMask() method is removing the page mask - the one with blue background and "Loading..." message in the demo, it's called after page is loaded.

MaximGB
4 Oct 2007, 6:20 AM
Any one get this working with Ext2 ?

I've only gone live with 1 app and I'd like to use 2.0 for future apps... No idea if any of these plugins will work with 2.0 so far its been a hellova learning curve. :/

Wonder how long it will take for people to adapt ...
I have a private message from Valera (http://extjs.com/forum/member.php?u=5062) were he told me that he've ported this extension for Ext 2.0

4 Oct 2007, 7:25 PM
Thank you very much for your contribution. I used this extension to finish a project. You really should setup a donation account. I can be first in line!


I've posted about this work and linked to your site:
http://tdg-i.com/10/lighthousepropertieslacoms-upgrade-complete

http://tdg-i.com/img/customers/lighthousepropertiesla/lhp_upload_form.jpg

hga77
5 Oct 2007, 6:11 AM
Hi MaximGB,

I want to use your uploader. I downloaded the zip.

Can you please explain where i need to put those folders/files like the 2 folders "ProgressBar" and "UploadDialog". And how can I call this component.

Sorry if I am asking a very basic question, but I am new to EXT.

Thanks

5 Oct 2007, 6:22 AM
^^^^ look at the source on his site. It's pretty self explanatory from there.

hga77
5 Oct 2007, 7:18 AM
Thanks...will do

hga77
7 Oct 2007, 11:16 AM
HI,

I did exactly what the source does, but when I click the button to call getDialog, the upload dialog does not appear, nothing happens!

All i did is this:

- I uploaded the extjs.ux folder.
- loaded the two js files -> "Ext.ux.ProgressBar.js" and "Ext.ux.UploadDialog.js" and all associated css.
- copied and pasted the "getDialog" function and the "onUploadSuccess" function. So this is what I copied:


var dialog = null;
var file_list_tpl = new Ext.Template(
"<div class='file-list-entry'>File {name} successfuly uploaded.</div>"
);
file_list_tpl.compile();

function getDialog()
{
if (!dialog) {
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: '/dev/upload-dialog-request.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true
});

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});
}



I have a button that calls the getDialog function. It does not display the uploader grid when clicked. Can someone please help. And no errors reported on firebug.

Thanks

MaximGB
7 Oct 2007, 11:48 AM
Please post the html code too.

hga77
7 Oct 2007, 12:14 PM
Hi thanks.

I didn't add any html for this uploader. I thought it didn't need any html, so I did not add any.

You can test it here: LINK (http://www.greenroom-digital.com/sony/test_cms/html/index.php/application/)
username: admin
password: admin

-Click on "Manage Newsletters"
-Double-Click any entry on the grid
-Click on "Interactive Videos" tab
-Click on "Upload" on the grid footer

The getDialog function was added into "VideoGrid.js" file.

Thanks and I appreciate any help

MaximGB
7 Oct 2007, 12:24 PM
getDialog() just returns the dialog instance, you have to call show() method to.

getDialog().show()
;)

hga77
7 Oct 2007, 12:47 PM
You are a star =D>

2 more questions please:

1. I am running on php4. Does this uploader require php5?

2. When we click on "Upload" for your uploader, we get the animating blue box before the uploader appears. But if you close it, then open it again, the animating box shows behind the main dialog. Is there a way to fix this?

Thanks for your great work.

MaximGB
7 Oct 2007, 1:04 PM
2 more questions please:

1. I am running on php4. Does this uploader require php5?

No it doesn't, you just have to return a valid json response from the server side.


2. When we click on "Upload" for your uploader, we get the animating blue box before the uploader appears. But if you close it, then open it again, the animating box shows behind the main dialog. Is there a way to fix this?
In my own project I have this problem too but have no time to solve it. For fast solution you can call show() method without any parameters, this should cancel any animation at all.

qmj119
7 Oct 2007, 11:34 PM
Ext.onReady(function(){


var dialog = new Ext.ux.UploadDialog.Dialog(null, {
autoCreate: true,
closable: true,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
width: 400,
height: 350,
proxyDrag: false,
resizable: true,
constraintoviewport: true,
title: 'File upload queue.',
url: '/upload.jsp',
reset_on_hide: false,
allow_close_on_upload: true
});


Ext.get('btnUpload').on('click', function(){
dialog.show();

});
});

why it is upload error? this jsp how to write ?

MaximGB
8 Oct 2007, 4:29 AM
This is a Java Server Pages problem, you should ask how to handle the uploaded files using JSP in JSP forum, I guess ;). Or maybe you should google for some basic JSP tutorials...

hga77
8 Oct 2007, 2:31 PM
I am having another problem.

I am returning a simple json responce, like this:

{"success":true}

This is exactly what you are doing on your demo page. But what happens with me is different. I get the response back, and I get the OK message. But then the refresh icon continuoes to spin. And I cant upload any other files after this.

You can test at the same place as before.

Thanks

MaximGB
8 Oct 2007, 2:44 PM
You have copied the onUploadSuccess() code from my demo, there is a code which using the 'file-list' div on the demo page, of course you haven't one in your app. And that's why Ext.Template.append() method is throwing an exception. I guess you should install the Firefox's Firebug extension, it'll help you find such a silly bugs.

hga77
8 Oct 2007, 2:57 PM
Silly me. Sorry about that.

Also, I would like to pass some params by "post" to the upload.php
And also permitt file extensions. Does this look correct:



...
dialog = new Ext.ux.UploadDialog.Dialog(null, {

base_params:{ item1:"value1" , item2:"value2" },
permitted_extensions:["mov","flv"],
...
...
...


[EDIT] That did work too. Great uploader Maxim ;)

MaximGB
8 Oct 2007, 3:03 PM
Yes it does.

DigitalSkyline
8 Oct 2007, 4:29 PM
I have a private message from Valera (http://extjs.com/forum/member.php?u=5062) were he told me that he've ported this extension for Ext 2.0

Just got your reply... does he intend to publish it?

hga77
8 Oct 2007, 6:18 PM
The images (from the images folder) are not loading for me in IE7.

The following images:

file-add.gif
file-remove.gif
reset.gif
...etc

joycoder
9 Oct 2007, 12:17 AM
i use your example in FF,all is ok.but the same script in ie6,file uploaded success,but not fire success event.

joycoder
9 Oct 2007, 1:28 AM
my another thread about this:
http://extjs.com/forum/showthread.php?t=14551

MaximGB
9 Oct 2007, 2:43 AM
hga77, joycoder
I am using this extension in three my own projects, I've tested them under IE6, IE7, FireFox 2.x, Opera 9.x had not find any errors. Probably it's you doing something wrong ;). Please post here you code, or give me a link on online demo.

joycoder
9 Oct 2007, 2:53 AM
thanks first.
i use your js script,server backend use java servlet,only return a success json string,
content-type is text/html,format is {success:true}
it is ok in FF2,but in IE6,return the same json,file uploaded,but success event not trigged
pls see the http header img

joycoder
9 Oct 2007, 2:57 AM
the right content-type

MaximGB
9 Oct 2007, 3:03 AM
joycoder
type: text/xml - I guess that's the reason.

hga77
The css class of the form inside UploadDialog should be x-ux-uploaddialog-form but in your demo somewhy it has another css class.

[edit]
joycoder, we have posted simultaneously, I didn't understand, is content type text/html have solved you problem?

joycoder
9 Oct 2007, 3:08 AM
right content-type,text/html,but problem still exists

MaximGB
9 Oct 2007, 3:12 AM
Show me the demo ;)

joycoder
9 Oct 2007, 3:18 AM
copy form your demo

var UploadDialogController = function()
{
var dialog = null;
var button = null;
var file_list_tpl = new Ext.Template(
"<div class='file-list-entry'>File {name} successfuly uploaded.</div>"
);
file_list_tpl.compile();

function hideLoadingMask()
{
var loading = Ext.get('loading');
var mask = Ext.get('loading-mask');
mask.remove();
loading.remove();
}

function getDialog()
{
if (!dialog) {
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: '/APP/UploadServlet',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false
});

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

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

function onUploadSuccess(dialog, filename, resp_data)
{
alert("Ok");
}

return {
init : function()
{
Ext.QuickTips.init();
button = new Ext.Button('show-dialog-btn', {
id: 'show-button',
text: 'Show dialog',
handler: showDialog
});
hideLoadingMask();
}
}
}();
Ext.onReady(UploadDialogController.init);

MaximGB
9 Oct 2007, 3:35 AM
This code is looking ok. Live demo will help you much better ;)

hga77
9 Oct 2007, 7:22 AM
hga77
The css class of the form inside UploadDialog should be x-ux-uploaddialog-form but in your demo somewhy it has another css class.


I dont understand :-/

How can I fix this? I dont know where to start sorry.

MaximGB
9 Oct 2007, 8:06 AM
I dont understand :-/

How can I fix this? I dont know where to start sorry.
Look at the attached picture, it's taken from your demo. The upload dialog has a form element inside it, and the css class of that form should be x-ux-uploaddialog-form, but I've discovered that in your demo that form element somehow has two?? class attributes. That is not good.

I have only one idea why it might happen right now: try to do the following:
1. Open Ext.ux.UploadDialog.js
2. Navigate to line 229
3. Change 'class' : 'x-ux-uploaddialog-form' to cls : 'x-ux-uploaddialog-form'

hga77
9 Oct 2007, 8:27 AM
You are a genuis ;)

Thank you for you help. Its working now and the images are loading in.

But still, that is very wierd. Why would this work for your example in IE, but not mine? Also, looking at the html structure on firebug, I noticed that the form within the dialog does indeed have two seperate class attributes. Infact, even though it works now, it still says that there are two:

x-ux-uploaddialog-form x-grid-container x-layout-component-panel

And whats stranger, is that your demo shows the same 2 attributes also for the form. But its working for you...

ok im talking toomuch now..i'll stop..but its working and thats all that matters :D

Thanks again MaximGB for your time and help.

joycoder
9 Oct 2007, 4:59 PM
i find the reason,i use jquery adapter,replace it with ext-base,solve this problem.
thanks MaximGB .
i will debug jquery-adapter about iframe onload event in IE.

milanz
9 Oct 2007, 5:13 PM
thanks first.
content-type is text/html,format is {success:true}


In your screenshot the content-type is text/xml not text/html. Are you sure you are setting the header properly?

joycoder
10 Oct 2007, 3:31 AM
pls see the next pic.
the problem is jquery-adapter,i get it.

hga77
20 Oct 2007, 7:27 AM
I have two seperate places on my app that require your uploader.

The first uploader is called within the file assets page. what that means is that in this page, the uploader uploads files to the assets folder.

The second uploader is called from another page, the video page. Here you can upload videos. The videos are uploaded to the video folder.

Ofcourse, I am creating a new instance of the uploader, then setting its properties, exactly like your demo page.

The problem is, for example, lets say I go to the video page, then call the uploader. I uploads videos and they go to the video folder. Works great. Then I leave that and go to the assets section, I call the uploader using the same script to create a new instance. Then I set the properties (eg url etc...). When I upload, it still uploads to the video folder, NOT to the assets folder.

So basically they are not seperate instances.

How do I create two seperate instances of your uploader, that have different properties?

Thanks

MaximGB
20 Oct 2007, 9:07 AM
1. Are assets section and video section two tabs on the same dialog, or are they two separate HTML pages?
2. If they are tabs and you are using getDialog() method, than you'll get dialog singleton, not two separate dialog instances.
3. You can try to use dialogs setUrl() method to resolve an issue.

hga77
21 Oct 2007, 6:47 AM
They are on the same html page.

I just need to know how to create two seperate instances.

Also, this does not happen in Firefox. This problem is only in IE

Thanks

MaximGB
21 Oct 2007, 9:02 AM
I just need to know how to create two seperate instances.
Like any other Exts basic dialog instances.

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

evilized
22 Oct 2007, 5:54 AM
Hi.

this extension is sooo great, and very usefull... thx fir u great work dude.

:)


but, i'm having a problem with the upload :(
the folders permissions are all ok, set to 777. but ever i see a error upload :S and i dont know the cause of that, please any help can be nice for me :).

(i've the same problem in the local pc :()

my js code


var UploadDialogController = function(){

this.dialog = new Ext.ux.UploadDialog.Dialog('upload-dlg', {
autoCreate: true,
closable: false,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
modal:true,
width: 400,
height: 350,
proxyDrag: true,
resizable: false,
constraintoviewport: true,
title: 'Lista de Archivos.',
url: 'resources/backend/import.php?do=upload',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false,
permitted_extensions: ["csv"]
});

this.file_list_tpl = new Ext.Template(
"<div class='file-list-entry'>File {name} successfuly uploaded.</div>"
);

this.file_list_tpl.compile();

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

this.dialog.on('uploadsuccess', this.onUploadSuccess,this);


};

UploadDialogController.prototype = {
show:function(obj){
this.dialog.show(obj.getEl());
}
}

my PHP code:


<?
import_request_variables("gp");

switch($do){
case 'upload':
UploadFile();
break;
}

function UploadFile()
{
if(count($_FILES) > 0)
{
move_uploaded_file(
$_FILES['file']['tmp_name'],
PATH.'resources/backend/tmp/'.$_FILES['file']['name']
);
echo '{"success": true, "error": "ok"}';
}
}
?>

MaximGB
22 Oct 2007, 9:47 AM
What's the result of the move_uploaded_file() if it's false then you should go check php's error log.

DAddYE
23 Oct 2007, 12:41 AM
Not work in Safari.

evilized
23 Oct 2007, 6:54 AM
i was solved my problem. ( a PHP ; :P )

thx u for the extension dude, it is really a great tool.

MaximGB
23 Oct 2007, 8:26 PM
DAddYE

Not work in Safari.
Sorry, I just don't have access to MAC.

timSS
2 Nov 2007, 1:19 AM
Еnvironment: ext-1.1.1, FF 2.0.8, Apache2, php 5.X. regular upload works fine.

I've read all of the thread but there is no solution for my problem:
I'd copy-pasted the script from demo-page. Changed the 'url'.

UI works fine. But upload doesn't work. Server side return's:



var_dump($_FILES)


array(0){

}

What i figured out - somthing wrong with post:

Request Headers
Host ****
User-AgentMozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.8) Gecko/20071008 Firefox/2.0.0.8
Accept text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Language en-us,en;q=0.5
Accept-Encoding gzip,deflate
Accept-Charset ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive 300
Connection keep-alive


There is no multipart/form-data header !

But in HTML it does exists:

HTML from FF Inspect:



<form action="action.php?action=uploadfile" enctype="multipart/form-data" method="post" class="x-ux-uploaddialog-form x-grid-container x-layout-component-panel" id="ext-gen1061" style="overflow: hidden; width: 382px; height: 311px;">




Then i checked Apache log - request is the same size as uploaded file and 'cause no multipart/form-data header, server side knows nothing about file upload.

Any suggestions?

timSS
2 Nov 2007, 3:18 AM
Ok.
My issue was solved by adding 'base_params' : { action : 'uploadfile'}.
Now it works and i don't know how,but it seems to me like there're 2 requests sended by client to server:



//----------------------------------
case 'uploadfile':

if (move_uploaded_file($_FILES['file']['tmp_name'], FILE_UPLOAD_DIR.$_FILES['file']['name'])){
echo json_encode(array("success"=>true));
}else{
echo json_encode(array("success"=>false));
}

break;
//----------------------------------

serverside returns false, but uploaded file is on server.

timSS
2 Nov 2007, 3:26 AM
yes, client does sends 2 requests, apache-log:

"POST /tss/action.php?action=uploadfile HTTP/1.1" 200 16
"GET /tss/action.php?action=uploadfile HTTP/1.1" 200 -

So anyone could explain - why there're 2 requests must be send to server?

And i have to notice that GET request could be cached by client. So, is any need for it (GET)?

nteknetium
8 Nov 2007, 11:54 AM
Hi,

I have a problem this extension work fine for me in Ext 1.1 but I make an application en Ext 2.0 and the extension doesn't work.

Its a way to the extension work with Ext 2.0?
What changes I must to do?
I can download the Ext2 version from any site?

Thanks,

nTek

priya.ranganathan
19 Nov 2007, 2:55 AM
Hello,
I'm trying to use the Ext.ux.UploadDialog in my application. i was able to get a demo page working but when i try to implement the same into my application error i keep on getting the error


missing ; before statement
http://localhost/.../ext/ext-all-debug.js Line 433

I'm new to Ext and so i'm not knowing what's wrong. can someone help me in this.
Thanks
--
Priya Ranganathan

MaximGB
19 Nov 2007, 11:50 PM
Post here you code, for someone can help you in that.

langkins
28 Nov 2007, 5:38 PM
hi Maxim
thank u and your UploadDialg,it's really a nice tool.but,i got a problem when work with UploadDialog.i used it with servlet(the upload component i used is commons-fileupload),when i deployed it to the tomcat server,it can work right with firefox,but something wrong with ie6.and could not open the dialog and show me some error msg,the error info:
"line:13
character: 1601
error:syntax error
code:0"
this problem never happened when i opend nondeployed static html page(i put the Ext.ux.UploadDialog package to the ext directory)
i think i have got the cause ,and locate where.but i do not know how to fix.
the problem was caused by a css,that in the "state_tpl" template.
the code fragment as following:
this.state_tpl = new Ext.Template(
"<div class='x-ux-uploaddialog-state x-ux-uploaddialog-state-{state}'>*</div>"
).compile();

if i remove "class='x-ux-uploaddialog-state x-ux-uploaddialog-state-{state}'", it works fine,only without the state img.and i try to define a css use style,also failed.
i do not know why,only got this problem with boring ie,and just when a deployed in tomcat.pls help me.thank u.:)

al_capone
29 Nov 2007, 12:16 AM
Good job MaximGB ! This is something what I need.
Will you convert your UploadDialog to use with 2.0 Extjs?
You wrote that Valera make it, but I can not find where download version for 2.0.

Once more, good job!

MaximGB
30 Nov 2007, 1:58 AM
langkins
Please post your code here (how do you use the component?), or give me a link on online demo where I can see an error.
al_capone
I'll convert the component in the near future but don't know when exactly. I'm busy right now. I misunderstood Valera, he didn't convert UploadDialog to Ext 2.0, he is using his own solution.

alos
9 Dec 2007, 2:14 PM
Its December, is the project still alive? has it been updated for Ext 2.0? Are there other alternatives?:-?

keithnlarsen
12 Dec 2007, 8:56 AM
I concur, this is one of the best and simplest upload components that I've seen. I've seen ones with more functionality that use flash or some other browser plugin. But invariable they fail on certain browsers or certain platforms, and are generally a huge nightmare to make work. This one just plain works everywhere and its so simple.

I've tried porting it to 2.0. Got it somewhat working, but had some bad rendering issues with the buttons, so I gave up. I'm kinda waiting on porting my application to 2.0 until this control is ported. So I don't mean to beg, but pleeeeeease port it.

MaximGB
23 Dec 2007, 7:46 PM
The ExtJS 2.0 extension port is here (http://extjs.com/forum/showthread.php?t=21558).

globe23
1 Jan 2008, 8:15 AM
Hi MaximGB, thanx for the great work. I have managed it to working, juz wondering if there is anyway that we can access the add button by a DIV? For example, when a Div is clicked, instead of showing the upload window, it will shows the file browsing window and when the user selected the file, it will show the file upload window? Once again, thanx for the excellent work. appreciated.

MaximGB
1 Jan 2008, 12:43 PM
In theory it is possible, but will require a lot of code modifications, I won't do it ;) But since the extension is an open source, you can use it's code as a base. It has all required components to implement your task.

elrems
17 Jan 2008, 1:37 AM
this extension is very powerfull thanks for your work!

qbase
19 Jan 2008, 1:12 PM
thanks for this great extension. :)

dearsina
6 Feb 2008, 4:55 PM
I love that it just works. Very very well done.

qianlei007
11 Mar 2008, 8:29 AM
Server side handler.
The files in the queue are posted one at a time, the file field name is 'file'.
I used JSP process data. but i get value is null , i don't understand !

code:
click:function(btnThis,eventobj){
dialog = new Ext.ux.UploadDialog.Dialog({



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: 'update.jsp',
reset_on_hide: false,
allow_close_on_upload: true
});
dialog.show('show-button');


process code JSP:

<%
Object obj= request.getAttribute("file");
%>

Can you give some examples with JSP ?
Thank you!

MaximGB
11 Mar 2008, 12:27 PM
http://extjs.com/forum/showthread.php?p=118851#post118851

qianlei007
11 Mar 2008, 11:50 PM
http://extjs.com/forum/showthread.php?p=118851#post118851

Thank you!

yulinyen
17 Mar 2008, 12:48 AM
Hi,

I have integrated your work into my project, and it works perfectly, but when I try to upload a larger file, for example 40mb, it will always fail. Is there any file size limitation???

The following is my php script for testing purpose:

<?php

$uploaddir = 'upload/';
$uploadfile = $uploaddir.basename($_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
echo json_encode(array('success' => true, 'message' => 'OK')) ;
} else {
echo json_encode(array('success' => false, 'message' => 'Fail')) ;
}

?>

Thanks

yulinyen
17 Mar 2008, 2:21 AM
I think I know the reason lo, I forgot the set the "post_max_size" of php.ini to a larger number. :))

kaki
20 Mar 2008, 8:33 AM
How about a java example??

:D:D

MaximGB
20 Mar 2008, 1:59 PM
Have you seen this http://extjs.com/forum/showthread.ph...851#post118851 ?

kaki
20 Mar 2008, 8:19 PM
would you like to help me why this servlet can not work with ext.ux.dialog but jsp?


thx!




package com.hiber;
import java.io.File;
import java.io.IOException;
import java.sql.Timestamp;
import java.text.SimpleDateFormat;
import java.util.Iterator;
import java.util.List;
import javax.servlet.*;
import javax.servlet.http.*;
import org.apache.commons.fileupload.*;
public class Upload extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = 7440302204266787092L;
String uploadPath = "d:\\uploadtest\\"; // 用于存放上传文件的目录
String tempPath = "d:\\tmp\\"; // 用于存放临时文件的目录
public Upload() {
super();
System.out.println("文件上传启动");
}
public void destroy() {
super.destroy(); // Just puts "destroy" string in log
// Put your code here
}
public void init() throws ServletException {
System.out.println("文件上传初始化");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws IOException, ServletException {
try {
System.out.println("开始进行文件上传");
DiskFileUpload fu = new DiskFileUpload();
fu.setSizeMax(4194304); // 设置最大文件尺寸,这里是4MB
fu.setSizeThreshold(4096); // 设置缓冲区大小,这里是4kb
fu.setRepositoryPath(tempPath); // 设置临时目录
List fileItems = fu.parseRequest(request); // 得到所有的文件:
Iterator i = fileItems.iterator();
// 依次处理每一个文件:
while (i.hasNext()) {
FileItem fi = (FileItem) i.next();
String fileName = fi.getName();// 获得文件名,这个文件名包括路径:
if (fileName != null) {
// 在这里可以记录用户和文件信息
// 此处应该定义一个接口(CallBack),用于处理后事。
// 写入文件a.txt,你也可以从fileName中提取文件名:
String extfile = fileName.substring(fileName.indexOf("."));

Timestamp now = new Timestamp((new java.util.Date())
.getTime());
SimpleDateFormat fmt = new SimpleDateFormat("yyyyMMddHHmmssSSS");
String pfileName= fmt.format(now).toString().trim();
System.out.println(uploadPath+pfileName+extfile);
fi.write(new File(uploadPath + pfileName + extfile));
}
}
response.setContentType("text/html;charset=utf-8");
response.getWriter().print("{success:true,message:'上传成功'}");
//response.getWriter().print("{success:true,msg:'成功'}");
// 跳转到上传成功提示页面
} catch (Exception e) {
e.printStackTrace();
response.getWriter().print("{success:flase,message:'失败'}");
// 可以跳转出错页面
}
}
}




js:





Ext.onReady(function() {
var dialog = new Ext.ux.UploadDialog.Dialog(null, {
autoCreate : true,
closable : true,
collapsible : false,
draggable : true,
upload_autostart : true,
minWidth : 500,
minHeight : 200,
width : 400,
height : 350,
proxyDrag : true,
resizable : true,
permitted_extensions : ['JPG', 'jpg', 'jpeg', 'JPEG', 'GIF', 'txt',
'rar', 'gif', 'doc', 'xls'],
constraintoviewport : true,
title : '文件上传的例子',
url : '/fileupload/',
reset_on_hide : false,
allow_close_on_upload : true
});
dialog.show('my-dlg');
});




but it works in jsp like this:



<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<form action="fileupload" method="post" enctype="multipart/form-data" name="form1">
<input name="thisfile" type="file" id="thisfile">
<input name="user" type="text" id="user" size="10">
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>

kaki
20 Mar 2008, 8:21 PM
Have you seen this http://extjs.com/forum/showthread.ph...851#post118851 ?


yes ,I did.

http://extjs.com/forum/showthread.php?p=118851

MaximGB
20 Mar 2008, 11:26 PM
Can you confirm that your servlet is at least called. Since fileupload and /fileupload/ are different URLs actually.

shuang
16 Apr 2008, 12:18 AM
hi MaximGB

i'm ask for help

can u check my script from link http://extjs.com/forum/showthread.php?p=153692#post153692 ?

very thank you.

Chemist
3 Jul 2008, 11:42 PM
I've got some strange problem.

var dialog = new Ext.ux.UploadDialog.Dialog({url: '/ui/files/FileOps.aspx',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: false });

dialog.setBaseParams({comment:'Test'});
dialog.show('');


Dialog shows, works, but parameter 'comment' is not sent in the post of the form...

I'm using last Ext.ux.UploadDialog from your site and ExtJS 2.1

Thanx

MaximGB
4 Jul 2008, 1:51 AM
Please post in the Ext 2.x extensions forum thread next time. I can't confirm the bug, can you provide me a link to online bug demo, and / or your server side code where you check for 'comment' param.

Chemist
4 Jul 2008, 2:04 AM
One more thing...

In file locale/ru.utf-8.js look at last string : note_aborted. There is comma at the end of the string, but it shouldn't be there.

MaximGB
4 Jul 2008, 2:23 AM
Thanks for report.

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

golr007
20 Aug 2008, 10:29 AM
Hi MaximGB, im new on ExtJS and its amazing what u can do with this framework
first than all, your plugin is wonderfull and i've trying to make it work on my project but i can't

I can make popup the uploaddialog but when i click the upload button, inmediatly get the legend "Update error", so i'm here asking for your help

http://img530.imageshack.us/img530/5354/pic1xg3.th.jpg (http://img530.imageshack.us/my.php?image=pic1xg3.jpg)


http://img355.imageshack.us/img355/5162/pic2wi7.th.jpg (http://img355.imageshack.us/my.php?image=pic2wi7.jpg)

http://img147.imageshack.us/img147/6411/pic3bm3.th.jpg (http://img147.imageshack.us/my.php?image=pic3bm3.jpg)


this is my js code


...
if (!dialog) {
var 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,
url: '/upload/loadPicture.php',
reset_on_hide: false,
allow_close_on_upload: true,
upload_autostart: true,
base_params: { reqaction: 'uploadfile', resptype: 'json' }
});
}

dialog.show();
...

and this is my php code



$uploaddir = 'C:/Xampp/htdocs/ug/upload/';
$uploadfile = $uploaddir . basename($_FILES['file']['name']);

if (move_uploaded_file($_FILES['file']['tmp_name'], $uploadfile)) {
$response = array(
'success' => true,
'error' => 'OK.'
);
}
else {
$response = array(
'success' => false,
'error' => 'Description of the error occured.'
);
}

echo json_encode($response);


i hope u can tell my where is the error
thanks a lot beforehand

gkassyou
14 Oct 2008, 6:34 PM
I'm trying the uploadDialog with Google Chrome and it saves the file to size of 0 therefore not saving the file data. Anyone else have this problem?

MaximGB
14 Oct 2008, 11:34 PM
I don't. I've just checked the Google Chrome on the demo and everything works ok.

p.s. Next time please use the correct thread for 2.x version of the dialog.

gkassyou
20 Oct 2008, 4:18 AM
I'm actually using ext1.1.1 and uploadDialog for 1.1

Here's my code.


uploaddlg = new Ext.ux.UploadDialog.Dialog(null, {
autoCreate: true,
closable: false,
collapsible: false,
draggable: true,
minWidth: 400,
minHeight: 200,
modal:true,
width: 400,
height: 350,
proxyDrag: true,
resizable: false,
constraintoviewport: true,
title: 'Upload',
url: '<@appfilepath>jsonController.taf?function=uploadLogo',
reset_on_hide: true,
allow_close_on_upload: true,
upload_autostart: true,
permitted_extensions: ["gif","GIF","jpg","jpeg","JPG"]
});


It works perfectly with firefox and IE but google chrome is not sending the data. Therefore the "file" variable passed to the server on the post has no data.

MaximGB
20 Oct 2008, 5:01 AM
Sorry, but 1.x version of the dialog is not supported any more.

gkassyou
24 Oct 2008, 10:22 AM
The issue is with Google Chrome not being able to send the content type post header for upload.

Anyone else with the same issue and has a work around.

hzwei
19 Mar 2009, 12:51 AM
Can you tell me what is the maxsize of upload with Ext.ux.UploadDialog.Dialog?

MaximGB
19 Mar 2009, 11:00 PM
It's the same as for standart HTML input type = "file" element.

Infinnitum
14 May 2009, 11:15 AM
Im a newbie in this javascript subject.

Could you send me an full example of implementation of your wonderful upload extension?
I need a full example, like the php file with the necessary items.

I try to look in the code, look for php samples, but no success.
Sorry about this subject, but im not familiarized about javascript yet.

Thanks.

MaximGB
14 May 2009, 8:18 PM
1. Ext 1.1 version of the dialog is not supported anymore.
2. I don't use any special PHP code at the example's site, it's no more then

<?php

$response = array(
'success' => true,
'message' => 'Ok. ' . filesize($_FILES['file']['tmp_name']) . ' bytes uploaded.'
);

echo json_encode($response);
3. To recieve an uploaded file you don't have to do any special handling besides described here http://php.net/manual/en/features.file-upload.post-method.php

IT100
21 Jun 2009, 6:33 AM
Your nice documented files and follow-ups ad to your nice development =D>

A server-side browser with filedetails, maybe even with a visualisation of image files would be nice to. (or a image thumb in the upload grid)

(details...)


regards,
Chris.

buenavida
13 Aug 2009, 8:17 AM
Hi Maxim GB

Thanks so much for the extension.

I wonder if there is any plan to upgrade it to be compatible with Extjs 3.0.0.

My donation reference is 13017068

MaximGB
13 Aug 2009, 12:10 PM
Yes, I have plans to upgrade the upload dialog to ExtJS 3.0, actually I'm going to create more robust upload solution, I'm going to divide the dialog into three independent components: upload queue, upload panel, and upload dialog. But as usual I'm short of time, the extension might be ported at the end of August.

overnoise
22 Aug 2009, 9:39 AM
Any news about the new version? I think there are lots of people waiting, besides me :)

buenavida
1 Sep 2009, 9:36 PM
@overnoise,

Hi Overnoise and others waiting for upgrade of the UploadDialog, may be if you all make a donation to MaximGB, we can all give him a stronger motivation to help us with the upgrade.

Thanks

MaximGB
2 Sep 2009, 8:44 AM
Donations are always welcome of course, but right now I'm just busy with two other projects. There is a message (http://extjs.com/forum/showthread.php?p=378981#post378981) in UploadDialog 2.x thread, bjt succeeded in porting the extension to ExtJS 3x, try use it until I have time to port by myself.

fx111983
5 Jan 2010, 10:16 PM
Dear,

I try to use the UploadDialog Extension but i have some problems. i'll attach the error image. the button (add, remove, clear, upload...) have a problem to display.

Please help me
cheers

pablitobs
20 Nov 2010, 4:30 PM
It does work with ExtJs 3.0 ??? I cant make it works...