Ajax call used to upload a file to folder on the server returning 403 error
up vote
0
down vote
favorite
So after days of research, I am still stuck on this modal situation...
I have a two forms on one page, but one is in a modal. Seems that the only way to submit the modal (which just lets users upload a file to save on server when submitted) without the page refreshing (and loosing data from other form), is to use a javascript ajax call. I keep getting a 403 error in the browser when I do this... not sure why or how to fix it since I am not getting any real error notices. Is it my ajax post or controller? Not sure... please help!
I was able to upload the file to the folder in java/spring-boot but I was loosing form data because modal submit would refresh page, so I don't think this is a server issue. And if I use on('submit') instead of onClick, it sends the file to the storage folder, but refreshes the page. Why isn't my onclick function working?
I've been basing my situation off of this: post
HTML:
<div id="modal" class="modal" data-izimodal-title="Upload a Document">
<div id="newRequiredDocForm">
<form enctype="multipart/form-data" th:action="directBind" method="post" th:object="${document}">
<div class="row">
<div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
<div class="col-xs-4 col-sm-3 text-right">
<label class="modalLabel">File:</label>
</div>
<div class="col-xs-8 col-sm-7">
<input type="file" id="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
</div>
</div>
<br/><br/>
<div style="text-align: right;"><input type="button" id="attachTheDoc" class="btn btn-docModal" value="Submit"/></div>
</form>
</div>
</div>Controller:
@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
document.setStorage(storageService.store(file));
model.addAttribute("newDocument", document);
return document;
}Ajax javascript:
$('#attachTheDoc').click(function(){
var data = $('#file').val();
console.log($('#file').val());
$.ajax({
type: "POST",
data: data,
cache: false,
url: "/directBind_ajax",
success: function(data){
alert("Your files have been saved");
},
error: function(){
alert("Error - File not uploaded");
}
});
});java ajax apache spring-boot
asked Nov 21 at 19:54
Stacie
438
add a comment |
up vote
0
down vote
favorite
So after days of research, I am still stuck on this modal situation...
I have a two forms on one page, but one is in a modal. Seems that the only way to submit the modal (which just lets users upload a file to save on server when submitted) without the page refreshing (and loosing data from other form), is to use a javascript ajax call. I keep getting a 403 error in the browser when I do this... not sure why or how to fix it since I am not getting any real error notices. Is it my ajax post or controller? Not sure... please help!
I was able to upload the file to the folder in java/spring-boot but I was loosing form data because modal submit would refresh page, so I don't think this is a server issue. And if I use on('submit') instead of onClick, it sends the file to the storage folder, but refreshes the page. Why isn't my onclick function working?
I've been basing my situation off of this: post
HTML:
<div id="modal" class="modal" data-izimodal-title="Upload a Document">
<div id="newRequiredDocForm">
<form enctype="multipart/form-data" th:action="directBind" method="post" th:object="${document}">
<div class="row">
<div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
<div class="col-xs-4 col-sm-3 text-right">
<label class="modalLabel">File:</label>
</div>
<div class="col-xs-8 col-sm-7">
<input type="file" id="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
</div>
</div>
<br/><br/>
<div style="text-align: right;"><input type="button" id="attachTheDoc" class="btn btn-docModal" value="Submit"/></div>
</form>
</div>
</div>Controller:
@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
document.setStorage(storageService.store(file));
model.addAttribute("newDocument", document);
return document;
}Ajax javascript:
$('#attachTheDoc').click(function(){
var data = $('#file').val();
console.log($('#file').val());
$.ajax({
type: "POST",
data: data,
cache: false,
url: "/directBind_ajax",
success: function(data){
alert("Your files have been saved");
},
error: function(){
alert("Error - File not uploaded");
}
});
});java ajax apache spring-boot
asked Nov 21 at 19:54
Stacie
438
The workflow seems odd. Not saying you are wrong, but why have a modal to upload a file before sending the form? Normally you'd select the file in the form and it gets uploaded together with the rest of the form when submitting.
– Perdi Estaquel
Nov 21 at 23:32
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
So after days of research, I am still stuck on this modal situation...
I have a two forms on one page, but one is in a modal. Seems that the only way to submit the modal (which just lets users upload a file to save on server when submitted) without the page refreshing (and loosing data from other form), is to use a javascript ajax call. I keep getting a 403 error in the browser when I do this... not sure why or how to fix it since I am not getting any real error notices. Is it my ajax post or controller? Not sure... please help!
I was able to upload the file to the folder in java/spring-boot but I was loosing form data because modal submit would refresh page, so I don't think this is a server issue. And if I use on('submit') instead of onClick, it sends the file to the storage folder, but refreshes the page. Why isn't my onclick function working?
I've been basing my situation off of this: post
HTML:
<div id="modal" class="modal" data-izimodal-title="Upload a Document">
<div id="newRequiredDocForm">
<form enctype="multipart/form-data" th:action="directBind" method="post" th:object="${document}">
<div class="row">
<div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
<div class="col-xs-4 col-sm-3 text-right">
<label class="modalLabel">File:</label>
</div>
<div class="col-xs-8 col-sm-7">
<input type="file" id="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
</div>
</div>
<br/><br/>
<div style="text-align: right;"><input type="button" id="attachTheDoc" class="btn btn-docModal" value="Submit"/></div>
</form>
</div>
</div>Controller:
@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
document.setStorage(storageService.store(file));
model.addAttribute("newDocument", document);
return document;
}Ajax javascript:
$('#attachTheDoc').click(function(){
var data = $('#file').val();
console.log($('#file').val());
$.ajax({
type: "POST",
data: data,
cache: false,
url: "/directBind_ajax",
success: function(data){
alert("Your files have been saved");
},
error: function(){
alert("Error - File not uploaded");
}
});
});java ajax apache spring-boot
asked Nov 21 at 19:54
Stacie
438
So after days of research, I am still stuck on this modal situation...
I have a two forms on one page, but one is in a modal. Seems that the only way to submit the modal (which just lets users upload a file to save on server when submitted) without the page refreshing (and loosing data from other form), is to use a javascript ajax call. I keep getting a 403 error in the browser when I do this... not sure why or how to fix it since I am not getting any real error notices. Is it my ajax post or controller? Not sure... please help!
I was able to upload the file to the folder in java/spring-boot but I was loosing form data because modal submit would refresh page, so I don't think this is a server issue. And if I use on('submit') instead of onClick, it sends the file to the storage folder, but refreshes the page. Why isn't my onclick function working?
I've been basing my situation off of this: post
HTML:
<div id="modal" class="modal" data-izimodal-title="Upload a Document">
<div id="newRequiredDocForm">
<form enctype="multipart/form-data" th:action="directBind" method="post" th:object="${document}">
<div class="row">
<div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
<div class="col-xs-4 col-sm-3 text-right">
<label class="modalLabel">File:</label>
</div>
<div class="col-xs-8 col-sm-7">
<input type="file" id="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
</div>
</div>
<br/><br/>
<div style="text-align: right;"><input type="button" id="attachTheDoc" class="btn btn-docModal" value="Submit"/></div>
</form>
</div>
</div>Controller:
@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
document.setStorage(storageService.store(file));
model.addAttribute("newDocument", document);
return document;
}Ajax javascript:
$('#attachTheDoc').click(function(){
var data = $('#file').val();
console.log($('#file').val());
$.ajax({
type: "POST",
data: data,
cache: false,
url: "/directBind_ajax",
success: function(data){
alert("Your files have been saved");
},
error: function(){
alert("Error - File not uploaded");
}
});
}); <div id="modal" class="modal" data-izimodal-title="Upload a Document">
<div id="newRequiredDocForm">
<form enctype="multipart/form-data" th:action="directBind" method="post" th:object="${document}">
<div class="row">
<div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
<div class="col-xs-4 col-sm-3 text-right">
<label class="modalLabel">File:</label>
</div>
<div class="col-xs-8 col-sm-7">
<input type="file" id="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
</div>
</div>
<br/><br/>
<div style="text-align: right;"><input type="button" id="attachTheDoc" class="btn btn-docModal" value="Submit"/></div>
</form>
</div>
</div> <div id="modal" class="modal" data-izimodal-title="Upload a Document">
<div id="newRequiredDocForm">
<form enctype="multipart/form-data" th:action="directBind" method="post" th:object="${document}">
<div class="row">
<div class="col-xs-4 col-sm-3 text-right"><label class="modalLabel">Type:</label></div>
<div class="col-xs-4 col-sm-3 text-right">
<label class="modalLabel">File:</label>
</div>
<div class="col-xs-8 col-sm-7">
<input type="file" id="file" name="document" multiple="multiple" style="margin-right:-20px;"/>
</div>
</div>
<br/><br/>
<div style="text-align: right;"><input type="button" id="attachTheDoc" class="btn btn-docModal" value="Submit"/></div>
</form>
</div>
</div>@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
document.setStorage(storageService.store(file));
model.addAttribute("newDocument", document);
return document;
}@RequestMapping(value="/directBind_ajax", method=RequestMethod.POST)
public @ResponseBody Document docSend(@ModelAttribute("document") Document document, Model model, @RequestParam("file") MultipartFile file){
document.setStorage(storageService.store(file));
model.addAttribute("newDocument", document);
return document;
}$('#attachTheDoc').click(function(){
var data = $('#file').val();
console.log($('#file').val());
$.ajax({
type: "POST",
data: data,
cache: false,
url: "/directBind_ajax",
success: function(data){
alert("Your files have been saved");
},
error: function(){
alert("Error - File not uploaded");
}
});
});$('#attachTheDoc').click(function(){
var data = $('#file').val();
console.log($('#file').val());
$.ajax({
type: "POST",
data: data,
cache: false,
url: "/directBind_ajax",
success: function(data){
alert("Your files have been saved");
},
error: function(){
alert("Error - File not uploaded");
}
});
});java ajax apache spring-boot
java ajax apache spring-boot
asked Nov 21 at 19:54
Stacie
438
asked Nov 21 at 19:54
Stacie
438
edited Nov 21 at 21:26
asked Nov 21 at 19:54
Stacie
438
asked Nov 21 at 19:54
Stacie
438
asked Nov 21 at 19:54
Stacie
438
438
The workflow seems odd. Not saying you are wrong, but why have a modal to upload a file before sending the form? Normally you'd select the file in the form and it gets uploaded together with the rest of the form when submitting.
– Perdi Estaquel
Nov 21 at 23:32
add a comment |
The workflow seems odd. Not saying you are wrong, but why have a modal to upload a file before sending the form? Normally you'd select the file in the form and it gets uploaded together with the rest of the form when submitting.
– Perdi Estaquel
Nov 21 at 23:32
The workflow seems odd. Not saying you are wrong, but why have a modal to upload a file before sending the form? Normally you'd select the file in the form and it gets uploaded together with the rest of the form when submitting.
– Perdi Estaquel
Nov 21 at 23:32
The workflow seems odd. Not saying you are wrong, but why have a modal to upload a file before sending the form? Normally you'd select the file in the form and it gets uploaded together with the rest of the form when submitting.
– Perdi Estaquel
Nov 21 at 23:32
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53419603%2fajax-call-used-to-upload-a-file-to-folder-on-the-server-returning-403-error%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
The workflow seems odd. Not saying you are wrong, but why have a modal to upload a file before sending the form? Normally you'd select the file in the form and it gets uploaded together with the rest of the form when submitting.
– Perdi Estaquel
Nov 21 at 23:32