Read internal excel file using React - reactjs

I have an excel file stored in src folder. I want to use react to read the excel file directly instead of uploading a file using input field and show the object array to the console, does anyone know how to do it? Any reference link about that? I saw a lot about uploading an excel file and output the data, but I don't want to upload the file. I want to import the file directly or fetch data from the file. Let me know if you know how to do in react. Thanks.

You could use FileReader API. Here's a link to similar question. You could parse/read the excel file using this package.
A little suggestion, would be to use .csv or .json files instead of .xlsx files, if you are only dealing in data.

fetch(excelFile).then((res) => res.arrayBuffer())
.then((ab) => {
const wb = XLSX.read(ab, { type: "array" });
const sheetname = wb.SheetNames[0]
const ws = wb.Sheets[sheetname]
const json = XLSX.utils.sheet_to_json(ws,{header: 1,defval:''})
console.log(json)
Here excelFile is file location, you may include your excel file location, Then json contain excel data.
Thanks.

Related

how to read the contents of a json file returned from s3 storage as a blob in React

I have successfully retrieved a json file from s3 storage. It is returned as a blob. I am able to turn the blob into text with this code (taken from https://docs.amplify.aws/lib/storage/download/q/platform/js/#monitor-progress-of-download):
export async function getS3Item(filename)
{
const result = await Storage.get(filename, { download: true });\
result.Body.text().then(string => {
// // handle the String data return String
console.log(string)
});
}
but the text is all gibberish (I'm assuming since object is in binary?)... such as: "h�b```f�d`a}��ǀ|#1V ..."
Is there a way I can directly read this as a json object in javascript so that I can extract data from it...?
Optionally, I can download the json file (which is shown in the link above and I've gotten this to work) -- but I'd prefer not to download it -- just to extract legible data from the file
thanks so much (I'm quite unfamiliar with blobs).

Is it possible to load webdatarocks data source from CSV string not CSV file?

I'm using React webdatarocks pivot table to display data source from remote REST services, the data format is CSV string, I can load json data as data source no problem but when I try csv data it won't work, anyone have similar experience or get solution to solve this ?
There’s no way to load CSV data as a string in the component. You can only load it using a physical CSV file or write your own script to return CSV. Here you can see an example of adding data by specifying the URL to your file or script:
var pivot = new WebDataRocks({
container: "#wdr-component",
toolbar: true,
report: {
dataSource: {
// filename: "URL-to-your-CSV-file"
filename: "URL-to-your-script-that-returns-CSV"
}
}
});

Antd Upload change data based off file

I'm using antd upload, and I would like to change the upload data dynamically depending on the file name. Currently, this works fine for single file uploads, see below:
function MyUpload() {
const [fileName, setFileName] = useState();
return (
<Upload
action='...'
uploadType='...'
data={{
fileName: fileName
}}
beforeUpload={(file: File, _) => setFileName(file.name)}
directory={false}
>
);
}
The problem occurs when I try creating a directory upload field. If I change directory to true above, then beforeUpload is called several times for each file, but the only fileName set is that of the last file processed. Therefore, all the different files will have the upload data of the last file processed.
I was wondering if there was a way to use this approach or perhaps a better approach to set values in the data property that reflect the current file being uploaded, in a dynamic way.
Thanks in advance

json file doesn't show up in godot

I'm making a dating sim as my first game and I want to use a JSON file to store all of my dialogue, sprites and B.G.M. kind of like a A.P.I; but the file I wrote won't appear in the godot filesystem section.
I can't get the file path without it, is there a way for it to appear or should I just give up.
Try using the File API and read the data into the variable. Like so:
var data ={}
var path = "res://data.json"
func _ready():
var jsonfile = File.new()
jsonfile.open(path, File.READ)
data = parse_json(jsonfile.get_as_text())
print(data)
pass
Also you can install JSON Editor asset from Godot marketplace - https://godotengine.org/asset-library/asset/656

get file type of uploaded file when FileReaderService is used in html5

I am trying to detect file type of uploaded document. For this I have created an instance of "FileReaderService". I am doing something like this:
var reader = FileReaderService.createReaderInstance(),
fileData = angular.copy(newFile);
reader.onload = function (event) {
scope.loaded(event, scope.files[index]);
}.bind(scope);
fileData.file = file;
fileData.fileType = scope.fileType(fileData);
This is working fine for pdf and images but when it comes to docx, sheet and pptx. this is not working fine
Pleas help me out with this.
I have resolved it. The place where I am comparing file type I have done a mistake there:
earlier doc was used in now docx is used.
Now file type of docx, pptx and styles is following:
sheet: vnd.openxmlformats-officedocument.spreadsheetml.sheet
docx: vnd.openxmlformats-officedocument.wordprocessingml.document
pptx: vnd.openxmlformats-officedocument.presentationml.presentation

Resources