I'm trying to get all url values from a multiple input file. It works correctly with just one image but if I try to attach more than one, I retrieve a null response and only get the last one correctly. I hope anybody could help with this issue!
Post my code below and JSFiddle example:
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
<script>
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
//show url image
var dataURL = reader.result;
alert(dataURL);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
https://jsfiddle.net/3q49moyj/
Related
I am trying to read a local static file using the FileReader API but for some reason it's not reading anything. I am using:
var file = new File(
[""],
"config.toml"
);
var reader = new FileReader();
reader.onload = event => {
console.log(reader.result);
};
reader.readAsText(file);
The result is just empty. What am I doing wrong? Also, how will Javascript know where to look for config.toml?
EDIT: To clarify, I want to read the file from the server where the application is hosted not from the client machine.
In your code you are using File constructor which returns a newly constructed File, where the arguments are as follows:
var myFile = new File(bits, name[, options]);
bits An Array of ArrayBuffer, ArrayBufferView, Blob, or DOMString objects — or a mix of any such objects. This is the file content encoded as UTF-8
name A USVString representing the file name or the path to the file
It does read the file from the path you supply. So it will read the content you've passed to it, and you've passed to it an empty string.
If you want to read a file from file system you will need to use an input element with type attribute set to file and browse for it.
Here is an sample how to use the FileReader api to read images:
function handleFileSelect(evt) {
var files = evt.target.files;
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = [
'<img class="thumb" src="',
e.target.result,
'" title="',
escape(theFile.name),
'"/>'
].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>
I am trying to upload a PDF file and once done uploading, I am trying to show that PDF file in an IFrame with the stream content I have with me in scope. Same code works if I upload an image file but throws below error for PDF upload in Firefox.
Error
Invalid or corrupted PDF file.
PDF.js v1.9.583 (build: d7b37ae7)
Message: Invalid PDF structure
viewer.js:1359:7
Error: Invalid or corrupted PDF file.
HTML
<input type="file" id="files" name="files[]" multiple />
<iframe id="uploadedFileIframe" title="PDF in an i-Frame" src="" scrolling="auto" height="400" width="400" />
CSS
.thumb {
height: 75px;
border: 1px solid #000;
margin: 10px 5px 0 0;
}
JavaScript
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('pdf.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var enc = btoa(unescape(encodeURIComponent( e.target.result)))
document.getElementById('uploadedFileIframe').setAttribute('src','data:application/pdf;base64,'+ enc);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
It looks like you've overengineered the solution a little bit
document.getElementById('uploadedFileIframe').src = reader.result;
should work if you place it instead of
var enc = btoa(unescape(encodeURIComponent( e.target.result)))
document.getElementById('uploadedFileIframe').setAttribute('src','data:application/pdf;base64,'+ enc);
https://jsfiddle.net/kc8sdas5/
You are accepting multiple files to be selected and you are always replacing the same iframe with a new source. You don't create a new iframe for each file. Also you don't have to read the file as a base64 string, it's pointless and also a bad for performances and memory. You could instead use the URL.createObjectURL instead, which is syncron, so you can get rid of your closure
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
var previews = document.querySelector('#previews');
var iframe;
var URL = window.URL || webkitURL;
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process pdf files.
if (!f.type.match('pdf.*')) {
continue;
}
iframe = document.createElement('iframe')
iframe.title = "PDF in an i-Frame";
iframe.scrolling = "auto";
iframe.width = iframe.hight = 400;
iframe.src = URL.createObjectURL(f);
previews.appendChild(iframe);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
<input type="file" id="files" name="files[]" multiple />
<div id="previews"></div>
I found this script online somewhere (I can't remember where) and it works well, for displaying the preview of an image before it's uploaded. The preview script is intended for multiple files but since I'm also saving data to a database, I need to restrict it to a single file. This script includes a loop that indexes the name of the file input and I'm having trouble targeting it with my php script that uploads the file and saves the data. So, I need to remove the loop so it works with only a single file, then I can give it a "regular" name and target it.
<input type="file" name="files[]" class="file" id="files">
<output id="list"></output>
<script type="text/javascript">
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
// Only process image files.
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>
Thanks!
You should be able to give the input element any name you want and the code should still work.
see https://developer.mozilla.org/en-US/docs/Web/API/FileList for more information on the file property
The var files = evt.target.files; Should always an an array. If you really want to remove the loop, try this
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// instead of looping. go straight for the first array item
var f = files[0];
// Only process image files.
if (!f.type.match('image.*')) {
return;
}
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
// Render thumbnail.
var span = document.createElement('span');
span.innerHTML = ['<img class="thumb" src="', e.target.result,'" title="', escape(theFile.name), '"/>'].join('');
document.getElementById('list').insertBefore(span, null);
};
})(f);
// Read in the image file as a data URL.
reader.readAsDataURL(f);
}
document.getElementById('files').addEventListener('change', handleFileSelect, false);
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
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);
};
};