JavaScript Prompt download in browser - javascript

Im simply trying to download a file from the server and prompt the download in the browser for the user to see.
What i have right now:
Client
export function downloadTemplateAction(questionnaire) {
return dispatch => {
dispatch(downloadTemplateRequestAction(questionnaire));
return request
.get(downloadGETUrl)
.end((err, res) => {
if (err) {
console.log("Download ERROR", err)
dispatch(downloadTemplateFailureAction(err, questionnaire));
} else {
console.log("Download Success", res.body)
dispatch(downloadTemplateSuccessAction(res.body, questionnaire));
}
});
}
}
Server:
export function downloadTemplateDocument(req, res){
res.download('template/Example.docx');
res.end();
}
Im facing two problems:
First: When trying to download the file via the function of the Client, the response body is null but success and nothing more happens.
Second: When contacting the get API via the browser localhost:3002/api/download, the download works but the received file is empty. There should be text in it.
What am i doing wrong here?

Browser can't prompt a download progress because your request is sent via XMLHttpRequest.
Physical access to the file is needed for the browser to be aware of any download.
You could use download attribute to tell browser to download linked ressource.
original answer

Related

How to open an S3 pre-signed URL in another tab?

How do I open an S3 file in another tab and not download it? I have this feature that generates a pre-signed URL. The front-end then opens this URL. However, what I would like to happen is to open the file in another tab so that the user can see the file before downloading it.
Backend
static async downloadFile(req, res, next) {
s3.getSignedUrl('getObject', {
Bucket: process.env.BUCKET_NAME,
Key: req.body.fileName
}, (error, url) => {
if (error) {
res.status(403).json({
err
})
} else {
res.status(200).json({
url
})
}
})
}
Frontend
User.downloadFile(fileName) // HTTP request was made in another file using axios
.then((res) => {
window.open(res.data.url)
})
Any advice is highly appreciated.
You need to set contentType of the image to the correct one while uploading the image to s3. like, set contentType to image/png if your image has .png format. If the contentType is not correct or not set then the image will be directly downloaded instead of displaying it in the browser. This should solve your problem.

Frontend conditionally open download dialog or display error

Given the following expressjs server code which conditionally responses to the same entry point, I want to display error message or open download dialog based on server's response. It possible and if so, what i s a recommended way to do it?
app.get('/download', (req, res) => {
if (conditionA) {
return res.status(403).send({err: 'Message I want to display with frontend JS'});
} else {
return res.sendFile('file I want to send');
}
});

Avoid 'Remote request only' error Message when Node Server access domain

Using Node.js, I am trying to send a GET request to server and I've used the following code for that.
const https = require('https');
https.get('https://example-domain-name/', (resp) => {
let data = '';
// A chunk of data has been recieved.
resp.on('data', (chunk) => {
data += chunk;
});
// The whole response has been received. Print out the result.
resp.on('end', () => {
console.log(data);
});
}).on("error", (err) => {
console.log("Error: " + err.message);
});
The problem is that, the server is responding statusCode 500 (Runtime error).
An application error occurred on the server. The current custom error
settings for this application prevent the details of the application
error from being viewed remotely (for security reasons). It could,
however, be viewed by browsers running on the local server machine.
But browser is displaying the page normally, but using node js request, i get the something following response data(text).
How to avoid this and normally request and response data like browser using node.js?
Please Help... StackOverFlow is only my basis of help now!!

Node js serve file body from server and download in browser

I have a file repository and when i call it from the browser it automatically downloads the file and this is fine.
But i want to do this request on my server, and then serve the file result to the browser. Here is the example of the get request from my server.
downloadFile(req , res , next) {
let options = {
url: 'url to my file repo',
};
request(options, function (err, resp, body) {
if (err) {
res.status(500).send("");
return
}
for (const header in resp.headers) {
if (resp.headers.hasOwnProperty(header)) {
res.setHeader(header, resp.headers[header]);
}
}
resp.pipe(res);
})
}
The request is working fine, and when i access my server from the browser it starts downloading the file. Everything seems to work fine except one thing, the file can't be opened. This file format can't be opened, says me the image player (if the file is image for example).
Where is the problem, Is it the way i serve the file from the server?
Thank you in advance. I lost a lot of time and can't find the solution.
Because what you probably want to send is the body of the request (e.g. the data of your image).
So instead of resp.pipe(res):
res.send(body)
Use the developer mode of your browser to check the network messages passing between the server and your browser.

Electron Intercept file:/// protocol to read inside zip files

I would like to read inside zip archives with Electron as if they were folders, like so /myfolder/myarchive.zip/picture.jpg. To do this I'm thinking about intercepting the file protocol
protocol.interceptFileProtocol('file', (request, callback) => {
if (insideZipArchive) {
//respond with zip file contents
} else {
//defaultBehavior
}
}, (error) => {
if (error) console.error('Failed to register protocol')
})
How do I invoke the default behavior? Also doing an AJAX request inside the interceptor and serving files like this callback({data: new Buffer(xhr.responseText)})does not seem to work.
It looks like this could be solved with a service worker, as shown here:
How to intercept all http requests including form submits

Categories

Resources