Develop Reference

How can i load an mp3 file to a react URL

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 all url's image from a multiple input file?

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/

How to convert input file .pdf in string Base64?

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>

FileReader readAsBinaryString() to Image DOM Element

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

read in a file from url or filesystem to variable in javascript

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);
};
};