Javascript create zip file - javascript

I am developing a website using react.js and admin-on-rest. One feature is allowing users to upload a pdf file.
I get the file as type FILE and want to get the file from FILE, compress it to zip, and then make it to type FILE.
So it should be FILE -> origin file -> zip file -> FILE from zip file.
I tried JSZip but still can not figure it out.
Any help is appreciated. Thanks

You can use JSZIP.
**use npm to install JSZIP
let zip = require('jszip')();
//hoping you have already taken input
let input = document.getElementById('fileInput'); // fileInput is id of my input element
let file = input.files[0];
let allZip = zip.file(file.name, file);
console.log(allZip)

Hi Garrick following are the steps you need to take.
1) handle fileupload in a rest wrapper
https://marmelab.com/admin-on-rest/RestClients.html#decorating-your-rest-client-example-of-file-upload
the above example is for image upload. But you will essentially be doing the same thing.
2)
const addUploadCapabilities = requestHandler => (type, resource, params) => {
if (type === 'UPDATE' && resource === 'posts') {
//use jszip to zip file here and package it however you need
// call the API with zipped file
} return requestHandler(type, resource, params);
};

There is a small app called jszip for this. Try, it would help. https://stuk.github.io/jszip/

Related

Pdf file not created using react-native-html-to-pdf

I am using React Native v0.67.2 and looking to generate PDF from HTML using react-native-html-to-pdf. This is the function I use to generate the PDF, but the location of generated Pdf isn't showing in the iOS file manager.
const createPDF = async () => {
let options = {
html: '<h1>PDF TEST</h1>',
fileName: 'testFile',
directory: 'Documents',
};
let file = await RNHTMLtoPDF.convert(options);
// console.log(file.filePath);
alert(file.filePath);
}
The file exists in an unknown location, but I'm expecting the downloaded PDF file in the 'Documents' directory of iPhone Files. How do I move the PDF to this location and resolve this issue?
Thank you in advance.
Duplicate of:
pdf created by react native html to pdf is not showing in provided path
On IOS you can only use that Documents path that you already have.
You cannot make it save anywhere else.
Directory where the file will be created (Documents folder in example above). Please note, on iOS Documents is the only custom value that is accepted.
Ref: https://github.com/christopherdro/react-native-html-to-pdf#options

modify a zip file in react/javascript

I wanted to allow user to modify a zip file which they uploaded and then submit it to the server. My UI is made using react js and I am using JsZip library to do it.
var zip = new JSZip();
let myZip = null;
zip.loadAsync(f).then( zipFile => {
Object.keys(zipFile.files).forEach(filename => {
zip.file(filename, text);
myZip = zipFile.generateAsync({type : "string"}).then(function (blob) {
myZip = new File([blob], "hello.zip");
});
;
})
});
Note:The zip has just one file at entry level. Rest are inside a folder.
Problem is that I am unable to create the final zip using generateAsync function. The myZip object is null.
Any help is appreciated. Thanks.
Thanks for the help. I solved it by changing the type from string to blob in the generateAsync function.The documentation was a bit unclear about the list of possible "type" and their uses. Instead of creating a string then a File object out of it, this allowed me to directly create a blob and use it in my POST request.

Edit a file to be uploaded

I would like to be able to edit a file that has been selected for upload. I want to search and replace text in case absolute files should be made relative...
I notice in the File API I can do some of it, but I get a little stuck:
document.getElementById('exampleInputFile').onchange = function(event) {
var fileToLoad = event.target.files[0];
if (fileToLoad) {
var reader = new FileReader();
reader.onload = function(fileLoadedEvent) {
var textFromFileLoaded = fileLoadedEvent.target.result;
//Use logic to remove absolute files
//Upload S3
};
reader.readAsText(fileToLoad, 'UTF-8');
}
};
I am trying to figure out how now to convert that text to a proper File so that I can upload it to S3 using an existing api that expects something returned by: event.target.files[0] code above.
I do not want the server to handle any heavy lifting here if I can avoid it (files can easily be a few megabytes since they can be 3D models).
Assuming you know the url of the file when it lands in the S3 bucket, you can retrieve the file using a http.get, which will give you the contents of the (I assume plain text file). You can then parse that file and do whatever modification you need to do on the contents. If the file has changed, you can then write it back to the S3 bucket to replace the original file.
On AWS you can use Lambda to execute NodeJS code when an event is triggered (for example an upload to a specified bucket).

Generate pdf files with Weasyprint, save in zip file, send that zip file to client and present it for download

