1. File Ext List
2. Ext.form.field.file Example

Steps to create File Upload field using Ext Js. Stack Overflow. File upload using EXT JS. Ext JS form file uploads file on every form submit. The key here is the autoCreate config option of Ext.form.Field class. Extjs upload file example. Extjs upload file to server. Extjs multi file upload. Extjs upload.

4 Answers

As far as specific steps are concerned, using functionality supported in ExtJS 3x, your best best is to use this module/plugin:

The core script comes with the Ext JS package, in your main HTML file (where you have linked to the core Ext scripts), in the head section after your other scripts put:

Sadly, there isnt a huge amount of documentation on this element of Ext JS- however for basic functionality, you can create a form with an async upload field using the below:

What this code will do is create a new formpanel with an upload field and an upload button. When you click the upload button- the selected file will be sent to the serverside script handleupload.php (or whatever you call it). It is then this script that handles what you want to do with the file. An example of this could potentially be:

Which would inject the file into a SQL DB. The thing to remember is the server side file handles an upload just as a normal HTML form would...

Hope this helps!

If you look at the examples available at www.ExtJS.com, you'll find this one.

Although it is based on the standard HTML file upload - just like this answer suggests.

setting the id only will result in the $_FILES array name to be the same as the id. If you need to use something else then set the name config option and it will use that instead.

protected by SW4Dec 15 '14 at 13:33

Thank you for your interest in this question. Because it has attracted low-quality or spam answers that had to be removed, posting an answer now requires 10 reputation on this site (the association bonus does not count).
Would you like to answer one of these unanswered questions instead?

Not the answer you're looking for? Browse other questions tagged extjs or ask your own question.

Join the DZone community and get the full member experience.

This tutorial will walk you through out how to use the Ext JS 4 File Upload Field in the front end and Spring MVC 3 in the back end.

File Ext List

This tutorial is also an update for the tutorial Ajax File Upload with ExtJS and Spring Framework, implemented with Ext JS 3 and Spring MVC 2.5.

First, we will need the Ext JS 4 File upload form. This one is the same as showed in Ext JS 4 docs.

Then in the HTML page, we will have a div where we are going to render the Ext JS form. This page also contains the required javascript imports

Ext.form.field.file Example

We will also need a FileUpload Bean to represent the file as a multipart file:

Then we will need a controller. This one is implemented with Spring MVC 3.

Some people asked me how to return something to the form to display a message to the user. We can implement a POJO with a success property. The success property is the only thing Ext JS needs as a return:

Don’t forget to add the multipart file config in the Spring config file:

I also got some questions about NullPointerException. Make sure the fileupload field name has the same name as the CommonsMultipartFile property in the FileUploadBean class:

ExtJS:

Java:

These properties ALWAYS have to match!

You can still use the Spring MVC 2.5 code with the Ext JS 4 code presented in this tutorial.

Download

You can download the source code from my Github repository (you can clone the project or you can click on the download button on the upper right corner of the project page): https://github.com/loiane/extjs4-file-upload-spring

You can also download the source code form the Google Code repository: http://code.google.com/p/extjs4-file-upload-spring/

Both repositories have the same source. Google Code is just an alternative.

Happy Coding!

From http://loianegroner.com/2011/07/extjs-4-file-upload-spring-mvc-3-example/

Opinions expressed by DZone contributors are their own.