getImage(file) {
let context = this;
let reader = new FileReader();
reader.onload = (function(theFile) {
return function(e) {
context.setState({
images: e.target.result,
});
};
})(file);
reader.readAsDataURL(file);
}
Error: TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.
Files that comes from a <input /> of type file are stored in an array form.
If GetImage is the callback of the onChange event of your <input /> you need to extract it in the following form:
function getImage(event) {
const file = event.target.files[0];
// ...code
reader.readAsDataURL(file);
}
Related
I tried to upload Multiple files and wants to read the content of the file for encrypt the data.
I can able to read the single file properly , but I can't do it while upload multiple files am getting error reader is busy.
If I create new Filereader while onloadend it gives me null value of content.
React JS - sample code:
let reader = new FileReader();
class FilReaderComp extends Component {
constructor(props) {
super(props);
this.state = {
}}
upLoadFileFolderFunc(e){
e.preventDefault();
let fileitemsList = e.target.files;
for (let i = 0; i < fileitemsList.length; i++) {
let fileitems = fileitemsList[i];
reader.onloadend = this.handleFileRead;
reader.readAsText(fileitems);
}
}
handleFileRead = (e) => {
const content = reader.result; here am reading content of the file
//here doing my function after getting content
}
render(){
return(
<input type="file" className="custom-file-input" style={{display:"hide"}}
onChange={this.upLoadFileFolderFunc} multiple/>
);}
export default withRouter(FilReaderComp);
Try wrapping your onload function in another function and enclose the filereader in the loop. Here the closure gives you access to each file being processed in turn via the variable f:
function openFiles(evt){
var files = evt.target.files;
for (var i = 0, len = files.length; i < len; i++) {
var file = files[i];
var reader = new FileReader();
reader.onload = (function(f) {
return function(e) {
// Here you can use `e.target.result` or `this.result`
// and `f.name`.
};
})(file);
reader.readAsText(file);
}
}
I am trying to pass a file that is attached from client-side to server-side.
In order to get a file, I tried these below codes.
1)
var files = event.target.files;
var file = files[0];
2)
var image = new Image();
var reader = new FileReader();
var vm = this;
reader.onload = (e) => {
vm.image = e.target.result;
};
reader.readAsDataURL(file);
In the first one, 'file' contains only details about the file and it does not contain the file content and in the second one 'vm.image' file content is there, but it is not in byte code format. I want the file in byte code format in js which I can send in the body of an ajax call!
In order to get the base64 of the file input:
const files = e.target.files || e.dataTransfer.files;
const file = files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.image = reader.result.split(',')[1];
};
Here is an example:
document.getElementById('inputFile').addEventListener('input', function(e){
const files = e.target.files || e.dataTransfer.files;
const file = files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.image = reader.result.split(',')[1];
console.log(this.image)
};
})
<input type="file" id="inputFile"/>
How I can get media.duration to live in a state environment ?
Right now I don't have access to it, even after trying to change state
handleClick(e) {
e.preventDefault();
var reader = new FileReader();
reader.readAsDataURL(this.state.uploadedFile);
reader.onload = function() {
var media = new Audio(reader.result);
media.onloadedmetadata = function() {
console.log(media.duration); // <-- THIS WORKS!!!!!!!!!!!!!!
};
};
console.log(media.duration) //<------THIS DOES NOT WORK!!!!!!!!!!
console.log("The link was clicked.");
console.log(this.state.duration);
}
from: How to get duration of video when I am using filereader to read the video file?
_________________________________________
I tried this but it did not work
this.setState({duration:media.duration},()=>{
console.log(this.state.duration)
})
It's because you use media variable is out of the scope.
Please try this one.
handleClick(e) {
e.preventDefault();
var reader = new FileReader();
reader.readAsDataURL(this.state.uploadedFile);
reader.onload = () => {
var media = new Audio(reader.result);
media.onloadedmetadata = () => {
console.log(media.duration); // <-- THIS WORKS!!!!!!!!!!!!!!
this.setState({duration: media.duration});
};
};
}
I have the following javascript code which is trying to upload a file to a repository but I need to pass it as a buffer first. The problem is my "getBatchFileBuffer" function is somehow continuing without waiting for it to resolve which make the "UploadFiles" to only get a promise and not the real object. TIA
const getBatchFileBuffer = file => {
return new Promise((resolve, reject) => {
var reader = new FileReader();
reader.onloadend = function(e) {
file[0].fileBuffer = e.target.result;
resolve(file);
};
reader.readAsArrayBuffer(file[0].fileObject);
});
};
getBatchFileBuffer(self.state.tempAttachment).then(function(
tempAttachment
) {
self.setState({ tempAttachment });
UploadFiles(
self.state.AppMainObject.ID,
getBatchFileBuffer(self.state.tempAttachment)
).then(function(UploadFilesFileURL) {
console.log(UploadFilesFileURL);
});
});
I think I know the solution, I was calling the "getBatchFileBuffer" twice. That was my mistake
I have a function that will determine if the gif is animated or non-animated. Everything is working fine, until i upload those gif to the server, and load it, the blob url is a empty string. How can i generate a blob url for this?
Due to the blob url being empty string, i get parameter 1 is not of type 'blob'
The function below determines if the gif is animated or not.
$scope.isNotAnimatedGIF = function(file) {
var reader = new FileReader();
return new Promise(function(resolve, reject) {
reader.onload = function (e) {
var gifInfo = gify.getInfo(reader.result);
if (gifInfo.images.length <= 1) {
file.animatedGIF = false;
resolve(true);
} else {
file.animatedGIF = true;
resolve(false);
}
}
reader.readAsArrayBuffer(file);
});
}
I am using Angular 1.4.10
Thank you !
You can use URL.createObjectURL() to create Blob url.
The URL.createObjectURL() static method creates a DOMString containing a URL representing the object given in the parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.
DEMO
function createbloburl(file, type) {
var blob = new Blob([file], {
type: type || 'application/*'
});
file = window.URL.createObjectURL(blob);
return file;
}
document.querySelector('#file').addEventListener('change', function(e) {
var file = e.currentTarget.files[0];
if (file) {
file = createbloburl(file, file.type);
document.querySelector('iframe').src = file;
//console.log(file)
}
})
<input id="file" type="file">
<iframe src=""></iframe>
try this reader.readAsDataURL(Blob|File).
you can find more from here