I have a web application (ASP.Net) that needs to upload a file
I've been looking for a framework to extract data from excel on the client side and submit the content (JSON, CSV) format into the server side to lessen the traffic. I've looked into ActiveXObject in javascript but it only works in internet explorer. I have an option to use silverlight or actionscript to do the parsing.
Question:
Is silverlight really dead? can't i use it on the long run?
Is this possible using action script?
Is there any javascript framework to do this kind of parsing?
Thanks in advance
You can use JS-XLSX JavaScript library to parse file on client side and then send the content of parsed spreadsheet to the server.
For example you can create a button (see HTML code below), then call loadBinaryFile() on change event, parse it with JS-XLSX library and send it to the server with $.post() or other similar function.
The structure of workbook is a JSON object and it is well described in documentation at JS-XLSX site.
<script src="http://alasql.org/console/xlsx.core.min.js"></script>
<input type="file" onchange="parseAndSend(event)" value="Parse and send XSLS file">
<script>
function parseAndSend (event) {
// Load binary file from desktop
loadBinaryFile(event,function(data){
// Parse it to JSON
var workbook = XLSX.read(data,{type:'binary'});
// Send to server data from workbook here
// $.post({url:'http://mypostaddress',data:workbook});
alert(workbook.SheetNames);
});
}
function loadBinaryFile(path, success) {
var files = path.target.files;
var reader = new FileReader();
var name = files[0].name;
reader.onload = function(e) {
var data = e.target.result;
success(data);
};
reader.readAsBinaryString(files[0]);
}
</script>
Related
I am trying to read a .xlsx file in my SAPUI5 application using FileReader api. The UI5 control that I am using to upload the file is sap.ui.unified.FileUploader
My requirement is to read the content of the Excel sheet and display its data in a table in my UI5 application.
For this, I create a FileReader instance and call its .readAsBinaryString or .readAsText method and pass my file to it.
When the content is read, inside the onload event, the content of the file is displayed in an unreadable format (refer below)
Am I missing something? Or is there a different way of reading Excel data?
Thanks to mkysoft's and this answer. I was able to read the .xlsx file content.
For this, I had to create two files jszip.js and xlsx.js in my project. I created a separate folder for them and mentioned the two files' locations in sap.ui.define section in my controller.
The two libraries are available at
CDNJS - JSZip3 and
CDNJS - XLSX4 locations.
sap.ui.define([
"sap/ui/core/mvc/Controller",
.... //other libraries
"projectnamespace/foldername/jszip",
"projectnamespace/foldername/xlsx"
], function (Controller,...., jszip, xlsx)
And then, to read the .xlsx file I added the following code:
var oFileUploader = sap.ui.getCore().byId("fileUploader"); // get the sap.ui.unified.FileUploader
var file = oFileUploader.getFocusDomRef().files[0]; // get the file from the FileUploader control
if (file && window.FileReader) {
var reader = new FileReader();
reader.onload = function (e) {
var data = e.target.result;
var excelsheet = XLSX.read(data, {
type: "binary"
});
excelsheet.SheetNames.forEach(function (sheetName) {
var oExcelRow = XLSX.utils.sheet_to_row_object_array(excelsheet.Sheets[sheetName]); // this is the required data in Object format
var sJSONData = JSON.stringify(oExcelRow); // this is the required data in String format
});
};
reader.readAsBinaryString(file);
}
You need to parse Excel file in client side or server side. Excel files are not plain text. Old excel files (xls) can not parse without Excel, it has own binary format. But you can parse xlsx files, these are zipped multiple file which contains raw data, image and style files.
You can use exsting js library for client parse, example post How to parse Excel file in Javascript/HTML5.
You can use abap2xlsx library for ABAP backend.
I am trying to build a web-based utility that allows a user to 'choose' a system file utilizing <input type="file"> and immediately extract text data from the file without having to upload the file on to the server. I will then parse the text from the file for multiple applications.
I have come across this method for extracting or scraping text from a PDF file : https://ourcodeworld.com/articles/read/405/how-to-convert-pdf-to-text-extract-text-from-pdf-with-javascript
However, this requires a file be stored and accessed using an HTTP request.
So far I am able to read the PDF file using the File API, but I am not able to interact with the text content.
HTML
<input type="file" name="File Upload" id="tpdfFileUpload" accept=".pdf" />
Javascript
document.getElementById('pdfFileUpload').addEventListener('change', upload, false);
function upload(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(event) {
var textData = event.target.result;
//
// INSERT Code to convert textData into usable text.
//
};
reader.onerror = function() {
alert('Unable to read ' + file.fileName);
};
}
I played around with PDF.js but am having a hard time finding something that would work for this use case.
I am trying to upload a file using js file reader and AJAX to my server.
I used FileAPI and fileReader to read the file and convert it to string and then send it to the server via an AJAX request.
Here is my client side js code :
function upload() {
var file = document.getElementById('periodExcel').files[0];
if (file) {
console.log(file);
var reader = new FileReader();
reader.readAsText(file, file.type);
console.log(reader);
reader.onload = uploadAndRun;
}
}
function uploadAndRun(event) {
console.log(event);
var result = event.target.result;
$('#js').html(result);
var fileName = document.getElementById('periodExcel').files[0].name; //Should be 'picture.jpg'
$.post('./upload.php', {data: result, name: fileName}, function(result2){
$('#php').html(result2);
});
}
Here is the upload php script:
file_put_contents('upload/' . $_POST['name'], $_POST['data']);
it just write the file using php file_put_contents function.
My problem is that the uploaded file is corrupted and has a different size than the original file (it is larger).
I tried to use php file_get_contents function to read the same file and write it again using file_put_contents and the result file was fine and same as the original one.
I then tried to compare the two strings (the one that comes from the file reader and the one that comes from file_get_contents ) and compares the two strings using strcmp, that gives me that the string that come from the fileReader is larger than the one comes from file_get_contents.
So, what is the problem with my code and how to use the FileReader to upload file in this way while using readAsText function.
You are using the wrong collection in PHP. To access uploaded file stream use $_FILES.
See here:
http://php.net/manual/en/reserved.variables.files.php
and here: http://php.net/manual/en/features.file-upload.post-method.php
In short, PHP runtime takes care of reading the upload stream from the HTTP request, stores it locally in a temp folder and exposes the above map for you to access the temp file and possibly move it to another location (or do whatever else you need to do with it).
I would like to load PDF file from URL into JavaScript variable (this file is on another domain) and then print the base64 encoded string of that file.
This script allows me to browse file on my computer and then it prints base64 string into browser console:
<input id="inputFile" type="file" onchange="convertToBase64();" />
<script type="text/javascript">
function convertToBase64() {
//Read File
var selectedFile = document.getElementById("inputFile").files;
//Check File is not Empty
if (selectedFile.length > 0) {
// Select the very first file from list
var fileToLoad = selectedFile[0];
// FileReader function for read the file.
var fileReader = new FileReader();
var base64;
// Onload of file read the file content
fileReader.onload = function(fileLoadedEvent) {
base64 = fileLoadedEvent.target.result;
// Print data in console
console.log(base64);
};
// Convert data to base64
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
I would like to completely remove the input button from this script and pass my file to variable var selectedFile from URL (for example: http://www.example.com/docs/document.pdf).
I'd need a help how to realize this, because I am not sure if XMLHttpRequest() works cross domain and scripts I've found with Ajax/jQuery method operated mainly with JSON file, which is something different that I need.
Thank you very much for help.
You cannot do this in normal browser-based JavaScript* if the other side (http://www.example.com in your case) doesn't allow cross-origin requests from your origin.
If the other side does let you do this, then yes, you'd use XMLHttpRequest (or jQuery's wrappers for it, such as ajax or get) to request the data and transform/display it as you see fit.
A fairly typical way to work around that if the other side doesn't is to use your own server in-between: Make the request to your server, have it make the request to the other side (server-side code doesn't have the Same Origin Policy blocks that browsers impose), and then have your server respond to your request with the data from the other server.
* "normal browser-based JavaScript" - e.g., without starting the browser with special flags that disable security, or getting people to install an extension, etc.
I hope you're good!
I have an REST-API with PHP (Flight-PHP as framework) running in one server and I want to download a PDF saved in the server. But I'm having troubles with that.
The API resource that needs to be called to download the PDF is like:
GET /sales/:id/download
If I run the resource mentioned above in a browser, it will download a PDF file and it will display the PDF downloaded without troubles.
Now, in the frontend (a.k.a. a web application running in my browser) I have the following code:
$scope.download = (function (id) {
$http.get($rootScope.api_url + 'sales/' + id + '/download')
.then(function (response) {
var resp = response.data;
var blob = new Blob([resp], {type : 'application/pdf'});
saveAs(blob, folio + ".pdf"); //yup, I'm using SaveAs.js
}, function (reason) {
alert("The file weren't downloaded");
});
});
The code mentioned above downloads me a pdf file... But it is white!
So, after open both PDF's (one generated from the backend and another generated from the js script) it appears me with some chars I can't read (literally, I can't read)
So, my question is, how can I download the file using a different encode? And, which is the better way to encode this file to avoid the loss of chars?