Read excel that is in the src folder of React app - reactjs

I have creates a react app using react CLI.
I have now created a folder called data now I want to read that data using the xlsx npm package. However, it is not working. I think it may have something to do with the way I may be referring to the excel file because I get a warning as "Property 'Sheets' does not exist on type 'string'" (Pic below)
I thought it would be easy to read an excel (that too a local one), but I am not able to figure it out. Can anyone help? I looked at a lot of SO questions related to this but no success.
My Code
import "./App.css";
import XLSX from "xlsx";
let fileName = "./data/menu.xlsx";
var first_worksheet = fileName.Sheets[fileName.SheetNames[0]];
var data = XLSX.utils.sheet_to_json(first_worksheet, { header: 1 });
console.log(fileName);

Your fileName is just a string with your path right now. You're not actually parsing it as an Excel sheet yet, so the property Sheets will not exist on it.
You need to actually read the file from the filesystem, and then use XLSX to parse it into a format you can use to programmatically interact with it. Since you're using react, you can look at the react examples in the XLSX repo for an idea of how to go about it. The included demos only cover react-native apps, however, so you may also want to start looking into ways to retrieve and parse files on the local filesystem from the browser, like FileReader and fetch. Then, once you have the file loaded into memory, you can call XLSX.read(file) to fully interpret it as an Excel worksheet.

I found the answer to my question in here Excel to JSON javascript code?
The answer that was useful for me was the answer from user7456320 (the code is copied below as well).
All that was needed was the XLSX library. I used the code below with useEffect hook in my react component to run once when the page loads.
<!doctype html>
<html>
<head>
<title>Excel to JSON Demo</title>
<script src="xlsx.full.min.js"></script>
</head>
<body>
<script>
/* set up XMLHttpRequest */
var url = "http://myclassbook.org/wp-content/uploads/2017/12/Test.xlsx";
var oReq = new XMLHttpRequest();
oReq.open("GET", url, true);
oReq.responseType = "arraybuffer";
oReq.onload = function(e) {
var arraybuffer = oReq.response;
/* convert data to binary string */
var data = new Uint8Array(arraybuffer);
var arr = new Array();
for (var i = 0; i != data.length; ++i) arr[i] = String.fromCharCode(data[i]);
var bstr = arr.join("");
/* Call XLSX */
var workbook = XLSX.read(bstr, {
type: "binary"
});
/* DO SOMETHING WITH workbook HERE */
var first_sheet_name = workbook.SheetNames[0];
/* Get worksheet */
var worksheet = workbook.Sheets[first_sheet_name];
console.log(XLSX.utils.sheet_to_json(worksheet, {
raw: true
}));
}
oReq.send();
</script>
</body>
</html>

Related

Cannot add Firebase library to Apps Script

I want to sync a Google Sheet with my Firebase real-time database.
My code is:
function writeDataToFirebase() {
var ss =
SpreadsheetApp.openById("18AU9ZP9UHs9lvIeTA0SyJv6tcHPe7ux0tLopkRAz1T0");
var sheet = ss.getSheets()[0];
var data = sheet.getDataRange().getValues();
var dataToImport = {};
for(var i = 2; i < data.length; i++) {
var date = data[i][1];
dataToImport[date] = {
niftyclose:data[i][2],
sensexclose:data[i][5]
};
}
var firebaseUrl = "<MY database URL>"; //Yes I have entered the URL in my actual code
var base = FirebaseApp.getDatabaseByUrl(firebaseUrl);
base.setData("", dataToImport);
}
But when I run the script, I get this error:
ReferenceError: FirebaseApp is not defined
I tried adding the Firebase Library and got this error:
Firebase Library Error
Can someone help me figure this out?
Thanks in advance.
I think that MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l is the project key. In this case, it can be used for the legacy editor. But, in the current stage, the script ID is used for installing the GAS library. And also, when you use new script editor, it is required to use the script ID for installing the library. I thought that this is the reason of your issue.
When the project key of MYeP8ZEEt1ylVDxS7uyg9plDOcoke7-2l is installed using the the legacy editor and check appsscript.json, the script ID of the library can be known. It's 1hguuh4Zx72XVC1Zldm_vTtcUUKUA6iBUOoGnJUWLfqDWx5WlOJHqYkrt. So please modify your situation as follows.
1hguuh4Zx72XVC1Zldm_vTtcUUKUA6iBUOoGnJUWLfqDWx5WlOJHqYkrt
Please install the library using above script ID. This script ID can be also seen at https://sites.google.com/site/scriptsexamples/new-connectors-to-google-services/firebase/source
References:
Libraries
Firebase

