Multipart File submit never hit the server method

Question

I have an ajax call: what happens is that I click on an Image that clicks on "input file" that I don't want it to be shown. when the input val() is changed method uploadListener() is invoked which is basically an ajax method that get the file to the server "upload it to server" code goes like this: html:

<img id="${assayAssessRequest.id}" src="[@spring.url '/images/buttons/upload.jpg'/]" onclick="uploadFile(this);" title="Upload File" />
<form id="uploadForm" action="[@spring.url '/assay/designability/uploadFile.htm'/]" method="POST" enctype="multipart/form-data">
        <div style="display: none;">
        [@spring.formInput path="multiPartBean.file" fieldType="file" attributes="title='path' class='upload' accept='.txt,.csv,.zip'" /]
        [@spring.formHiddenInput path="multiPartBean.fileName" attributes=" onchange='uploadListener();'class='uploadFileName'" /]
        [@spring.bind "multiPartBean"/]
        </div>
        <input type="submit" id="uploadButton" value="upload" />
    </form>

javaScript:

function uploadFile(){
    document.getElementById('inputFile').click();
}

function uploadListener(){
   $('#uploadForm').attr("action","[@spring.url    '/assay/designability/uploadFile.htm'/]");
   alert($('#uploadForm').attr('action'));
   this.document.getElementById("uploadForm").submit = true;
   alert("After Submit");
   return false;
}

server controller:

@Controller
@PreAuthorize("isAuthenticated()")
@RequestMapping("/assay/designability")
@SessionAttributes({"assayAssessmentsInitializersBean","assayAssessmentsRequestsDetailsBean"})
public class AssayDesignabilityController extends AssayBaseController {

    @RequestMapping(value = "/uploadFile",method= RequestMethod.GET)
    public String uploadFile(@RequestParam(value = "file")Object file){
        MultipartFile multipartFile=(MultipartFile)file;

        logger.info(multipartFile.getName());
        return multipartFile.getName();
    }
}

now when I do all that, the response give me nonsense and when I try to debug I never get to the controller method. any help??

EDIT: now I try to submit it I've updated code and I have the same behavior no response.

i mean have you tried to paste the url in your browser to see if the url is fine?? — Anubhab, Mar 28 '13 at 18:12
Why are you using `GET` request for uploading a file? Use `POST`. — Artyom Neustroev, Mar 28 '13 at 18:13
@neustroev.ai I used POST and someone suggested to use get, same behavior — Muhammad Bekette, Mar 28 '13 at 18:17
oohk...how can you be sure if its reaching controller or not? Have some log statements at all the levels and see where it is failing.. — Anubhab, Mar 28 '13 at 18:19
I try to debug the method uploadFile and it never reach the 1st line. — Muhammad Bekette, Mar 28 '13 at 18:20
try having some alert in the uploadlistener and see whether the method is getting called when you upload..or change the ajax url to some other page and check if that is the issue... — Anubhab, Mar 28 '13 at 18:21
@theshadowmonkey That doesn't matter, semicolons are far from required, especially for something like this — Ian, Mar 28 '13 at 18:24
@MuhammadRamahy Try using the `error` option for `$.ajax` - then you'll see if something is failing — Ian, Mar 28 '13 at 18:25
@theshadowmonkey ohhh do you mean the js, are you kidding me?! — Muhammad Bekette, Mar 28 '13 at 18:25
@Ian he says even his first call is not getting called. uploadfile() then triggers the uploadlistener() — theshadowmonkey, Mar 28 '13 at 18:26
@theshadowmonkey No it doesn't. `uploadfile()` triggers the `input[file]` to be clicked...which opens a dialog. When the user chooses a file, then `uploadListener()` is called - because the value of the `input[file]` has changed. The `input[file]` has an `onchange` handler...and that is to call `uploadListener()` — Ian, Mar 28 '13 at 18:30
@MuhammadRamahy Also, I don't know how I missed it, but you can't upload a file with AJAX. And all calling `$('#inputFile').val()` does is get the name of the file the user chose. It won't actually pass the file itself to the server — Ian, Mar 28 '13 at 18:31
and I would suggest reading this once for more robust code http://en.wikipedia.org/wiki/Unobtrusive_JavaScript — theshadowmonkey, Mar 28 '13 at 18:33
@Ian true it gets the name of the file, maybe this is the reason, thought I use Object to recieve the request param so it should "at least" invoke the method but this never happens. — Muhammad Bekette, Mar 28 '13 at 18:35
@Ian can you confirm that file upload cannot be done through ajax calls? a link or something? thanks :-) — Muhammad Bekette, Mar 28 '13 at 18:37
@MuhammadRamahy I'm confused - are your Javascript functions being executed? Can you confirm by using `alert` or `console.log`? I just want to make sure I understand correctly. I have a simple example working (no AJAX calls) - http://jsfiddle.net/fC43h/ — Ian, Mar 28 '13 at 18:38
Dear @theshadowmonkey I totally agree I should put the ; what I and Ian are trying to say that IT DOESN'T RELATE to my problem. thanks — Muhammad Bekette, Mar 28 '13 at 18:39
@Ian I do alert the response but it alert some js script of the page what my hypothesis is that the js passess to the server but fails to invoke the method. — Muhammad Bekette, Mar 28 '13 at 18:45
what really annoys me is that it alert the response on "success" which does not make any sense — Muhammad Bekette, Mar 28 '13 at 18:46
@MuhammadRamahy So it's a little confusing, but you *can* upload a file with AJAX. The problem is that it is incredibly inconsistent/unsupported across browsers. The new `XMLHttpRequest2` natively supports the transfer of files, but isn't available in all browsers. But things like https://developer.mozilla.org/en-US/docs/DOM/File and https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/FormData are possible with normal `XMLHttpRequest` but again, aren't fully supported. — Ian, Mar 28 '13 at 18:49
But you can look at http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload and http://stackoverflow.com/questions/4856917/jquery-upload-progress-and-ajax-file-upload/4943774 which have options of using an `` or SWF — Ian, Mar 28 '13 at 18:51
And one other quick thing - you send the AJAX request to `/panda/assay/designability/uploadFile.htm`, but your Spring RequestMapping is for `@RequestMapping(value = "/uploadFile"` - those paths/filenames don't match up. — Ian, Mar 28 '13 at 18:52
thanks for the links, nah I have a filter that gets the controller/method path without the extension and it is working fine with me so far :-) — Muhammad Bekette, Mar 28 '13 at 18:58