Let me break down my requirement. Here's what I'm doing right now.
1. Generate PDF files from HTML
for this I'm using Weasyprint as following:
lstFileNames = []
for i, content in enumerate(lstHtmlContent):
repName = 'report'+ str(uuid.uuid4()) + '.pdf'
lstFileNames.append("D:/Python/Workspace/" + repName)
HTML(string=content).write_pdf(target=repName,
stylesheets=[CSS(filename='/css/bootstrap.css')])
all files names, with paths, are saved in lstFileNames.
2. Create a zip file with pdf files generated by weasyprint
for this I'm using zipfile
zipPath = 'reportDir' + str(uuid.uuid4()) + '.zip'
myzip = zipfile.ZipFile(zipPath, 'w')
with myzip:
for f in lstFileNames:
myzip.write(f)
3. Send zip file to client for download
resp = HttpResponse(myzip, content_type = "application/x-zip-compressed")
resp['Content-Disposition'] = 'attachment; filename=%s' % 'myzip.zip'
4. Open file for downloading via Javascript
var file = new Blob([response], {type: 'application/x-zip-compressed'});
var fileURL = URL.createObjectURL(file);
window.open(fileURL);
Problems
1. While the zip file is successfully received at front end, after I try to open it, it gives the following error:
The archive is in either unknown format or damaged
Am I sending the file wrong or is my Javascript code the problem?
2. Is there a way to store all pdf files in list of byte arrays and generate zip files with those byte array and send it to the client? I tried that with weasyprint but the result was same damaged file.
3. Not exactly a problem but I haven't been able to find it in weasyprint docs. Can I enforce the path to where the file should be saved?
Problem # 1 is of extreme priority, rest are secondary. I would like to know if I'm doing it right i.e. generating pdf files and sending their zip file to client.
Thanks in advance.
A slightly different approach would be to move the zip file to a public directory and then send that location to the client (e.g. json formatted), i.e.:
publicPath = os.path.join('public/', os.path.basename(zipPath))
os.rename(zipPath, os.path.join('/var/www/', publicPath))
jsonResp = '{ "zip-location": "' + publicPath + '" }'
resp = HttpResponse(jsonResp, content_type = 'application/json');
Then in your client's javascript:
var res = JSON.parse(response);
var zipFileUrl = '/' + res['zip-location'];
window.open(zipFileUrl, '_blank');
'/' + res['zip-location'] assumes that your page lives in the same folder as the public directory (so http://example.com/public/pdf-files-123.zip points to /var/www/public/pdf-files-123.zip on your file system).
You can clean up the public directory with a cron job that deletes all the .zip files in there that are older than an hour or so.
Once you have exited the with block the filehandle is closed. You should reopen the file (this time with open) and use read() to pass the contents to HttpResponse instead of passing the filehandle itself.
with zipfile.ZipFile(zipPath, 'w') as myzip
for f in lstFileNames:
myzip.write(f)
with open(zipPath, 'r') as myzip:
return HttpResponse(myzip.read(), content_type = "application/x-zip-compressed")
If that works, then you can use a StringIO instance instead of a filehandle to store the zip file. I'm not familiar with Weasyprint so I don't know whether you can use StringIO for that.

Compress dcm files with JSZip

im currently working on a dicom file upload system that uploads .dcm files with jquery file uploader. It is working fine but as DICOM data-sets can get very large i want to compress the files with JSZip before the upload.
Simply i am passing the file object to a zip function that returns the zipped file object. This is working fine with commonly known files but not with DICOM files. I've already tried to encode the files to base64 string before zipping but that doesn't work either.
JSZip always throws me the following error:
Uncaught Error: The data of 'IM-0001-0001.dcm' is in an unsupported format !
I am using the following file compress function:
compressFile: function(data) {
var zip = new JSZip();
var file = data.files[0];
zip.file(file.name, file, {binary:false});
content = zip.generate({
compression: 'DEFLATE'
});
return content;
}
I have also tried with base64 and binary in the .file options but that didn't made the trick.
Has anyone a clue on how to get that working? Im a beginner to JS so im sorry for noobish questions ^^
Kind Regards
You need to use a FileReader to read the content of data.files[0] first:
var reader = new FileReader();
reader.onload = (function(e) {
var zip = new JSZip(e.target.result);
var result = zip.generate({
compression: 'DEFLATE'
});
// do something with result
}
reader.readAsArrayBuffer(data.files[0]);
See also this example.
Warning, FileReader is asynchronous: you can't make your function returns the result.

Categories

Resources