Downloading multiple files into a Zip file Javascript using data URI - javascript

I am using EXT JS 4.2 which has a panel which contains a export to CSV button.
On clicking on it multiple (total six) files are downloaded. I want these files to be downloaded in a single ZIP file.

There is a perfect plugin to create zip files inside browser.
JSZip: https://stuk.github.io/jszip/
Install the plugin by adding js files manually:
download JSZip and include the file dist/jszip.js or
dist/jszip.min.js
JSFiddle - JSZip 3.0:
https://jsfiddle.net/andrebonna/u8zsbzau/
var zip = new JSZip();
for (var i = 0; i < 5; i++) {
var CSV = 'CSV_content';
// Fill CSV variable
zip.file("file" + i + ".csv", CSV);
}
zip.generateAsync({
type: "base64"
}).then(function(content) {
window.location.href = "data:application/zip;base64," + content;
});

Related

Read, edit the data and download multiple files in pure JavaScript

Firstly, I allow users to upload multiple files. Then I use loop with fileReader to read all the uploaded files. Next I edit some data of each file and create new files contain each data. Finally, I want to download all of these files using fileSaver library. The problem is that I can only download the last file with the below code. I would be very grateful if someone can fix it.
Code:
<html>
<body>
<!-- Link to FileSaver Library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js" integrity="sha512-Qlv6VSKh1gDKGoJbnyA5RMXYcvnpIqhO++MhIM2fStMcGT9i2T//tSwYFlcyoRRDcDZ+TYHpH8azBBCyhpSeqw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- Allow users to upload multiple files -->
<input type="file" id="real-file" accept=".xml" multiple/>
<script>
const realFileBtn = document.getElementById("real-file")
realFileBtn.addEventListener("change", function() {
if (realFileBtn.value) {
// Use loop to do for all uploaded files
for(var i = 0; i < realFileBtn.files.length; i++){
var fr = new FileReader()
var fileName = realFileBtn.files[i].name
fr.readAsText(realFileBtn.files[i])
fr.onload = function() {
// After loading the file, I get the data of it and edit some information (for example: replace "a" with "b")
var data = fr.result.replaceAll("a", "b")
// I create a new file that contain the edited data with the same name as the uploaded file
var myFile = new File(
[data],
fileName,
{type: "text/xml; charset = utf8"})
// Then I download that file
saveAs(myFile)
// The issue is that I can only download 1 file and that file is the last file you uploaded
// I want to read the first file, edit its data and download the file contain that data. Then do the same with second file,
// third file,... n file
}
}
}
})
</script>
</body>

Name .zip file created by JSZip

I am using JSZip and I am creating a .zip file with several .xml files inside it as shown below:
// get each xml in string format and add it to zip object
let zip = new JSZip();
for(let i = 0; i < containers.length; i++){
let xml = getXML(i);
zip.file("file"+i+".xml", xml);
}
// download the .zip file
zip.generateAsync({
type: "base64"
}).then(function(content) {
window.location.href = "data:application/zip;base64," + content;
});
The .zip file is created and downloaded perfectly but the name of the file is the default "download file". What i want to do is give a name to this file at will (for example allXMLs.zip).
I looked at the JSZip documentation but I did not find anything really enlightening, any help would be greatly appreciated.
You could create an anchor tag with a 'download' attribute that would allow you some control over the filename.
zip.generateAsync({
type: "base64"
}).then(function(content) {
var link = document.createElement('a');
link.href = "data:application/zip;base64," + content;
link.download = "your-file-name.zip";
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
});
In the documentation, it suggests an additional library called [FileSaver.js].1 See here for the example given in the projects How To.

How do I save a text file using an InDesign script?

I'm extracting some data from an InDesign INDD file using a script. I'd like to save my data in a txt or json file, but my file is not saving successfully.
var data = 'string of data';
var filename = 'CS111.json';
var file = new File(filename);
var path = file.saveDlg(); //returns a valid path, but with spaces as '%20'
file.changePath(path);
var write = file.write(data); //returns false
file.close();
What am I missing here? The file doesn't show up in the chosen folder.
There are at least four steps in saving a file using InDesign Javascript: get a path and filename, create a file object, open the file, write to the file, and close the file.
I find that the write step will sometimes fail if I don't set the encoding.
//Define path and file name
var path = '~/Documents/';
var filename = 'filename.txt';
//Create File object
var file = new File(path + filename);
file.encoding = 'UTF-8';
file.open('w');
file.write('data here');
file.close();
Documentation: File class, .open(), .write()

e.target.download does not renamed Downloaded File

Problem: When I tried the following code in Meteor.js, the file is downloaded by Chrome as download (1) without any file extension.
Is e.target.download = "data.csv" supposed to both trigger the download of the file and rename it to "data.csv"? The naming of the file does not seem to work when using e.target.download
client/views/results.js
Template.results.events({
'click #downloadCsv': function (e) {
var csv = json2csv(data, false, true)
e.target.href = "data:text/csv;charset=utf-8," + escape(csv)
e.target.download = "data.csv";
}
})
Code snippet taken from https://github.com/axwaxw/json2csv/

How to access audio fle and upload to server in phonegap

i have one query like i want access to all audio file in phone gap ios and want to upload to server, so any one know how to do get all mp3 files and get upload.
we should need to create a plugin for that .
I don't think you require to create a new plugin. The existing File and File Transfer API should work in your case unless you have more requirements other than the ones stated here.
Use the file API to iterate over all the files in the app.
function success(entries) {
var i;
for (i=0; i<entries.length; i++) {
console.log(entries[i].name);
//Check if the file is in mp3 format. If it is in mp3 format, trigger file upload.
}
}
function fail(error) {
alert("Failed to list directory contents: " + error.code);
}
// Get a directory reader
var directoryReader = dirEntry.createReader();
// Get a list of all the entries in the directory
directoryReader.readEntries(success,fail);
Then use the file upload API to upload the files to the server.
var ft = new FileTransfer();
ft.upload(fileURI, encodeURI("http://some.server.com/upload.php"), win, fail, options);

Categories

Resources