Mixing
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 '18 at 7:33
Julian Stark
1,2681426
asked Nov 21 '18 at 6:02
J SUJ 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 '18 at 7:33
Julian Stark
1,2681426
asked Nov 21 '18 at 6:02
J SUJ 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 '18 at 7:33
Julian Stark
1,2681426
asked Nov 21 '18 at 6:02
J SUJ 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 '18 at 7:33
Julian Stark
1,2681426
asked Nov 21 '18 at 6:02
J SUJ SU
83
edited Nov 21 '18 at 7:33
Julian Stark
1,2681426
asked Nov 21 '18 at 6:02
J SUJ SU
83
edited Nov 21 '18 at 7:33
Julian Stark
1,2681426
edited Nov 21 '18 at 7:33
Julian Stark
1,2681426
edited Nov 21 '18 at 7:33
Julian Stark
1,2681426
1,2681426
asked Nov 21 '18 at 6:02
J SUJ SU
83
asked Nov 21 '18 at 6:02
J SUJ SU
83
asked Nov 21 '18 at 6:02
J SUJ SU
83
83
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
3
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 '18 at 6:16
mahradbtmahradbt
1839
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 '18 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 '18 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 '18 at 8:34
wait I test an example
– mahradbt
Nov 21 '18 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 '18 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
3
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 '18 at 6:16
mahradbtmahradbt
1839
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 '18 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 '18 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 '18 at 8:34
wait I test an example
– mahradbt
Nov 21 '18 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 '18 at 15:30
|
show 5 more comments
3
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 '18 at 6:16
mahradbtmahradbt
1839
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 '18 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 '18 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 '18 at 8:34
wait I test an example
– mahradbt
Nov 21 '18 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 '18 at 15:30
|
show 5 more comments
3
3
3
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 '18 at 6:16
mahradbtmahradbt
1839
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 '18 at 6:16
mahradbtmahradbt
1839
edited Nov 22 '18 at 11:05
answered Nov 21 '18 at 6:16
mahradbtmahradbt
1839
answered Nov 21 '18 at 6:16
mahradbtmahradbt
1839
answered Nov 21 '18 at 6:16
mahradbtmahradbt
1839
1839
Hello @mahradbt ,sorry I'm new with jquery . Did you mean I test the code in ajax success?
– J SU
Nov 21 '18 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 '18 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 '18 at 8:34
wait I test an example
– mahradbt
Nov 21 '18 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 '18 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 '18 at 6:30
first, send the request withpostman. if you can download file, use$.fileDownloadinstead of$.ajax
– mahradbt
Nov 21 '18 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 '18 at 8:34
wait I test an example
– mahradbt
Nov 21 '18 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 '18 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 '18 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 '18 at 6:30
first, send the request with
postman. if you can download file, use $.fileDownload instead of $.ajax– mahradbt
Nov 21 '18 at 6:51
first, send the request with
postman. if you can download file, use $.fileDownload instead of $.ajax– mahradbt
Nov 21 '18 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 '18 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 '18 at 8:34
wait I test an example
– mahradbt
Nov 21 '18 at 14:54
wait I test an example
– mahradbt
Nov 21 '18 at 14:54
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 '18 at 15:30
dude test new jquery code, have fun ;)
– mahradbt
Nov 21 '18 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.
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