How to import photos from a backend image folder with MongoDB into React?

So, I have an images folder with PNG images I would like to show on the page. The image routes are in the Seed file I have.
The image key is a Data Type of Buffer in the Schema. I'm trying to use Multer, however that so far hasn't worked. When I have that code not commented out, it shows a proxy error for one of my API's.
It works when it is commented out. Overall, not sure if I am missing something here, or what.
app.use(multer({ dest: "./images/",
rename: function (fieldname, filename) {
return filename;
},
}));
app.post("/api/games",function(req,res){
var newItem = new Item();
newItem.img.data = fs.readFileSync(req.files.userPhoto.path)
newItem.img.contentType = "image/png";
newItem.save();
});

Download xlsx file passed from nodejs to frontend angularjs

I have a JSON array of objects that is a result of a function in nodejs. I use json2xls to convert that to an excel file, and it downloads to the server (not in a public folder, and is formatted correctly in Excel).
I would like to send a response to the frontend with the json results (to display as a preview) and show a button they can click to download the xlsx file OR display the JSON results and automatically download the file.
But I can't get it, and I've tried so many things I'm going crazy.
My controller code (the part that creates the xls file):
var xls = json2xls(results,{});
var today = (new Date()).toDateString('yyyy-mm-dd');
var str = today.replace(/\s/g, '');
var fileName = "RumbleExport_"+ str +".xlsx";
var file = fs.writeFileSync(fileName,xls,'binary');
res.download('/home/ubuntu/workspace/'+file);
The frontend controller:
vm.exportData = function(day, event, division) {
console.log('Export registrations button pressed.', vm.export);
//send the search parameters to the backend to run checks
$http.post('/api/exportData', vm.export).then(function(response){
vm.results = response.data;
console.log("Results",response);
vm.exportMessage = "Found " + vm.results.length + " registrations.";
})
.catch(function(error){
vm.exportError = error.data;
});
};
The view:
//display a button to download the export file
<a target="_self" file="{{vm.results}}" download="{{vm.results}}">Download Export File</a>
Someone please put me out of my misery. All the classes I've taken and none have covered this.
I FINALLY got it! And since I searched forever trying to make something work, I'll share the answer:
On the backend:
//save the file to the public/exports folder
var file = fs.writeFileSync('./public/exports/'+fileName,xls,'binary');
//send the results to the frontend
res.json(200).json({results:results, fileName: fileName});
On the frontend, use HTML to download a link to the file:
<a href="exports/{{fileName}}" download>Save File</a>

Why downloading tiff doesn't work in Firefox?

In my project i use AngularJS so a directive for downloading files was created. It contains the following:
scope.$on('downloaded', function(event, data) {
var hiddenLink = document.createElement('a');
$(hiddenLink).attr({
href: 'data:application/tiff;base64,' + data.Attachment,
download: data.AttachmentFileName
});
if (isIEorFirefox) {
$(hiddenLink).click(function(event){
event.preventDefault();
var byteString = atob(data.Attachment);
var buffer = new ArrayBuffer(byteString.length);
var intArray = new Uint8Array(buffer);
for (var i = 0; i < byteString.length; i++) {
intArray[i] = byteString.charCodeAt(i);
}
var blob = new Blob([buffer],{type:'image/tiff'});
window.navigator.msSaveOrOpenBlob(blob, data.AttachmentFileName);
});
$(hiddenLink).trigger('click');
} else {
hiddenLink.click();
}
});
Previously there was an issue - download in IE simply didn't start - but for now as you can it has been eliminated. Though another issue remains - currently this code doesn't start download in Firefox. There is only one question - why?
UPDATE:
I've updated initial code because it didn't save file properly in IE. Now it does. Searching over the web i still cannot find a way to make file download in FF. Moreover FF still seems not to have any native way to save files according to this article https://hacks.mozilla.org/2012/07/why-no-filesystem-api-in-firefox/. I would be grateful if someone prove me wrong.
hiddenLink.click();
should perhaps be:
$(hiddenLink).click();
or same as other:
$(hiddenLink).trigger('click');
Assume you also need the event handler added as well...

How to upload file in angularjs e2e protractor testing

