I need to read a file, which has no extension, in a web page and then encode this file in a QR code in binary mode.
In order to encode binary I found this library and I think is good: https://github.com/nayuki/QR-Code-generator/blob/master/javascript/qrcodegen.js
But for the first part, read a file and don't modify it or encode it as a text or something else, I am unable to understand how to do it.
What is the best choice? A success could be just read that file and allow the page to download the file I had read in order to check that is the same file.
ok, i handled correctly:
$("#pwbutton").click(function(e) {
e.preventDefault();
var file = document.getElementById('customFile').files[0];
var fr = new FileReader();
fr.onloadend = function(e) {
console.log(e.target.result);
var readed = e.target.result;
var QRC = qrcodegen.QrCode;
var segs = qrcodegen.QrSegment.makeSegments(String.fromCharCode.apply(null, new Uint8Array(e.target.result)));
var qr = QRC.encodeSegments(segs, QRC.Ecc.LOW, 19, 19, -1, true);
var canvas = document.getElementById("qrcode-canvas");
qr.drawCanvas(3, 0, canvas);
$('#qresult').show();
};
fr.readAsArrayBuffer(file);
});
Related
I am new to Javascript and am working on a task to compress and then upload an already uploaded image.
I am trying to:
Retrieve the uploaded image,
Compress it
Convert it to a base64 URL
Convert it into a blob
And then into a file and upload it.
But this code just doesn't work.
When I step through it using a debugging tool it does it's job but otherwise it doesn't.
I think the rest of the code after the loadImage function call doesn't really execute.
Please help me make sense of it! Thanks!
function loadImage(formObj2, fldid2, file, callback) {
var oldImage = document.createElement("img");
var psImageOutput = new Image();
var reader = new FileReader();
reader.onload = function(e) {
/* code to compress image */
callback(psImageOutput);
}
reader.readAsDataURL(file);
}
var inputFile = fileQueue[i].file;
var formObj1 = formObject;
var fldid1 = fldid;
loadImage(formObj1, fldid1, inputFile, function(psImageOutput) {
var newImageDataSRC = psImageOutput.src;
/* Manipulate SRC string and create a blob and an image file from it */
formObj1.append(fldid1, newimgfile);
});
Be careful, on the line :
formObj1.append(fldid1, newimgfile);
You seem to append a dom node called newimgfile but in your code this variable doesn't exist.
Here i want to get the Data from Excel File by using upload file control.My Snippet is
window.onload = function () {
var fileInput = document.getElementById('fup1');
var fileDisplayArea = document.getElementById('txt1');
fileInput.addEventListener('change', function (e) {
var file = fileInput.files[0];
var reader = new FileReader();
reader.onload = function (e) {
txt1.innerText = reader.result;
}
reader.readAsText(file);
});
}
when i run this code i get the data in below format
PK!q9+p��[Content_Types].xml ��(�̔MN�0��H�!�%n��j�?K��ؓƪc[���g��
P�T��DQ4���f��|[�d��9g#���Ni�����Cz���*a�����|v~6}�y���-欌��p���J`�
how can i resolve this please help me
First of all you have to understand what you are doing. You are taking a exel file( which is not in a txt format) converting it into fileStream( buffer of bytes) finally you are converting it into txt file( which was a exel file). So what do you expect the result.
Now try Solving this problem using two popular JavaScript libraries:
1. xls
2. xlsx
Which allow you to parse in pure JavaScript.
For Documentation of these two libraries you can refer to following link.
Documentation
I am using the javascript file api to read a file and I want to get its type out. I am mainly using it to upload audio and video files. However when i upload amr, 3gp, and aac audio files, javascript can't figure out the filetype. I need to know the filetypes for the different audio formats as I use the files differently depending on the format. Is there anyway for me to figure out the format for the above mentioned files? I have supplied the code I use below.
var f = this.files[0];
var fr = new FileReader();
fr.onload = function (ev2) {
console.dir(ev2);
//$('#image').attr('src', ev2.target.result);
//extra[extra.length] = ev2.target.result;
extra[extra.length] = ev2.target.result;
var splitted = ev2.target.result.split(','); //get the type
fileType[fileType.length] = splitted[0];
console.log("splitted[0]: "+splitted[0]);
console.log("f.type: "+f.type);
};
fr.readAsDataURL(f);
regards
Try this code:Source
Demo
JSFiddle Example
var file = fileInput.files[0];
var textType = /text.*/;
if (file.type.match(textType)) {
var reader = new FileReader();
reader.onload = function(e) {
//onload code
}
reader.readAsText(file);
} else {
alert( "File not supported!");
}
or also this code:
var file = $("#inputFile")[0].files;
alert(file[0].type);
Im trying to run in-browser encryption application which uses jQuery 1.10.2 and CryptoJS 3.2.1
the problem that I face starts at around 2mb files. File can be encrypted just fine, but when a data URI is created for the file it crashes the browser.
I would like a way around this to make it possible to encrypt files up-to 50mb's without browser crashing.
Here is the current snippt responsible for file saving via FileReader API
var reader = new FileReader();
if(body.hasClass('encrypt')){
// Encrypt the file!
reader.onload = function(e){
// Use the CryptoJS library and the AES cypher to encrypt the
// contents of the file, held in e.target.result, with the password
var encrypted = CryptoJS.AES.encrypt(e.target.result, password);
// The download attribute will cause the contents of the href
// attribute to be downloaded when clicked. The download attribute
// also holds the name of the file that is offered for download.
a.attr('href', 'data:application/octet-stream,' + encrypted);
a.attr('download', file.name + '.encrypted');
step(4);
};
// This will encode the contents of the file into a data-uri.
// It will trigger the onload handler above, with the result
reader.readAsDataURL(file);
}
else {
// Decrypt it!
reader.onload = function(e){
var decrypted = CryptoJS.AES.decrypt(e.target.result, password)
.toString(CryptoJS.enc.Latin1);
if(!/^data:/.test(decrypted)){
alert("Invalid pass phrase or file! Please try again.");
return false;
}
a.attr('href', decrypted);
a.attr('download', file.name.replace('.encrypted',''));
step(4);
};
reader.readAsText(file);
}
What can I change in above code to allow for larger files to be encrypted and decrypted?
Live site: droplet.so (currently capped at 1.5mb otherwise browser crash is guaranteed)
Kindly thanks in advance.
With a little research I found out that 1.99MB is the maximum the can be saved in the data url in chrome.
Your problem can be done by converting your data url to blob
You can find more information here:
Blob from DataURL?
Chrome crashes when URI is too long is here a similar post ( see second answer ).
EDIT:
Possible solution
function dataURItoBlob(dataURI) {
var byteString = atob(dataURI.split(',')[1]);
var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
var ab = new ArrayBuffer(byteString.length);
var ia = new Uint8Array(ab);
for (var i = 0; i < byteString.length; i++) {
ia[i] = byteString.charCodeAt(i);
}
var bb = new BlobBuilder();
bb.append(ab);
return bb.getBlob(mimeString);
}
function download(dataURI) {
var blob = dataURItoBlob(dataURI);
var url = window.URL.createObjectURL(blob);
window.location.assign(url);
}
And you can use this code by calling download(dataURI).
I'm working in a little web app that generates an base64 image, I'm using blob to put it back into a file (is a .png but I haven't renamed it yet), now I'm trying to save it on my sever Any ideas or different approaches?
This is the script:
var img = document.getElementById("MyPix");
img.onclick = function() {
var image_data = atob(img.src.split(',')[1]);
var arraybuffer = new ArrayBuffer(image_data.length);
var view = new Uint8Array(arraybuffer);
for (var i=0; i<image_data.length; i++) {
view[i] = image_data.charCodeAt(i) & 0xff;
}
try {
var blob = new Blob([arraybuffer], {type: 'application/octet-stream'});
} catch (e) {
var bb = new (window.WebKitBlobBuilder || window.MozBlobBuilder);
bb.append(arraybuffer);
var blob = bb.getBlob('application/octet-stream');
}
var url = (window.webkitURL || window.URL).createObjectURL(blob);
valor = (document.getElementById("link").value = url)
location.href = valor;
};
I'm not very good with js so if you want to have a better idea visit the project clicking here its all javascript so just see source code.
you can't save to your server with just client-side JavaScript. Form the data you want to save in Javascript, then POST that to your server with a call to a page that you write that can turn POST data into a file on your filesystem, so in your case a .php file with code that looks for $_POST data and then writes that to file. After making sure it's safe, because anyone will be able to post data to that page, not just people using your webpage.