If have an input type file
<input id="file" type="file" name="file" />
and an Image
<img id="img">
If a file is selected I want to read Exif data from the image an load it into the img tag.
var $inputFile = $("#file");
$inputFile.on("change", function() {
var img = document.getElementById("img");
var files = $inputFile[0].files;
var reader = new FileReader()
reader.onload = function(event) {
var file = reader.result;
// this is not working
img.src = file;
var binaryString = reader.result;
var oFile = new BinaryFile(binaryString, 0, file.size);
var exif = EXIF.readFromBinaryFile(oFile);
// read exif data
}
reader.readAsBinaryString(files[0]);
});
The problem is that I did not get any image on the screen. It only shows up if I use reader.readAsDataURL(files[0]); but this I cannot use because I need the binaryString for the Exif data.
How do I get the image tag to show the selected file which is a binary string?
to show an image in "binary" form, you need to have it as a base62 encoded string, aka "dataURL".
To use it binary and put it as the src you can make a ObjectURL.
var objectURL = URL.createObjectURL(blob);
image.src=objectURL;
You don't need a fileReader for this, but you will need fileReader for your exif analysis
Related
I have an Ionic application which downloads a file from a Web API. The content of the file can be found in the _body property of the HTTP response.
What I'm trying to do is convert this text into an arrayBuffer so I can save the content into a file.
However, the issue that I'm having is that any file (PDF files in my instance) that have images and/or large in size either don't show up at all or show up as correputed files.
At first I thought this was an issue relating Ionic. So to make sure I tried to simulate this issue and I was able to reproduce it.
Is this snippet you can select a PDF file, then download it. You would find that the downloaded file is corrupted and exactly how my Ionic app displays them.
HTML:
<input type="file" id="file_input" class="foo" />
<div id="output_field" class="foo"></div>
JS:
$(document).ready(function(){
$('#file_input').on('change', function(e){
readFile(this.files[0], function(e) {
//manipulate with result...
$('#output_field').text(e.target.result);
try {
var file = new Blob([e.target.result], { type: 'application/pdf;base64' });
var fileURL = window.URL.createObjectURL(file);
var seconds = new Date().getTime() / 1000;
var fileName = "cert" + parseInt(seconds) + ".pdf";
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
a.href = fileURL;
a.download = fileName;
a.click();
}
catch (err){
$('#output_field').text(err);
}
});
});
});
function readFile(file, callback){
var reader = new FileReader();
reader.onload = callback
//reader.readAsArrayBuffer(file);
reader.readAsText(file);
}
https://jsfiddle.net/68qeau3h/3/
Now, when using reader.readAsArrayBuffer(file); everything works as expected, however in my particular case, I used reader.readAsText(file); because this is how the data is retrieve for me, this is text form.
When adding these lines of code to try to convert the string into an arrayBuffer
...
var buf = new ArrayBuffer(e.target.result.length * 2); // 2 bytes for each char
var bufView = new Uint16Array(buf);
for (var i=0, strLen=e.target.result.length; i<strLen; i++) {
bufView[i] = e.target.result.charCodeAt(i);
}
var file = new Blob([buf], { type: 'application/pdf' });
...
This will not work and generate PDF files that the browser can't open.
So to recap, what I'm trying to do is somehow convert the result I get from reader.readAsText(file); to what reader.readAsArrayBuffer(file); produces. Because the files I'm working with, or the data im retrieving from my backend is this text form.
I've been trying to add a .mp3 file being loaded by Input on a URL, so i can play it using my player, but i cant load it as URL
I tried using FileReader with readAsDataURL, but i dont get URL for the file
I have this input
<input id="auInput" type="file" accept="audio/*" onChange={e => readURL(e)}/>
and the reader function:
function readURL(input) {
if(input.target.files && input.target.files[0]){
let reader = new FileReader();
reader.onloadend = function(e){
let audio = new Audio(e.target.result);
};
reader.readAsDataURL(input.target.files[0]);
// This is where i need the URL to add it to player:
sourceAux = reader.result;
}
I expect a URL and im just getting an empty string
I've found an answer, by using this
function readURL(input){
sourceAux = URL.createObjectURL(input.target.fles[0]);
console.log(sourceAux);
let audio = new Audio(sourceAux);
}
How to get Base64 from an input file type:pdf?. i´m trying convert a file .pdf in string base64 with JavaScript.
Example:
var base64 = funtionconvertBase64(file);
function funtionconvertBase64(file){
....
....
return stringbase64
}
You have to load the file using the FileReader.
<input id="loadFile" type="file" onchange="readAsBase64()" />
<script type="text/javascript">
function readAsBase64() {
var files = document.getElementById("loadFile").files;
if (files.length > 0) {
var fileToLoad = files[0];
var fileReader = new FileReader();
var base64File;
// Reading file content when it's loaded
fileReader.onload = function(event) {
base64File = event.target.result;
// base64File console
console.log(base64File);
};
// Convert data to base64
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
Here is my html code:
<input id="file" type="file">
<div id="preview">Preview</div>
and JavaScript Codes:
function handleFileSelect(evt) {
var file = evt.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
document.getElementById('preview').innerHTML = e.target.result;
};
reader.readAsText(file);
};
document.getElementById('file').addEventListener('change',handleFileSelect, false);
fiddle : https://jsfiddle.net/8te1hyv9/4/
I am trying to load an external html file from my local drive into the div id preview. Its Working fine only with image src url are on server..
How to display the image from local drive into the preview.Is this possible to convert the image url to base 64 when importing the html file.
I am trying to read in a file from a file on my computer and store in in a variable.
I am currently trying:
var fr = new FileReader;
fr.onload = function() {
//variable to hold file
var data = fr.result;
var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
ctx.drawImage(img,0,0,200,180);
};
fr.readAsDataURL("encryptedImage");
this does not work. I need to do this do i can decrypt an encrypted image on my file system. I have already turned of the security so my file system can be read from a browser.
any ideas?
From here it looks like you want to load the local file by passing a String to readAsArrayBuffer(), but it exspects a blob or file object. The file can be loaded via the browsers file dialog.
Steps are : Select the file, load the file via fileReader asArrayBuffer or asDataURL or asBinaryString ... and manipulate or use the data in your code.
For this example it creates an Image from the local file and draws it onto the canvas (if it's of correct mime type "image.*" however).
I'm not sure what kind of encoding/decoding you want to apply. But for custom manipulation of data I would recommend using ArrayBuffers and TypeArrays.
The example with FileReader.readAsDataURL(): http://jsfiddle.net/uvmD7/
<body>
<canvas id="cvs" width="200" height="200"></canvas>
<input type="file" id="files" name="files[]" multiple />
</body>
And the script:
document.getElementById('files').addEventListener('change', handleFileSelect, false);
var fr = new FileReader();
function handleFileSelect(evt) {
var files = evt.target.files;
fr.readAsDataURL(files[0]);
};
fr.onload = function(evt) {
// do sth with it
var data = evt.target.result; //fr.result
img = new Image();
img.src = data;
// draw after load
img.onload = function() {
var c=document.getElementById("cvs");
var ctx=c.getContext("2d");
ctx.drawImage(img,0,0,200,180);
};
};