I want to test file uploading using an angularjs e2e test. How do you do this in e2e tests? I run my test script through grunt karma.
This is how I do it:
var path = require('path');
it('should upload a file', function() {
var fileToUpload = '../some/path/foo.txt',
absolutePath = path.resolve(__dirname, fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
element(by.id('uploadButton')).click();
});
Use the path module to resolve the full path of the file that you want to upload.
Set the path to the input type="file" element.
Click on the upload button.
This will not work on firefox. Protractor will complain because the element is not visible. To upload in firefox you need to make the input visible. This is what I do:
browser.executeAsyncScript(function(callback) {
// You can use any other selector
document.querySelectorAll('#input-file-element')[0]
.style.display = 'inline';
callback();
});
// Now you can upload.
$('input[type="file"]').sendKeys(absolutePath);
$('#uploadButton').click();
You can't directly.
For security reason, you can not simulate a user that is choosing a file on the system within a functional testing suite like ngScenario.
With Protractor, since it is based on WebDriver, it should be possible to use this trick
Q: Does WebDriver support file uploads? A: Yes.
You can't interact with the native OS file browser dialog directly,
but we do some magic so that if you call
WebElement#sendKeys("/path/to/file") on a file upload element, it does
the right thing. Make sure you don't WebElement#click() the file
upload element, or the browser will probably hang.
This works just fine:
$('input[type="file"]').sendKeys("/file/path")
Here is a combo of Andres D and davidb583's advice that would have helped me as I worked through this...
I was trying to get protractor tests executed against the flowjs controls.
// requires an absolute path
var fileToUpload = './testPackages/' + packageName + '/' + fileName;
var absolutePath = path.resolve(__dirname, fileToUpload);
// Find the file input element
var fileElem = element(by.css('input[type="file"]'));
// Need to unhide flowjs's secret file uploader
browser.executeScript(
"arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
fileElem.getWebElement());
// Sending the keystrokes will ultimately submit the request. No need to simulate the click
fileElem.sendKeys(absolutePath);
// Not sure how to wait for the upload and response to return first
// I need this since I have a test that looks at the results after upload
// ... there is probably a better way to do this, but I punted
browser.sleep(1000);
var imagePath = 'http://placehold.it/120x120&text=image1';
element(by.id('fileUpload')).sendKeys(imagePath);
This is working for me.
This is what I do to upload file on firefox, this script make the element visible to set the path value:
browser.executeScript("$('input[type=\"file\"]').parent().css('visibility', 'visible').css('height', 1).css('width', 1).css('overflow', 'visible')");
If above solutions don't work, read this
First of all, in order to upload the file there should be an input element that takes the path to the file. Normally, it's immediately next to the 'Upload' button... BUT I've seen this, when the button doesn't have an input around the button which may seem to be confusing. Keep clam, the input has to be on the page! Try look for input element in the DOM, that has something like 'upload', or 'file', just keep in mind it can be anywhere.
When you located it, get it's selector, and type in a path to a file. Remember, it has to be absolute path, that starts from you root directory (/something/like/this for MAC users and C:/some/file in Windows)
await $('input[type="file"]').sendKeys("/file/path")
this may not work, if...
protractor's sendKeys can only type in an input that's visible. Often, the input will be hidden or have 0 pixels size. You can fix that too
let $input = $('input[type="file"]');
await browser.executeScript(
"arguments[0].style.visibility = 'visible'; arguments[0].style.height = '1px'; arguments[0].style.width = '1px'; arguments[0].style.opacity = 1",
$input.getWebElement()
);
I realized that the file input in the web app I'm testing is only visible in Firefox when it is scrolled into view using JavaScript, so I added scrollIntoView() in Andres D's code to make it work for my app:
browser.executeAsyncScript(function (callback) {
document.querySelectorAll('input')[2]
.style = '';
document.querySelectorAll('input')[2].scrollIntoView();
callback();
});
(I also removed all of the styles for the file input element)
// To upload a file from C:\ Directory
{
var path = require('path');
var dirname = 'C:/';
var fileToUpload = '../filename.txt';
var absolutePath = path.resolve('C:\filename.txt');
var fileElem = ptor.element.all(protractor.By.css('input[type="file"]'));
fileElem.sendKeys(absolutePath);
cb();
};
If you want to select a file without opening the popup below is the answer :
var path = require('path');
var remote = require('../../node_modules/selenium-webdriver/remote');
browser.setFileDetector(new remote.FileDetector());
var fileToUpload = './resume.docx';
var absolutePath = path.resolve(process.cwd() + fileToUpload);
element(by.css('input[type="file"]')).sendKeys(absolutePath);
the current documented solutions would work only if users are loading jQuery. i all different situations users will get an error such:Failed: $ is not defined
i would suggest to document a solution using native angularjs code.
e.g. i would suggest instead of suggesting:
$('input[type="file"]') .....
to suggest:
angular.element(document.querySelector('input[type="file"]')) .....
the latter is more standard, atop of angular and more important not require jquery

Resources