score 2 · Accepted Answer · answered Apr 04 '13 at 19:05

I've solved my problem by avoiding ajax call and re implement my code thanks to @Ian.

here is the code:

Html plus Freemarker

<form id="uploadForm" action="#" method="POST" enctype="multipart/form-data">
    <div class="instruction popup_inst">
        <span class="popup_logo">[@spring.message "pandaLogo"/]</span>

        <div class="float_right">
            <input type="button" id="cancelBtn" class="btn" onclick="refreshParentTable();closePopup();" value="[@spring.message "cancelButton"/]" />
            <input class="btn" type="submit" id="submit" onclick="validateFileInput();" value="[@spring.message "uploadButton"/]" />
        </div>

    </div>
    <span class="popup_title">[@spring.message "uploadFile"/]</span>
    <div class="popup_container">
        [@spring.bind "assayAssessmentsRequestBean"/]
        [@spring.formInput path="assayAssessmentsRequestBean.designabilityFile.file" fieldType="file" attributes="title='path' class='upload' accept='.txt,.csv,.zip'" /]
        [@spring.formHiddenInput path="assayAssessmentsRequestBean.designabilityFile.fileName" attributes="class='uploadFileName'" /]
        [@spring.formHiddenInput path="assayAssessmentsRequestBean.dateOfAssessment" attributes="" /]
        [@spring.formHiddenInput path="assayAssessmentsRequestBean.id" attributes="" /]
    </div>
    <input id="uploadfile" type="hidden" value="${uploadfile}"/>
</form>

controller:

@RequestMapping(value = "/uploadFile",method= RequestMethod.POST)
    public ModelAndView uploadFile(@ModelAttribute(value = "assayAssessmentsRequestBean")AssayAssessmentsRequestBean assayAssessmentsRequestBean,HttpSession session) throws PanDaApplicationException {
//mycode
}

from this experience I would advice evreyone to avoid sending files via ajax calls for me I used a popup window to create form and submit upload operation. Thanks for everyone tried to help

score 1 · Answer 2 · answered Apr 04 '13 at 15:36

If i see correctly, the submit action points to "uploadfile.HTM"

$('#uploadForm').attr("action","[@spring.url '/assay/designability/uploadFile.htm'/]");

but the method in your controller is mapped only to uploadFile (without .htm)

@RequestMapping(value = "/uploadFile",method= RequestMethod.GET)

Maybe you have another configuration on your web.xml / servlet-spring.xml that makes this possible, but otherwise, this could be the problem.

Hope this helps

Regards

well I use filter for such things, it's not the problem. thanks :-) — Muhammad Bekette, Apr 04 '13 at 16:18

Multipart File submit never hit the server method

2 Answers2