Ajax form with Express res.download and BlockUI not working
0
I build a server with Express for user to upload images ,then server process images array and response a zip by res.download .
First ,I try to post the Html form with submit function,it can work.
But I wish to display an image when the data process on the browser , so I use BlockUI.
And turn to use ajax send the form ,when it success will unblokUI , download file , then turn to other page.
Now server also get the ajax and sent response ,but it doesn't download the file.
Anyone has any idea? I'll be very appreciate!!
HTML
<form id="form" action="url" method="post" enctype="multipart/form-data">
<h2>upload</h2>
<div>
<label>User：</label>
<input type="text" id="user" name="user" accept="text" required="required">
</div>
<input id="fileUpload" type="file" name="file" accept="image/*" multiple="" required="required">
<input type="submit" value="submit" id="submit">
</form>
JavaScript
<script>
$(document).ready(function(){
$("#form").submit(function(e) {
e.preventDefault();
$.blockUI({ message: '<img style="width:50%" src="img_path' });
var form_data = new FormData($('form')[0]);
$.ajax({
type: 'POST',
url: 'url',
data: form_data,
processData: false,
contentType: false,
success: function() {
$.unblockUI();
location.replace("url");
}
});
Node js
app.post('router', upload.array('file', 30),function(req, res) {
compressing.zip.compressDir(myfile_path).then(() => {
res.download(myfile)
}
})
jquery ajax express
edited Nov 21 at 7:33
DestinatioN
1,2481326
asked Nov 21 at 6:02
J SU
83
add a comment |
0
I build a server with Express for user to upload images ,then server process images array and response a zip by res.download .
First ,I try to post the Html form with submit function,it can work.
But I wish to display an image when the data process on the browser , so I use BlockUI.
And turn to use ajax send the form ,when it success will unblokUI , download file , then turn to other page.
Now server also get the ajax and sent response ,but it doesn't download the file.
Anyone has any idea? I'll be very appreciate!!
HTML
<form id="form" action="url" method="post" enctype="multipart/form-data">
<h2>upload</h2>
<div>
<label>User：</label>
<input type="text" id="user" name="user" accept="text" required="required">
</div>
<input id="fileUpload" type="file" name="file" accept="image/*" multiple="" required="required">
<input type="submit" value="submit" id="submit">
</form>
JavaScript
<script>
$(document).ready(function(){
$("#form").submit(function(e) {
e.preventDefault();
$.blockUI({ message: '<img style="width:50%" src="img_path' });
var form_data = new FormData($('form')[0]);
$.ajax({
type: 'POST',
url: 'url',
data: form_data,
processData: false,
contentType: false,
success: function() {
$.unblockUI();
location.replace("url");
}
});
Node js
app.post('router', upload.array('file', 30),function(req, res) {
compressing.zip.compressDir(myfile_path).then(() => {
res.download(myfile)
}
})
jquery ajax express
edited Nov 21 at 7:33
DestinatioN
1,2481326
asked Nov 21 at 6:02
J SU
83
add a comment |
0
0
0
I build a server with Express for user to upload images ,then server process images array and response a zip by res.download .
First ,I try to post the Html form with submit function,it can work.
But I wish to display an image when the data process on the browser , so I use BlockUI.
And turn to use ajax send the form ,when it success will unblokUI , download file , then turn to other page.
Now server also get the ajax and sent response ,but it doesn't download the file.
Anyone has any idea? I'll be very appreciate!!
HTML
<form id="form" action="url" method="post" enctype="multipart/form-data">
<h2>upload</h2>
<div>
<label>User：</label>
<input type="text" id="user" name="user" accept="text" required="required">
</div>
<input id="fileUpload" type="file" name="file" accept="image/*" multiple="" required="required">
<input type="submit" value="submit" id="submit">
</form>
JavaScript
<script>
$(document).ready(function(){
$("#form").submit(function(e) {
e.preventDefault();
$.blockUI({ message: '<img style="width:50%" src="img_path' });
var form_data = new FormData($('form')[0]);
$.ajax({
type: 'POST',
url: 'url',
data: form_data,
processData: false,
contentType: false,
success: function() {
$.unblockUI();
location.replace("url");
}
});
Node js
app.post('router', upload.array('file', 30),function(req, res) {
compressing.zip.compressDir(myfile_path).then(() => {
res.download(myfile)
}
})
jquery ajax express
edited Nov 21 at 7:33
DestinatioN
1,2481326
asked Nov 21 at 6:02
J SU
83
I build a server with Express for user to upload images ,then server process images array and response a zip by res.download .
First ,I try to post the Html form with submit function,it can work.
But I wish to display an image when the data process on the browser , so I use BlockUI.
And turn to use ajax send the form ,when it success will unblokUI , download file , then turn to other page.
Now server also get the ajax and sent response ,but it doesn't download the file.
Anyone has any idea? I'll be very appreciate!!
HTML
<form id="form" action="url" method="post" enctype="multipart/form-data">
<h2>upload</h2>
<div>
<label>User：</label>
<input type="text" id="user" name="user" accept="text" required="required">
</div>
<input id="fileUpload" type="file" name="file" accept="image/*" multiple="" required="required">
<input type="submit" value="submit" id="submit">
</form>
JavaScript
<script>
$(document).ready(function(){
$("#form").submit(function(e) {
e.preventDefault();
$.blockUI({ message: '<img style="width:50%" src="img_path' });
var form_data = new FormData($('form')[0]);
$.ajax({
type: 'POST',
url: 'url',
data: form_data,
processData: false,
contentType: false,
success: function() {
$.unblockUI();
location.replace("url");
}
});
Node js
app.post('router', upload.array('file', 30),function(req, res) {
compressing.zip.compressDir(myfile_path).then(() => {
res.download(myfile)
}
})
jquery ajax express
jquery ajax express
edited Nov 21 at 7:33
DestinatioN
1,2481326
asked Nov 21 at 6:02
J SU
83
edited Nov 21 at 7:33
DestinatioN
1,2481326
asked Nov 21 at 6:02
J SU
83
edited Nov 21 at 7:33
DestinatioN
1,2481326
edited Nov 21 at 7:33
DestinatioN
1,2481326
edited Nov 21 at 7:33
DestinatioN
1,2481326
1,2481326
asked Nov 21 at 6:02
J SU
83
asked Nov 21 at 6:02
J SU
83
asked Nov 21 at 6:02
J SU
83
83
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
2
it's totally work dude,
express index.js file:
const express = require('express')
const app = express()
const port = 3000
app.post('/download', function (req, res) {
res.download("./test.zip")
})
app.use(express.static('public'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
test.html file:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://localhost:3000/download",
method:"POST",
type:"POST",
xhrFields: {
responseType: 'blob'
},
success:function(response, status, xhr){
var fileName = xhr.getResponseHeader('Content-Disposition').split("=")[1]
console.log(fileName)
var a = document.createElement('a');
var url = window.URL.createObjectURL(response);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
});
});
</script>
</body>
</html>
place your test.html file on static folder beside index.js file.
also download jquery.js and place beside test.html file.
answered Nov 21 at 6:16
mahradbt
1759
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 at 6:51
Hello @mahradbt ,I follow your tips to sent request by postman . Response looks good ,it return back a { content-type →application/zip },and name also correct. So I use fileDownload like this $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } }); But it didn't sent request to server.
– J SU
Nov 21 at 8:34
wait I test an example
– mahradbt
Nov 21 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 at 15:30
|
show 5 more comments
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
});
}
});
draft saved
draft discarded
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%2f53406097%2fajax-form-with-express-res-download-and-blockui-not-working%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
it's totally work dude,
express index.js file:
const express = require('express')
const app = express()
const port = 3000
app.post('/download', function (req, res) {
res.download("./test.zip")
})
app.use(express.static('public'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
test.html file:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://localhost:3000/download",
method:"POST",
type:"POST",
xhrFields: {
responseType: 'blob'
},
success:function(response, status, xhr){
var fileName = xhr.getResponseHeader('Content-Disposition').split("=")[1]
console.log(fileName)
var a = document.createElement('a');
var url = window.URL.createObjectURL(response);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
});
});
</script>
</body>
</html>
place your test.html file on static folder beside index.js file.
also download jquery.js and place beside test.html file.
answered Nov 21 at 6:16
mahradbt
1759
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 at 6:51
Hello @mahradbt ,I follow your tips to sent request by postman . Response looks good ,it return back a { content-type →application/zip },and name also correct. So I use fileDownload like this $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } }); But it didn't sent request to server.
– J SU
Nov 21 at 8:34
wait I test an example
– mahradbt
Nov 21 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 at 15:30
|
show 5 more comments
2
it's totally work dude,
express index.js file:
const express = require('express')
const app = express()
const port = 3000
app.post('/download', function (req, res) {
res.download("./test.zip")
})
app.use(express.static('public'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
test.html file:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://localhost:3000/download",
method:"POST",
type:"POST",
xhrFields: {
responseType: 'blob'
},
success:function(response, status, xhr){
var fileName = xhr.getResponseHeader('Content-Disposition').split("=")[1]
console.log(fileName)
var a = document.createElement('a');
var url = window.URL.createObjectURL(response);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
});
});
</script>
</body>
</html>
place your test.html file on static folder beside index.js file.
also download jquery.js and place beside test.html file.
answered Nov 21 at 6:16
mahradbt
1759
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 at 6:51
Hello @mahradbt ,I follow your tips to sent request by postman . Response looks good ,it return back a { content-type →application/zip },and name also correct. So I use fileDownload like this $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } }); But it didn't sent request to server.
– J SU
Nov 21 at 8:34
wait I test an example
– mahradbt
Nov 21 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 at 15:30
|
show 5 more comments
2
2
2
it's totally work dude,
express index.js file:
const express = require('express')
const app = express()
const port = 3000
app.post('/download', function (req, res) {
res.download("./test.zip")
})
app.use(express.static('public'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
test.html file:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://localhost:3000/download",
method:"POST",
type:"POST",
xhrFields: {
responseType: 'blob'
},
success:function(response, status, xhr){
var fileName = xhr.getResponseHeader('Content-Disposition').split("=")[1]
console.log(fileName)
var a = document.createElement('a');
var url = window.URL.createObjectURL(response);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
});
});
</script>
</body>
</html>
place your test.html file on static folder beside index.js file.
also download jquery.js and place beside test.html file.
answered Nov 21 at 6:16
mahradbt
1759
it's totally work dude,
express index.js file:
const express = require('express')
const app = express()
const port = 3000
app.post('/download', function (req, res) {
res.download("./test.zip")
})
app.use(express.static('public'))
app.listen(port, () => console.log(`Example app listening on port ${port}!`))
test.html file:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
</head>
<body>
<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url:"http://localhost:3000/download",
method:"POST",
type:"POST",
xhrFields: {
responseType: 'blob'
},
success:function(response, status, xhr){
var fileName = xhr.getResponseHeader('Content-Disposition').split("=")[1]
console.log(fileName)
var a = document.createElement('a');
var url = window.URL.createObjectURL(response);
a.href = url;
a.download = fileName;
a.click();
window.URL.revokeObjectURL(url);
}
});
});
</script>
</body>
</html>
place your test.html file on static folder beside index.js file.
also download jquery.js and place beside test.html file.
answered Nov 21 at 6:16
mahradbt
1759
edited Nov 22 at 11:05
answered Nov 21 at 6:16
mahradbt
1759
answered Nov 21 at 6:16
mahradbt
1759
answered Nov 21 at 6:16
mahradbt
1759
1759
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 at 6:51
Hello @mahradbt ,I follow your tips to sent request by postman . Response looks good ,it return back a { content-type →application/zip },and name also correct. So I use fileDownload like this $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } }); But it didn't sent request to server.
– J SU
Nov 21 at 8:34
wait I test an example
– mahradbt
Nov 21 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 at 15:30
|
show 5 more comments
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 at 6:51
Hello @mahradbt ,I follow your tips to sent request by postman . Response looks good ,it return back a { content-type →application/zip },and name also correct. So I use fileDownload like this $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } }); But it didn't sent request to server.
– J SU
Nov 21 at 8:34
wait I test an example
– mahradbt
Nov 21 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 at 15:30
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 at 6:30
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 at 6:30
first, send the request with
postman. if you can download file, use $.fileDownload instead of $.ajax– mahradbt
Nov 21 at 6:51
first, send the request with
postman. if you can download file, use $.fileDownload instead of $.ajax– mahradbt
Nov 21 at 6:51
Hello @mahradbt ,I follow your tips to sent request by postman . Response looks good ,it return back a { content-type →application/zip },and name also correct. So I use fileDownload like this $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } }); But it didn't sent request to server.
– J SU
Nov 21 at 8:34
Hello @mahradbt ,I follow your tips to sent request by postman . Response looks good ,it return back a { content-type →application/zip },and name also correct. So I use fileDownload like this $.fileDownload({ type: 'POST', url: 'url', data: form_data, processData: false, contentType: false, success: function() { // $.unblockUI(); } }); But it didn't sent request to server.
– J SU
Nov 21 at 8:34
wait I test an example
– mahradbt
Nov 21 at 14:54
wait I test an example
– mahradbt
Nov 21 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 at 15:30
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 at 15:30
|
show 5 more comments
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53406097%2fajax-form-with-express-res-download-and-blockui-not-working%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
