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});
};
};
}
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"/>
I want to set state, but this.state is not working, can anyone please check this code, and help me what's issue in that, here is my code
save_import_permit() {
//alert('sdsdsd');
var file_name = jQuery('input[type=file]').val().split('\\').pop(); //jQuery('#permit_csv_file').prop('files')[0];
let files = jQuery('input[type=file]')[0].files[0];
console.log(files);
let reader = new FileReader();
let data = [];
reader.readAsDataURL(files);
reader.onload = function(e) {
console.log(e.target.result);
data.result = e.target.result;
data.action = 'Permity::saveImportCsvFile';
const url = 'admin-ajax.php';
const formdata = "file="+data.result+"&action="+data.action;
this.state({loading:'loading_show'})
return post(url,formdata,function (r) {
this.state({loading:'loading_hide'});
alert(r.data.msg)
}.bind(this));
}.bind(this);
}
You shouldn't attribute a value to the state using this.state, you should always use this.setState(), wichs is a build-in function of the react framework. Check this link to know better.
So you need to change
this.state({loading:'loading_show'})
to
this.setState({loading:'loading_show'})
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'm trying to encrypt a video using the CryptoJS library. The goal is to encrypt it and store it in Firebase Storage. Later, when you want to visualize, it is decrypted and added as an url to the HTML video tag. I can't get the video displayed after decrypting it, any idea of what the problem is? I have the feeling that the problem is with treating the output of the cipher as a string. I don't know in what way I should treat it so that it continues to maintain the properties of a video file. Thanks in advance.
The current code is:
//Encrypt and upload function
function almacenarFicheroGrabacionVideo(file) {
let storageRef = firebase.storage().ref('videos/' + file.name);
let reader = new FileReader();
reader.onload = function () {
let read = reader.result;
let task = storageRef.putString(CryptoJS.AES.encrypt(read, getCookie('key')).toString());
task.on('state_changed', function progress(snapshot) {
}, function error(err) {
console.log(err);
}, function complete() {
console.log("fichero subido");
});
};
reader.readAsText(file);
}
//Decrypt and visualize video
$scope.verVideo = function() {
firebase.storage().ref('videos/').child('Blurred Bokeh Video 2.mp4').getDownloadURL().then(function (url) {
fetch(url)
.then(res => res.blob()) // Gets the response and returns it as a blob
.then(blob => {
let reader = new FileReader();
reader.onload = function () {
let fileDown = CryptoJS.AES.decrypt(reader.result, getCookie('clave')).toString(CryptoJS.enc.Utf8);
var videoNode = document.getElementsByTagName('video')[0];
let blob = new Blob([fileDown], {type: "video/mp4"});
let url = URL.createObjectURL(blob);
let element = document.createElement('a');
element.setAttribute('href', url);
element.setAttribute('download', 'Blurred Bokeh Video 2.mp4');
element.style.display = 'none';
document.body.appendChild(element);
element.click();
document.body.removeChild(element);
};
reader.readAsText(blob);
});
}).catch(function (error) {
// Handle any errors
console.log(error);
});
};