I am trying to download a zipfile that my webapp receives my backend in javascript.
I am using the file-saver library, just because I use it in another part of the app, but I would also be ok, doing it with vanilla js (creating a blob, attaching it to hidden a element...). I tried out all I could find on the web about it, but it still doesn't work.
The file is downloaded, but it cannot be opened, my archive manager just says there is an error...
However, I know that the file coming from the server is ok. When test the endpoint of the api, that delivers the file, in swagger I can download and open the file normally.
if (response.headers["content-type"] === "application/zip") {
const filename = response.headers['Content-Disposition'].match(/filename="(.+)"/)[1]
FileSaver.saveAs(new Blob([response.data], {type: "application/zip"}), filename)
}
If anyone has any tip, on how I could go about debugging this, I would be very thankful :)
Related
On my django server side, I have a file that downloads some files from s3 and then zips them together. I then want to send that zip file to the client side and download it on client side. However, when ever I try to open the zip file on the client side I get a An error occurred while loading the archive
I am running on Ubuntu 14.04 with a django backend and a react frontend. I tried passing the file as a tar file, but that didn't work either. I have also tried many different ways of passing the zip file to the HTResponse, but I always get the same error. Right now to try to make it work, I am just trying to download a zip file I have downloaded on my local computer.
I have tried a bunch of different content_types from application/zip, to octet/stream and force download.
django backend
zip_path = '/home/konstantin/Downloads/sup.zip'
content_path = mime.guess_type(zip_path)
with open(zip_path, 'rb') as zip_file:
response = HttpResponse(zip_file, content_type='application/zip')
response['Content-Length'] = str(os.stat(zip_path).st_size)
response['Content-Disposition'] = 'attachment; filename={}'.format('willthiswork.zip')
return response
react front end (we have a program that changes python to js). The response of the ajax call is passed directly into this method.
def download(self,url):
data = __new__(Blob([url], {"type": "octet/stream"}))
csvURL = window.URL.createObjectURL(data)
tempLink = document.createElement('a')
tempLink.href = csvURL
tempLink.download = 'willthiswork.zip'
tempLink.click()
Expected result: Zip file downloads on client side and is openable
Actual result: Zip file downloads, but cannot be opened.
so I finally figure it out. For some reason all the standard solutions of just passing an a regular httpresponse did not work for me, but this answer worked for me. Why? Idk. but it did.
https://stackoverflow.com/a/29939024/11312013
I want to create a vCard in the frontend and to make it downloadable (by clicking a button) in a ReactJs Project. I use a NodeJS module called vcards-js that creates a string with the content of the desired vCard (v3.0). The thing I am struggling with is to make it downloadable (as .vcf file). I have tried to achieve this with the modules react-file-download and file-saver but none of them worked properly. Last one worked fine on desktop, but did not manage to provide a download from mobile browsers. Chrome mobile opened a new tab and loaded forever, Safari mobile just opened the string in a new tap, but did not download it as a .vcf file.
Any clues or experiences? Do I need to create the vCard Server-side and provide a download link? Seems too circuitous to me.
If it helps, this is my file-saver approach:
var FileSaver = require('file-saver');
var blob = new Blob([card.getFormattedString()], {type: "text/x-vCard;charset=iso-8859-1"});
FileSaver.saveAs(blob, 'card.vcf');
I'm looking over the docs on vcardjs
https://github.com/enesser/vCards-js
you have to have a route on your backend on node to handle the process
It looks pretty intuitive
//save to file
vCard.saveToFile('./eric-nesser.vcf');
I was able to get this to work on vue.js by generating a vcf blob using the following code
var vcfBlob = new Blob(vcfBytes.split('\n').map(function(x) { return x + '\n' }));
and then passing that blob to a file saver
saveAs(vcfBlob, "hello world.vcf")
You might want to try generating it on the back-end, using NodeJS / TS package:
npm/ez-vcard; GitHub/Maxim-Mazurok/ez-vcard
Also, see readme and example for usage.
I have a database with text files, images, etc. Now I want to preview them in another process(not part of the upload page or proceess). What tool could/would I use for this, and/or how?
In my research I have found a list of libraries, but I cant see how the libraries can be used to open/preview the file directly from the database(with out downloading the file).
I am working on a web application using pyramid(python).
In my research, I found:
shelve
webbrowser
In the above mentioned libs, as far as I can understand, the file has to be local, i.e. on the computer or device you are using or is there a way to use these libs?.
I have also looked at possible JavaScript or jQuery packages to do this, though the only packages I can find is to deal with uploading.
I have code to download the file:
#view_config(name="get_compliance_document", permission="compliance_admin")
def compliance_document(self, rid=None, filename=None):
doc_id = self.request.subpath[0]
if doc_id and ComplianceDocument.by_id(doc_id):
compliance_file_id = ComplianceDocument.by_id(
doc_id).document_file_id
compliance_file = Files.by_id(compliance_file_id)
f = StringIO.StringIO(compliance_file.data)
return Response(
content_type=str(compliance_file.type),
content_disposition="attachment; filename=" +
str(compliance_file.name),
content_length=compliance_file.size,
app_iter=FileIter(f, compliance_file.size)
)
raise HTTPNotFound()
Is there perhaps a way I can use Response to preview the file?
All suggestions welcome.
I want to download file from external server but after renaming it. Let's say http://playtictactoe.atwebpages.com/logo.png is an image file I want to download. I have used the following HTML:
<a href="http://playtictactoe.atwebpages.com/logo.png" download="myName.png">
Download File
</a>
But this doesn't rename the file. I've read somewhere that this is because of Response Header on server. Is there any way to ignore Response Header on client side? Else guide me any other solution.
You can download the file as a buffer and resave with the file api like descriped here:
HTML5 File API downloading file from server and saving it in sandbox
Or lookup FileAPI and XMLRequest to Buffer. You download the file as binaryBuffer save it with fileAPI and rename it. This should also work in Firefox. But this is not the simple solution you are searching for. Even though it works ;-)
You can then rename the file like you want.
Cheers
i am using PDFJS to render PDFs files using their URL after scanning the current page a js snipet return the urls. then it passes them to pdfJS. until now everything works the problem show when the PDF is already open in the browser . i take the URL (*.pdf) and pass it the same way as before the difference is that the file is not downloaded and i have this response.
Warning: Unhandled rejection: Unexpected server response (0) while retrieving PDF "http://geekographie.maieul.net/IMG/pdf/progit.fr.pdf".
(just for the record i dont have CORS issues).
Try this "http://mozilla.github.io/pdf.js/"
Installation
download and unzip file.
put "PDF" file in this folder.
config in "viwer.js", edit var DEFAULT_URL.
upload folder to server.
Have fun!