[CLOSED] File Upload without a FormPanel

[barnali]

Can I upload a file without putting the FileUploaded inside a FormPanel ? It is possible to upload the file with a directmethod invocation from the listener ?

Please advise...

.TopBarItem(
    X.ToolbarFill(),
    X.FileUploadField()
        .ButtonOnly(true)
        .ButtonText("Upload Bank Slip")
        .Icon(Icon.Money)                        
        .Listeners(l => l.Change.Fn = "uploadfile")
)

[fabricio.murta]

Hello, @barnali!

Maybe what you looking for is this: Simple MultiUpload
There are a couple other examples of this functionality also (you can see them upon visiting the link above).
We don't have an example right now with this in razor, but I believe you can easily convert the markup using VS's intellisense.

Please let us know if this is not the solution you need or if you're not able to use this using razor syntax.

[barnali]

Ok. Thanks for the help. It is working except - i could not put the listeners. How do i put four listeners -

X.MultiUpload()
                        .ID("MultiUpload1")
                        .UploadUrl("uploadApplicationFeeFile")
                        .AutoStartUpload(true)
                        .FileDropAnywhere(true)
                        .FileSizeLimit("15 MB")
                        .FileTypes("*.xls")
                        .FileTypesDescription("xls files")
                        .FileUploadLimit(1)
                        .FileQueueLimit(0)

tried this, but did not work.

.Listeners(ls =>
                        {
                              ls.UploadStart.Fn = "Ext.Msg.wait('Uploading...');";
                              ls.UploadComplete.Fn = "Ext.Msg.hide();";
                              ls.UploadError.Fn = "alert('error')"; 
                        })

[fabricio.murta]

Hello, @barnali,

Great, we are progressing then. You should use Fn when you have something in your javascript code like:

var pseudoFunction = function () { something; }

For custom/short/golfed javascript code, you use it as Handler instead.

In other words, change your listener block to:

.Listeners(ls =>
                        {
                              ls.UploadStart.Handler = "Ext.Msg.wait('Uploading...');";
                              ls.UploadComplete.Handler = "Ext.Msg.hide();";
                              ls.UploadError.Handler = "alert('error')"; 
                        })

For example, if you wanted too much to use the .Fn approach, you should have a javascript code like this:

var ulStartFn = function () { Ext.Msg.wait('Uploading...'); };
var ulCplFn = function () { Ext.Msg.hide(); };
var ulErrorFn = function () { alert('error'); };

Then:

.Listeners(ls =>
                        {
                              ls.UploadStart.Fn = "ulStartFn";
                              ls.UploadComplete.Fn = "ulCplFn";
                              ls.UploadError.Fn = "ulErrorFn"; 
                        })

I believe this will sort the issue with MultiUpload. Just let me know otherwise.

[barnali]

My Bad. Did not notice it. Thanks a lot for pointing that out.

Now my UploadComplete listener is getting fired. From my action method I am returning a list as

return this.store(list);

and in the listener I need to populate a grid. I am doing as below, but it says "result" is undefined -

ls.UploadComplete.Handler = "Ext.Msg.hide();Ext.getCmp('gridFeeImport').getStore().loadData(result.data)";

My requirement is uploading a excel file, parse at the action controller and then populate a grid.

Won't i get "result" in UploadComplete listener ?

[barnali]

Even tried this. It says length is undefined !!!

ls.UploadComplete.Fn = "function (result) {Ext.Msg.hide();Ext.getCmp('winFeeImport').show();Ext.getCmp('gridFeeImport').getStore().loadData(result.data);}";

[fabricio.murta]

Hello @barnali!

Okay, then. I think it can't be helped, we'll need to see a sample code from you. Can you make a working and simple sample that reproduces your issue with the listener? I would need to better see what you expect the 'result' to be.

By the way, the browser's and VS's debugger is on your side. Make a var=function() { ... }, add a breakpoint inside the function, and you can experiment with the variable to see what really is in there.

Do you know how to come up with an example working example? If not, read thru these: More Information Required and Forum Guidelines For Posting New Topics.

If the JS debugging doesn't help, the code sample should do.

[barnali]

ls.UploadComplete does not return the data from the action method. When i checked the "result", it seems it is the control itself.

Anyway, got this implemented with a workaround (not technical, more of a functional workaround).

Now, facing another strange problem. When i click the browse button and upload the file, it is a success. But the second time gives a error. If i close the page and then try again first time success, second time failure.

Have you experienced any such behavior ?

[fabricio.murta]

Hello, @Barnali.

Have you experienced any such behavior ?

No, and I tested this quite a lot of times. You can restart, resume, stop, clear, re-add, and it works every time it is attempted.

Well, as a matter of fact, we have done a recent update to the mutiupload mechanism, and it is available on our latest SVN release. It will be out on 3.1 release soon, if you are not willing to try the beta.

But even without the latest updates, we didn't notice such an behavior. Look at this live example. It does not show such a problem like you described.

Well, it takes us back to the maxima of the code sample. If you get stuck, please provide us a working sample showing your problem, and then we will be able to pinpoint the reason and suggest you a definitive fix for the issue. :)