How to update zip file with XML content - javascript

Overview
I am using JSZip which allows you to create and update zip files using JavaScript. I would like to update some of the contents of the zip file with other files. However the examples in the documentation only show how to use strings.
In my situation I have an XML file and I want to overwrite another XML file within the Zip file. According to the documentation the file() method supports multiple types:
file(name, data [,options])
String/ArrayBuffer/Uint8Array/Buffer/Blob/Promise/Nodejs stream
Question
I have access to my zip file and my XML file is local as it will be built pro-grammatically. How can I go about using this method to overwrite files with XML files. I also expect the need to overwrite images as well but I also didn't see examples of this either.
Documentation - https://stuk.github.io/jszip/
If I do an import of the XML:
import testXML from '../testXML';
This will not work as when I console log this, I get:
static/media/testXML.dd632dc5.xml
Note: I am using React for the frontend if this matters.

Related

Search through files in path using only javascript

I'm coding a webpage that needs to read some data from different csv on a path depending on the country of the user.
the path is something like this:
./csv/m2-2022-10-25_13_45_55_es.csv
m2-2022-10-25_13_45_56_fr.csv
m2-2022-10-25_13_46_04_it.csv
etc
And those files will be replaced regularly, the only that we'll always have is the country code (es, fr, it, etc).
So, what I need is to list all the files on the path to an array, and loop through the array to find if the last characters of the filename are $countryCode + ".csv", and there run some code.
But I can't find how, all the solutions I find are using Node.js, but are there a solution using only Javascript (or jQuery)?
Regards!
You cannot use pure Javascript to do that, because if you wanted to search files in your computer only using javascript, it would be a huge security breach.
You must use node.js to open files but you can make an API to your nodejs file from your javascript and you can send as a response the content of your file.
Here some links that might help you :
FS : https://nodejs.org/api/fs.html
NodeJS api : https://medium.com/swlh/how-to-create-a-simple-restful-api-in-node-js-ae4bfddea158
You can check a similar question here:
Get list of filenames in folder with Javascript
You can't access to filesystem from the frontend, this it would be a huge security breach, because anyone could access to your filesystem tree.
You have to do a function in backend to build the array you want and send it to frontend.
If you create a function in backend file that returns the array of files in the folder, you can call it from the frontend via XMLHttpRequest or Fetch to get the array in frontend and be able to use in your js file.

Export custom file to disk via Excel Add-in?

I'm new to Excel Web Add-Ins and want to figure out if it's possible to make an add-in that can export a custom file.
I've looked around and all I find are Excel specific commands like Workbook.SaveAs() but I can't find anything on making custom export functions. I need to convert the file into XML but a specific XML setup and so, I could just work the data before I save it to XML. But again, can't find much of anything to suggest that this is supported.
How would I go about writing a file to disk from Excel that isn't just the Workbook?
There's no such API to support exporting custom file to disk. It seems we can have workaround to do this work, this workaround just works for excel online.
Please see this link:
How to create a file in memory for user to download, but not through server?
The closest thing there is for what you want to do is:
Office.context.document.getFileAsync(Office.FileType.Compressed, (result) => {
const file = result.value;
// do whatever ...
});
The file variable in this case contains the entire document in Office Open XML (OOXML) format as a byte array.

Javascript to read Text File to Array without a Webserver or external libraries local on Windows PC

I have an HTML file with JavaScript that I am running without any Webserver/host so I am just opening the file in a browser local to my windows PC. In that HTML file I would like to be able to read a text file in the same folder as the html file. That file will contain data in rows and columns separated with tabs. i.e
1 a
2 b
3 c
I want to keep this as simple as possible so all I have to do is share the HTML and Text file to others so the can open it up local to their computer without any webserver/host and without having to also copy of external libraries like node.js or jquery.
I have searched and tested everything I can find but either I need to reference an external library or I have to run it in a webserver or I need to click a button to load the file through the browser, none of what I want.
Does native JavaScript support the function to read a text file and save it to an array? If so, any code direction would be great.
https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
XMLHttpRequest() exists in native JavaScript, I think it will help you.
You also can send a request to the file. Or use library: axios.js because when you use XMLHttpRequest() you lose many time to write code which just get content from file, with axios I got file content with one line: `axios.get('file.txt').then(result => console.log(result.data));
To connect Axios: <script src="https://unpkg.com/axios#0.18.0/dist/axios.min.js"></script>
You can read official documentation about axios.js and XMLHttpRequest() in the net.

How to load large list of JSON files from local directory into react app

I have been given 100+ JSON files which I need to display locally in a react app. I'm able to load one file at a time using the fetch() function, but I'm not sure how to load all of the files.
I've considered getting a list of all of the files and then doing a fetch() on the list, but the issue is that I cannot access the list of files in the directory.
I read that I could use fs but it seems like that won't work in the browser. ex: I've tried:
var fs = require('fs');
var files = fs.readdirSync('../app/components/data/');
but this throws the error: fs.readdirSync is not a function. I'm open to different approaches.
If the files are small, one option would be to merge them all into one large JSON array in one file and fetch() that. If you don't mind load times taking a bit of a hit, you could even import or require() the JSON file from your application code, including its contents in your JS bundle.
However, if the files are big, you're probably better off creating a 'manifest' file which describes the contents and locations of the other files. It wouldn't be too hard to write a script to store all the files in that directory in an array in an index.json. From there, you could fetch() the index from the browser, and then fetch() each file individually.

Getting CSV Columns' name using JavaScript

I must upload large files (+1GB) in CSV format. I must check the column names, and I want to do it before upload process. So, I am trying to read the CSV using JavaScript, following
http://www.html5rocks.com/en/tutorials/file/dndfiles/
and
https://developer.mozilla.org/en-US/docs/Web/API/FileReader.readAsBinaryString
It work! But I have to read the complete file, and believe me, the files are too large.
My question is: How can I get the CSV columns' name using JavaScript, without reading the entire file?
You can access all kinds of data about a file without passing it to a FileReader. You can get the size of a file by checking file.size.
Check the documentation for File and Blob (File inherits Blob) to see what else is available to you.

Categories

Resources