Ajax call used to upload a file to folder on the server returning 403 error
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 '18 at 19:54
StacieStacie
778
add a comment |
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 '18 at 19:54
StacieStacie
778
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 '18 at 23:32
@PerdiEstaquel I am open to other ideas, but what needs to happen is the file needs to be attached (temporarily saved somewhere) so when the overall form is submitted, attachment gets emailed along with other form input values.
– Stacie
Nov 26 '18 at 17:27
add a comment |
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 '18 at 19:54
StacieStacie
778
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 '18 at 19:54
StacieStacie
778
asked Nov 21 '18 at 19:54
StacieStacie
778
edited Nov 21 '18 at 21:26
Stacie
asked Nov 21 '18 at 19:54
StacieStacie
778
asked Nov 21 '18 at 19:54
StacieStacie
778
asked Nov 21 '18 at 19:54
StacieStacie
778
778
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 '18 at 23:32
@PerdiEstaquel I am open to other ideas, but what needs to happen is the file needs to be attached (temporarily saved somewhere) so when the overall form is submitted, attachment gets emailed along with other form input values.
– Stacie
Nov 26 '18 at 17:27
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 '18 at 23:32
@PerdiEstaquel I am open to other ideas, but what needs to happen is the file needs to be attached (temporarily saved somewhere) so when the overall form is submitted, attachment gets emailed along with other form input values.
– Stacie
Nov 26 '18 at 17:27
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 '18 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 '18 at 23:32
@PerdiEstaquel I am open to other ideas, but what needs to happen is the file needs to be attached (temporarily saved somewhere) so when the overall form is submitted, attachment gets emailed along with other form input values.
– Stacie
Nov 26 '18 at 17:27
@PerdiEstaquel I am open to other ideas, but what needs to happen is the file needs to be attached (temporarily saved somewhere) so when the overall form is submitted, attachment gets emailed along with other form input values.
– Stacie
Nov 26 '18 at 17:27
add a comment |
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
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
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
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 '18 at 23:32
@PerdiEstaquel I am open to other ideas, but what needs to happen is the file needs to be attached (temporarily saved somewhere) so when the overall form is submitted, attachment gets emailed along with other form input values.
– Stacie
Nov 26 '18 at 17:27