Getting image/video from html into java servlet as new File()

Question

I want to get a file (image or video) from an

<input type='file' id='file_i'/>
// Not this <input type='submit'/>

Using an XMLHttpRequest like this

function img() {
            var fd = new FormData();
            fd.append('file', document.getElementById("file_i").files[0]);
            var req;
            if (window.ActiveXObject) {
                req=new ActiveXObject();
            } else {
                req=new XMLHttpRequest();
            }
            req.open("post", "Image", true);
            req.send(fd);
        }

for example.
Then in the servlet doing this:

new FileInputStream(new File(request.getParameter("file")))

How can I retrieve that file? Thanks in advance.

Possible duplicate of: [How to upload files to server using JSP/Servlet?](https://stackoverflow.com/questions/2422468/how-to-upload-files-to-server-using-jsp-servlet) — DJDaveMark, Feb 07 '18 at 12:56
Possible duplicate of: [Simulate file form submission with XMLHttpRequest Level 2](https://stackoverflow.com/questions/9963514/simulate-file-form-submission-with-xmlhttprequest-level-2) — DJDaveMark, Feb 07 '18 at 13:00
If you answer my question giving me the javascript, html & java sample code for it, it would be greatly appreciated as it doesn't seem to be working for me — MBJH, Feb 07 '18 at 18:18
What Java techno are you using server-side? Plain servlets? JAX-RS? SpringMVC? Are you using an ORM? Hibernate? JPA? or JDBC straight to which DB? MySQL? PostgreSQL? Also can you use jQuery client-side? — DJDaveMark, Feb 07 '18 at 20:46
I use plain servlets, MySQL connector to MySQL Database, and I can use jQuery — MBJH, Feb 08 '18 at 17:19

MBJH · Accepted Answer · 2018-02-09T10:43:25.047

I fixed it. Here it is:

JAVASCRIPT

var fd = new FormData();
fd.append('file', document.getElementById("file_i").files[0]);
var req;
if (window.ActiveXObject) {
    req=new ActiveXObject();
} else {
    req=new XMLHttpRequest();
}
req.open("post", "Image", true);
req.send(fd);

JAVA

@MultipartConfig
public class addImage extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        Part filePart = request.getPart("file");
        InputStream fileContent = filePart.getInputStream();
}
}

XML

<servlet>
        <servlet-name>Add Image</servlet-name>
        <servlet-class>servlets.addImage</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>Add Image</servlet-name>
    <url-pattern>/Image</url-pattern>
</servlet-mapping>

score 0 · Answer 2 · answered Feb 09 '18 at 08:53

I think you miss some points.

It seems in your JavaScript code, that you just create the request. But you didn't respond to results.
```
req.addEventListener("load", reqListener);
```
You should define reqListener like that:
```
function reqListener () {
    // Here try to handle the response text, using "this.responseText"
    console.log(this.responseText);
}
```
See the full info here: Using XMLHttpRequest
Also in your Java code, you just stated that you created a file stream. You should read from this input stream into the request's output stream. Also you should set the header Content-Type: put_your_mime_type_here, For example: Content-Type: application/json, if your file is a json file, Content-Type: image/png, if your file is a PNG image.

See an example here: Example for making a file download URL in Java

Getting image/video from html into java servlet as new File()

2 Answers2

JAVASCRIPT

JAVA

XML