Hello! I'am trying to make it work a function called loadDocument, who need a url of the loaded files from the user local computer to work. I'm writing an API to load document from local user computer, and show it on a web reader.
This is my upload button :
<input type="file" id="input" onchange="module.onLoadSelection();" alt="Browse" name="upload"/>
This is my function without fileReader :
var onLoadSelection = function () {
var select = document.getElementById('input');
if (select && select.value) {
var id= '';
var url = select.files.item(0).name;
module.loadDocument(url,id);
}
};
This is my function with fileReader :
var loadTest = function (input) {
var file = document.querySelector('input[type=file]').files[0];
console.log("file loaded! ->", file); // i can read the obj of my file
var reader = new FileReader();
var id = ''; // don't need rightnow
var url = reader.readAsDataURL(file);
console.log("url :", url); // show me undefined....
module.loadDocument(url,id);
}
What i am trying is to get the url of the loaded file from user computer to get my function loadDocument working. She need a url parameter to work.
loadDocument is an API function, i assume i can't get the filepath of my user due to security reason.
What do i need to change/update on my loadDocument(); function to work?
Edit : In fact, nothing to change. The correct way to read my file was :
<input type="file" id="input" onchange="module.onLoadSelection(this.files);" alt="Browse" name="upload"/>
var onLoadSelection = function (files) {
if (files && files.length == 1) {
var id = '';
var url = URL.createObjectURL(files[0]);
module.loadDocument(url,id);
}
};
Don't use a FileReader at all.
When you want to display a File (or a Blob) that is in the browser's memory or on user's disk, then all you need is to generate an URL that do point to this memory slot.
That's exactly what URL.createObjectURL(blob) does: it returns a Blob URI (blob://) that points to the data either in memory or on the disk, acting exactly as a simple pointer.
This method has various advantages over the FileReader.readAsDataURL() method. To name a few:
Store the data in memory only once, when FileReader would need it at reading, then generate a copy as an base64 encoded, and an other one at displaying...
Synchronous. Since all it does is to generate a pointer, no need to make it async.
Cleaner code.
const module = {
loadDocument: (url) => {
document.body.append(
Object.assign(
document.createElement('iframe'),
{ src: url }
)
)
}
};
document.querySelector('input[type=file]').addEventListener('input', function (evt) {
var file = this.files[0];
var url = URL.createObjectURL(file);
module.loadDocument(url);
});
<input type="file">
function PreviewFiles(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
//alert(e.target.result);
$('#pclogo').prop('src', e.target.result)
.width(200)
.height(200);
var base64result = e.target.result.split(',')[1];
$('input[name="logo"]').val(base64result);
};
reader.readAsDataURL(input.files[0]);
}
}
File objects have a readAsDataURL method.
Use that.
var file = document.querySelector('input[type=file]').files[0];
var reader = new FileReader();
reader.addEventListener("load", function () {
doSomethingWithAUrl(reader.result);
}, false);
if (file) {
reader.readAsDataURL(file);
}
Using the sapui5 uploadcollection to upload files in the frontend and then sending them through ajax with a post request...
I need to know how to convert te returned object from the uploadcollection control into a xstring, so then I can send that xstring (that contains the file content) To a sap gateway by using ajax post method.
Any idea how could I do this?
Right now I'm sending files by using the uploadcollection, once I upload an attachment, the control returns an object that represents the file content.
I'm trying to make this object a xstring by using filereader:
//obtiene archivo
var file = files[i];
//Convierte archivo en binario
var reader = new FileReader();
reader.onload = function(readerEvt) {
var binaryString = readerEvt.target.result;
var base64 = btoa(binaryString);
var base64file;
if(typeof base64file == "undefined" || typeof base64file == null){
base64file = base64;
}else{
base64file = base64file +'new'+base64;
}
};
reader.readAsBinaryString(file);
console.log(file)
But this work only with files of type image, the others like pdf, .doc etc etc give the following error when I try to send them with ajax.
"The Data Services Request could not be understood due to malformed syntax".
Any idea how can I send convert these files into a xstring data?
Take a look at this example. Hope this helps.
View
<u:FileUploader change="onChange" fileType="pdf" mimeType="pdf" buttonText="Upload" />
Controller
convertBinaryToHex: function(buffer) {
return Array.prototype.map.call(new Uint8Array(buffer), function(x) {
return ("00" + x.toString(16)).slice(-2);
}).join("");
},
onChange: function(oEvent){
var that = this;
var reader = new FileReader();
var file = oEvent.getParameter("files")[0];
reader.onload = function(e) {
var raw = e.target.result;
var hexString = that.convertBinaryToHex(raw).toUpperCase();
// DO YOUR THING HERE
};
reader.onerror = function() {
sap.m.MessageToast.show("Error occured when uploading file");
};
reader.readAsArrayBuffer(file);
},
I figured it out by filling an array everytime that a file was uploaded through the control,
change: function(oEvent) {
//Get file content
file = oEvent.getParameter("files")[0];
//Prepare data for slug
fixname = file.name;
filename = fixname.substring(0, fixname.indexOf("."));
extension = fixname.substring(fixname.indexOf(".") + 1);
//fill array with uploaded file
var fileData = {
file: file,
filename: filename,
extension: extension
}
fileArray.push(fileData);
},
and then I did a loop over that array to post every single file I keept there by using ajax method post.
$.each(fileArray, function(j, valor) {
//get file
file = fileArray[j].file;
//get file lenght
var numfiles = fileArray.length;
//Convert file to binary
var reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = function(evt) {
fileString = evt.target.result;
//get and make slug
filename = fileArray[j].filename;
extension = fileArray[j].extension;
slug = documento + '/' + filename + '/' + extension;
//User url service
var sUrlUpload = "sap url";
runs++;
//Post files
jQuery.ajax({});
}
});
I need to convert my image to a Base64 string so that I can send my image to a server.
Is there any JavaScript file for this? Else, how can I convert it?
There are multiple approaches you can choose from:
1. Approach: FileReader
Load the image as blob via XMLHttpRequest and use the FileReader API (readAsDataURL()) to convert it to a dataURL:
function toDataURL(url, callback) {
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(xhr.response);
};
xhr.open('GET', url);
xhr.responseType = 'blob';
xhr.send();
}
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0', function(dataUrl) {
console.log('RESULT:', dataUrl)
})
This code example could also be implemented using the WHATWG fetch API:
const toDataURL = url => fetch(url)
.then(response => response.blob())
.then(blob => new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.onerror = reject
reader.readAsDataURL(blob)
}))
toDataURL('https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0')
.then(dataUrl => {
console.log('RESULT:', dataUrl)
})
These approaches:
have better compression
work for other file types as well
Browser Support:
http://caniuse.com/#feat=filereader
http://caniuse.com/#feat=fetch
2. Approach: Canvas (for legacy browsers)
Load the image into an Image-Object, paint it to a nontainted canvas and convert the canvas back to a dataURL.
function toDataURL(src, callback, outputFormat) {
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function() {
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
var dataURL;
canvas.height = this.naturalHeight;
canvas.width = this.naturalWidth;
ctx.drawImage(this, 0, 0);
dataURL = canvas.toDataURL(outputFormat);
callback(dataURL);
};
img.src = src;
if (img.complete || img.complete === undefined) {
img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
img.src = src;
}
}
toDataURL(
'https://www.gravatar.com/avatar/d50c83cc0c6523b4d3f6085295c953e0',
function(dataUrl) {
console.log('RESULT:', dataUrl)
}
)
In detail
Supported input formats:
image/png, image/jpeg, image/jpg, image/gif, image/bmp, image/tiff, image/x-icon, image/svg+xml, image/webp, image/xxx
Supported output formats:
image/png, image/jpeg, image/webp(chrome)
Browser Support:
http://caniuse.com/#feat=canvas
Internet Explorer 10 (Internet Explorer 10 just works with same origin images)
3. Approach: Images from the local file system
If you want to convert images from the users file system you need to take a different approach.
Use the FileReader API:
function encodeImageFileAsURL(element) {
var file = element.files[0];
var reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
<input type="file" onchange="encodeImageFileAsURL(this)" />
You can use the HTML5 <canvas> for it:
Create a canvas, load your image into it and then use toDataURL() to get the Base64 representation (actually, it's a data: URL, but it contains the Base64-encoded image).
This snippet can convert your string, image and even video file to Base64 string data.
<input id="inputFileToLoad" type="file" onchange="encodeImageFileAsURL();" />
<div id="imgTest"></div>
<script type='text/javascript'>
function encodeImageFileAsURL() {
var filesSelected = document.getElementById("inputFileToLoad").files;
if (filesSelected.length > 0) {
var fileToLoad = filesSelected[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result; // <--- data: base64
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("imgTest").innerHTML = newImage.outerHTML;
alert("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
console.log("Converted Base64 version is " + document.getElementById("imgTest").innerHTML);
}
fileReader.readAsDataURL(fileToLoad);
}
}
</script>
Basically, if your image is
<img id='Img1' src='someurl'>
then you can convert it like
var c = document.createElement('canvas');
var img = document.getElementById('Img1');
c.height = img.naturalHeight;
c.width = img.naturalWidth;
var ctx = c.getContext('2d');
ctx.drawImage(img, 0, 0, c.width, c.height);
var base64String = c.toDataURL();
Here is what I did:
// Author James Harrington 2014
function base64(file, callback){
var coolFile = {};
function readerOnload(e){
var base64 = btoa(e.target.result);
coolFile.base64 = base64;
callback(coolFile)
};
var reader = new FileReader();
reader.onload = readerOnload;
var file = file[0].files[0];
coolFile.filetype = file.type;
coolFile.size = file.size;
coolFile.filename = file.name;
reader.readAsBinaryString(file);
}
And here is how you use it
base64( $('input[type="file"]'), function(data){
console.log(data.base64)
})
I found that the safest and reliable way to do it is to use FileReader().
Demo: Image to Base64
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />
<div id="dummy">
</div>
<div>
<textarea style="width:100%;height:500px;" id="txt">
</textarea>
</div>
<script>
function encode() {
var selectedfile = document.getElementById("myinput").files;
if (selectedfile.length > 0) {
var imageFile = selectedfile[0];
var fileReader = new FileReader();
fileReader.onload = function(fileLoadedEvent) {
var srcData = fileLoadedEvent.target.result;
var newImage = document.createElement('img');
newImage.src = srcData;
document.getElementById("dummy").innerHTML = newImage.outerHTML;
document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
}
fileReader.readAsDataURL(imageFile);
}
}
</script>
</body>
</html>
UPDATE - THE SAME CODE WITH COMMENTS FOR #AnniekJ REQUEST:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="myinput" type="file" onchange="encode();" />
<div id="dummy">
</div>
<div>
<textarea style="width:100%;height:500px;" id="txt">
</textarea>
</div>
<script>
function encode() {
// Get the file objects that was selected by the user from myinput - a file picker control
var selectedfile = document.getElementById("myinput").files;
// Check that the user actually selected file/s from the "file picker" control
// Note - selectedfile is an array, hence we check it`s length, when length of the array
// is bigger than 0 than it means the array containes file objects
if (selectedfile.length > 0) {
// Set the first file object inside the array to this variable
// Note: if multiple files are selected we can itterate on all of the selectedfile array using a for loop - BUT in order to not make this example complicated we only take the first file object that was selected
var imageFile = selectedfile[0];
// Set a filereader object to asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read.
var fileReader = new FileReader();
// We declare an event of the fileReader class (onload event) and we register an anonimous function that will be executed when the event is raised. it is "trick" we preapare in order for the onload event to be raised after the last line of this code will be executed (fileReader.readAsDataURL(imageFile);) - please read about events in javascript if you are not familiar with "Events"
fileReader.onload = function(fileLoadedEvent) {
// AT THIS STAGE THE EVENT WAS RAISED
// Here we are getting the file contents - basiccaly the base64 mapping
var srcData = fileLoadedEvent.target.result;
// We create an image html element dinamically in order to display the image
var newImage = document.createElement('img');
// We set the source of the image we created
newImage.src = srcData;
// ANOTHER TRICK TO EXTRACT THE BASE64 STRING
// We set the outer html of the new image to the div element
document.getElementById("dummy").innerHTML = newImage.outerHTML;
// Then we take the inner html of the div and we have the base64 string
document.getElementById("txt").value = document.getElementById("dummy").innerHTML;
}
// This line will raise the fileReader.onload event - note we are passing the file object here as an argument to the function of the event
fileReader.readAsDataURL(imageFile);
}
}
</script>
</body>
</html>
If you have a file object, this simple function will work:
function getBase64 (file, callback) {
const reader = new FileReader();
reader.addEventListener('load', () => callback(reader.result));
reader.readAsDataURL(file);
}
Usage example:
getBase64(fileObjectFromInput, function(base64Data){
console.log("Base64 of file is", base64Data); // Here you can have your code which uses Base64 for its operation, // file to Base64 by oneshubh
});
I ended up using a function that returns a Promise.
const getImg64 = async() => {
const convertImgToBase64URL = (url) => {
console.log(url)
return new Promise((resolve, reject) => {
const img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = () => {
let canvas = document.createElement('CANVAS')
const ctx = canvas.getContext('2d')
canvas.height = img.height;
canvas.width = img.width;
ctx.drawImage(img, 0, 0);
const dataURL = canvas.toDataURL();
canvas = null;
resolve(dataURL)
}
img.src = url;
})
}
//for the demonstration purposes I used proxy server to avoid cross origin error
const proxyUrl = 'https://cors-anywhere.herokuapp.com/'
const image = await convertImgToBase64URL(proxyUrl+'https://image.shutterstock.com/image-vector/vector-line-icon-hello-wave-260nw-1521867944.jpg')
console.log(image)
}
getImg64()
You can use this approach in any async function. Then you can just await for the converted image and continue with instructions.
uploadProfile(e) {
let file = e.target.files[0];
let reader = new FileReader();
reader.onloadend = function() {
console.log('RESULT', reader.result)
}
reader.readAsDataURL(file);
}
Here is the way you can do with Javascript Promise.
const getBase64 = (file) => new Promise(function (resolve, reject) {
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result)
reader.onerror = (error) => reject('Error: ', error);
})
Now, use it in event handler.
const _changeImg = (e) => {
const file = e.target.files[0];
let encoded;
getBase64(file)
.then((result) => {
encoded = result;
})
.catch(e => console.log(e))
}
You could use FileAPI, but it's pretty much unsupported.
As far as I know, an image can be converted into a Base64 string either by FileReader() or storing it in the canvas element and then use toDataURL() to get the image. I had the similar kind of problem you can refer this.
Convert an image to canvas that is already loaded
Try this code:
For a file upload change event, call this function:
$("#fileproof").on('change', function () {
readImage($(this)).done(function (base64Data) { $('#<%=hfimgbs64.ClientID%>').val(base64Data); });
});
function readImage(inputElement) {
var deferred = $.Deferred();
var files = inputElement.get(0).files;
if (files && files[0]) {
var fr = new FileReader();
fr.onload = function (e) {
deferred.resolve(e.target.result);
};
fr.readAsDataURL(files[0]);
} else {
deferred.resolve(undefined);
}
return deferred.promise();
}
Store Base64 data in hidden filed to use.
document.querySelector('input').onchange = e => {
const fr = new FileReader()
fr.onloadend = () => document.write(fr.result)
fr.readAsDataURL(e.target.files[0])
}
<input type="file">
Needed to leverage reader to convert blob to base64, prefer to use async-await syntax so I chose to extract reader logic into helper like this:
//* Convert resBlob to base64
export const blobToData = (blob: Blob) => {
return new Promise((resolve) => {
const reader = new FileReader()
reader.onloadend = () => resolve(reader.result)
reader.readAsDataURL(blob)
})
}
and calling it using await in main code:
//* Convert resBlob to dataUrl and resolve
const resData = await blobToData(resBlob)
In the case you are facing cors origin error, there is a simple proxy called cors-fix that loads the image on server and return it as buffer array.
Therefore, we can use fetch to get the image data and filereader to convert it to dataUrl, as described by #HaNdTriX.
function toDataUrl(url) {
fetch(`https://cors-fix.web.app/v1?url=${url}`)
.then(data => data.blob().then(blob => {
const reader = new FileReader();
reader.onloadend = () => {
console.log(reader.result);
};
reader.onerror = () => {
console.log('reader error');
};
reader.readAsDataURL(blob);
}));
}
Well, if you are using Dojo Toolkit, it gives us a direct way to encode or decode into Base64.
Try this:
To encode an array of bytes using dojox.encoding.base64:
var str = dojox.encoding.base64.encode(myByteArray);
To decode a Base64-encoded string:
var bytes = dojox.encoding.base64.decode(str);
You can also simply extract base-64 only part of the URL by ding this:
var Base64URL = canvas.toDataURL('image/webp')
var Base64 = Base64URL.split(",")[1] //Returns the base64 part
Assuming that you are doing this in a browser:
With await:
import axios from 'axios'
const response = await axios.get(url, { responseType: 'blob' });
return window.URL.createObjectURL(response.data);
With promise
import axios from 'axios'
const response = await axios.get(url, { responseType: 'blob' })
.then((response) => {
const dataUrl = window.URL.createObjectURL(response.data);
// do something with your url
});
This is very simple.
1> Just call the function and pass your image.
2> Save the return value and use wherever required.
//call like this
const convertedFile = await imageToBase64(fileObj);
console.log("convertedFile",convertedFile);
//this is the required function
async function imageToBase64(image) {
const reader = new FileReader();
reader.readAsDataURL(image);
const data= await new Promise((resolve, reject) => {
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
return data;
}
export default imageToBase64;
Hi i want to open excel file with xlsx extension with xlsx.js library.
I can open file by html input but i want to open it by using file path.
I have this code extracted from xlsx.js demo:
function handleFile(e) {
rABS = false;
use_worker = false;
console.log(e);
var files = e.target.files;
var f = files[0]; {
var reader = new FileReader();
var name = f.name;
reader.onload = function (e) {
if (typeof console !== 'undefined')
console.log("onload", new Date(), rABS, use_worker);
var data = e.target.result;
console.log("target result >>>>>>>>> " + e.target.result);
if (use_worker) {
xw(data, process_wb);
} else {
var wb;
if (rABS) {
wb = X.read(data, {
type : 'binary'
});
} else {
var arr = fixdata(data);
wb = X.read(btoa(arr), {
type : 'base64'
});
}
process_wb(wb);
}
};
if (rABS)
reader.readAsBinaryString(f);
else
reader.readAsArrayBuffer(f);
}
}
I want something like this:
var file = new File([""],"C:\\Users\\PalFS\\Downloads\\Fiverr_Example_List (1).xlsx");
var data = file;
How to do this or how can i convert this file into arraybuffer like it is returned from, var data = e.target.result;.
Thanks
You could use --allow-file-access-from-files flag at chrome, chromium with XMLHttpRequest , .responseType set to "arraybuffer" to retrieve .xlsx file from local filesystem as ArrayBuffer; set new File() data to returned ArrayBuffer. Second parameter at new File() constructor should set the .name property of created file.
Launch /path/to/chrome --allow-file-access-from-files
var request = new XMLHttpRequest();
// may be necessary to escape path string?
request.open("GET", "C:\\Users\\PalFS\\Downloads\\Fiverr_Example_List (1).xlsx");
request.responseType = "arraybuffer";
request.onload = function () {
// this.response should be `ArrayBuffer` of `.xlsx` file
var file = new File(this.response, "Fiverr_Example_List.xlsx");
// do stuff with `file`
};
request.send();
I'm using the Javascript FileReader to load an image in the browser:
e = e.originalEvent;
e.dataTransfer.dropEffect = 'copy';
this.documentFile = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
}
};
reader.readAsDataURL(this.documentFile);
This works fine. I now want to get the original filename of the image, but I've got no clue how and looking around the internet I can't find anything either?
Does anybody know how I can get the filename through the FileReader? All tips are welcome!
This is prob not the best solution, BUT it worked for me.
var reader = new FileReader();
reader.fileName = file.name // file came from a input file element. file = el.files[0];
reader.onload = function(readerEvt) {
console.log(readerEvt.target.fileName);
};
Not the best answer, but a working one.
I just faced the same issue, here's how I fixed it:
Using FileReader
const reader = new FileReader();
reader.readAsDataURL(event.target.files[0]); // event is from the HTML input
console.log(event.target.files[0].name);
The selected answer will work, but I personally prefer to prevent assigning unknown properties to existing objects.
What I do is using the built-in Map object to store connections between FileReader and its File. It works great, because Map allows the key to be anything, even an object.
Consider this example with drag&drop on the window, where multiple files can be dropped at the same time:
// We will store our FileReader to File connections here:
const files = new Map();
window.addEventListener('drop', e => {
e.preventDefault();
for (const file of e.dataTransfer.files) {
const reader = new FileReader();
files.set(reader, file);
reader.addEventListener('load', e => {
// Getting the File from our Map by the FileReader reference:
const file = files.get(e.target);
console.log(`The contents of ${file.name}:`);
console.log(e.target.result);
// We no longer need our File reference:
files.delete(e.target);
});
reader.readAsText(file);
}
});
window.addEventListener('dragover', e => {
e.preventDefault();
});
And voilà, we made it without altering our FileReader objects!
I got the filename and filesize through the FileReader this way
First of all, the reader is a javascript FILE API specification that is so useful to read files from disc.
In your example the file is readed by readAsDataURL.
reader.readAsDataURL(this.documentFile);
var name = this.documentFile.name;
var size = this.documentFile.size;
I tried on my site where use this.files[0] instead and worked fine to catch the name and the size with jQuery into an input element.
reader.readAsDataURL(this.files[0]);
$("#nombre").val(this.files[0].name);
$("#tamano").val(this.files[0].size);
I tried the solution of #Robo Robok but was unable to get this to work in my Angular Application. With this as inspiration I came up with the following and wonder if this is a correct approach. Me, I'm a bit skeptic because each upload gets there own FileReader
export class ImageFileUpload {
imageData: any;
imageName!: string;
fileReader!: FileReader;
}
selectedFiles!: FileList | null;
previews: Array<ImageFileUpload> = [];
uploadRenewals(event: any) { // event of html
const target = event.target as HTMLInputElement;
this.selectedFiles = target.files;
if (this.selectedFiles) {
const numberOfFiles = this.selectedFiles.length;
for (let i = 0; i < numberOfFiles; i++) {
const currentSelectedFile = this.selectedFiles[i];
const newImageFile = new ImageFileUpload();
newImageFile.imageName = currentSelectedFile.name;
newImageFile.fileReader = new FileReader();
newImageFile.fileReader.onload = (e: any) => {
newImageFile.imageData = e.target.result;
};
newImageFile.fileReader.readAsDataURL(currentSelectedFile);
this.previews.push(newImageFile);
}
}
}
}
HTML Page
<input #fileInput (change)="uploadRenewals($event)" multiple type="file">
<div class="slider">
<div *ngFor="let preview of previews; let idx = index">
<img [src]="preview.imageData" [alt]="preview.imageName">
</div>
</div>
One other way is to modify the FileReader() object instance with your own desired property. Adding a key like reader.myOwnFileName gets you access to that in the onload callback.
const reader = new FileReader();
reader.onload = function() {
console.log("Loaded file '" + reader.myOwnFileName + "' contents: ");
console.log(reader.result); // output file contents of chosen file.
};
reader.readAsText(this.files[0]); // use readAsText(), readAsDataURL() or other method.
// make your own key on the object instance:
reader.myOwnFileName = this.files[0].name;
If you want the filename to a variable:
var filename;
var reader = new FileReader();
reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
filename = reader.result;
}
};
reader.readAsDataURL(this.documentFile);
If you want it to run in a function:
var reader = new FileReader();
reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
myfunctionafter(reader.result);
}
};
reader.readAsDataURL(this.documentFile);
If you want to get the info out inside another function:
var reader = new FileReader();
var filename = reader.onloadend = function () {
if (reader.result) {
console.log(reader);
$('#theImage').attr('src', reader.result);
return reader.result;
}
};
reader.readAsDataURL(this.documentFile);
There might be a problem when your reader.onloadend might finish before the function you are running it from. Then you should do two functions and trigger the myfunctionafter(reader.result); from inside
Or you could simply get the src after
var filename = $('#theImage').attr('src');