File upload widget - using File API and Ext.data.Connection

[commanche]

I wrote the widget for one of my projects and now I'd like to share it.

Main features:

• uses the native File API (HTML5)
• allows selecting multiple files at once
• uses raw PUT/POST request with the Ext.data.Connection object (no flash, or hidden iframes)
• displays upload progress
• supports asynchronous (simultaneous) upload

Links:

• github project
• live demo
• API docs
• more info in the blogpost

extjs-upload-widget.jpg

[scottmartin]

We have numerous requests for this type of widget. Thanks for sharing.

Regards,
Scott.

[kappiil]

Hi, we have been trying to use this widget in our code. We have been successful in rendering the UI and ExtJS part. BUT when we upload files we are getting exception in our Java code (Spring Action Class). Could you please help us how can we do the upload functionality in java instead of php??

Thanks in advance.

Thanks
Kapil

[commanche]

Hi, we have been trying to use this widget in our code. We have been successful in rendering the UI and ExtJS part. BUT when we upload files we are getting exception in our Java code (Spring Action Class). Could you please help us how can we do the upload functionality in java instead of php??

Thanks in advance.

Thanks
Kapil

What kind of exception did you get?

When implementing the server part, you have to process raw POST data. It's not a standard file upload. In PHP it's easy - you have to read the standard input. But I don't know how that can be done in Java.

[kappiil]

HI,
We are getting this Exception in console. So please help me.

SEVERE: Servlet.service() for servlet [appServlet] in context with path [/Login] threw exception [Request processing failed; nested exception is java.lang.NullPointerException] with root cause
java.lang.NullPointerException
at com.mpm.common.controller.FileUploadController.create(FileUploadController.java:55)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:57)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:601)
at org.springframework.web.bind.annotation.support.HandlerMethodInvoker.invokeHandlerMethod(HandlerMethodInvoker.java:176)
at org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.invokeHandlerMethod(AnnotationMethodHandlerAdapter.java:436)
at org.springframework.web.servlet.mvc.annotation.AnnotationMethodHandlerAdapter.handle(AnnotationMethodHandlerAdapter.java:424)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:790)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:719)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:669)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:585)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:641)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:722)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:304)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:210)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:224)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:175)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:472)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:164)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:100)
at org.apache.catalina.valves.AccessLogValve.invoke(AccessLogValve.java:929)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:118)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:405)
at org.apache.coyote.http11.Http11Processor.process(Http11Processor.java:279)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:515)
at org.apache.tomcat.util.net.JIoEndpoint$SocketProcessor.run(JIoEndpoint.java:302)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1110)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:603)
at java.lang.Thread.run(Thread.java:722)


Thanks
Kapil

[commanche]

I'm sorry, but I can't help you. I'm not a Java programmer. I would advice you to search for solution for retrieving raw post data, for example:

http://stackoverflow.com/questions/5...equest-in-java

[mayur_satasiya]

HiCommanche,
I can Upload multiple file at a time using File Upload widget. but can u help me for finding the file path, How can i get the full file path instead of only file name in Http- Request, Please help me this out.


Thanks
Mayur

[commanche]

HiCommanche,
I can Upload multiple file at a time using File Upload widget. but can u help me for finding the file path, How can i get the full file path instead of only file name in Http- Request, Please help me this out.

Thanks
Mayur

Hi,
I'm not sure that I understand your question. Are you talking about the example and the upload.php script? If that is the case, the upload.php script doesn't save the data into files, it just reads them. To save the file, you need to do something like:

$fp = fopen('php://input', 'r');
$targetFile = fopen('/some/directory/' . $fileName, 'w');

while (!feof($fp)) {
    $data = fread($fp, 1024);
    fwrite($targetFile, $data);
} 

Maybe I should add some more examples...

[mayur_satasiya]

Thanks for your reply,
but i want full path of file from where the original file pickup.from any location of local system.
when we press Browse button and pickup file i want that original file path. and Http Request only gives me file name not the full path. so i want full file path.



Thanks
Mayur

[commanche]

Thanks for your reply,
but i want full path of file from where the original file pickup.from any location of local system.
when we press Browse button and pickup file i want that original file path. and Http Request only gives me file name not the full path. so i want full file path.

Thanks
Mayur

Ok, you mean the full path of the file on the client side...
That information is not available through the File API:

http://www.w3.org/TR/FileAPI/#dfn-file

Probably for security reasons...