I've been trying to piece together a combination of HTML5 video tag + the FileReader API but I haven't figured out how to get the dimensions of a video that a user is providing from their own computer.
Here is what I am referencing for width/ height:
HTML5 Video Dimensions
<video id="foo" src="foo.mp4"></video>
var vid = document.getElementById("foo");
vid.videoHeight; // returns the intrinsic height of the video
vid.videoWidth; // returns the intrinsic width of the video
But I want to know if it's possible to do this with a file from a user's computer (that they have selected via a normal input html tag).
Thanks!
A bit unclean solution using basic FileReader + Data URL.
<html>
<head>
<style>
div {
margin: 20px;
}
</style>
</head>
<body>
<h1>Get Dimensions</h1>
<div>
<label for="load-file">Load a file:</label>
<input type="file" id="load-file">
</div>
<div>
<button type="button" id="done-button">Get me dimensions</button>
</div>
<script src="//cdn.jsdelivr.net/jquery/2.1.4/jquery.js"></script>
<script>
(function ($) {
$('#done-button').on('click', function () {
var file = $('#load-file')[0].files[0];
var reader = new FileReader();
var fileType = file.type;
console.log("type", fileType);
reader.addEventListener("load", function () {
var dataUrl = reader.result;
var videoId = "videoMain";
var $videoEl = $('<video id="' + videoId + '"></video>');
$("body").append($videoEl);
$videoEl.attr('src', dataUrl);
var videoTagRef = $videoEl[0];
videoTagRef.addEventListener('loadedmetadata', function(e){
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});
}, false);
if (file) {
reader.readAsDataURL(file);
}
});
})(jQuery);
</script>
</body>
</html>
Here is a simple and fast solution to get a video's size before upload.
It doesn't require any dependency.
const url = URL.createObjectURL(file);
const $video = document.createElement("video");
$video.src = url;
$video.addEventListener("loadedmetadata", function () {
console.log("width:", this.videoWidth);
console.log("height:", this.videoHeight);
});
const onSelectVideo = (files) => {
const file = files[0];
const url = URL.createObjectURL(file);
let videoId = "videoMain";
const video = document.createElement("video");
const body = document.getElementsByTagName("body");
video.setAttribute("src", url);
video.setAttribute("videoId", videoId);
body[0]?.append(video);
let videoTagRef = document.querySelector("[videoId='videoMain']");
videoTagRef.addEventListener("loadedmetadata", function (e) {
console.log(videoTagRef.videoWidth, videoTagRef.videoHeight);
});}
I have an angular JS app on which I download a pdf file and then create a blob from it. Like this:
vm.fileData = new ApiDownloadFile({fileId: 1});
return vm.fileData.$query()
.then(function(response) {
try{
console.log("Try..." + new Date());
$log.log(response);
var arrayBufferView = new Uint8Array(response.Body.data);
$log.log(arrayBufferView);
var file = new Blob( [arrayBufferView], {type: response.ContentType});
var link = document.createElement('a');
link.href = window.URL.createObjectURL(file);
link.download = response.fileName;
link.click();
console.log("After..." + new Date());
console.log("GENERATED LINK: "+link.href);
//PDFObject.embed(link.href, "#my-container");
}
catch(e) {
console.log("Execption...");
// TypeError old chrome and FF
window.BlobBuilder = window.BlobBuilder ||
window.WebKitBlobBuilder ||
window.MozBlobBuilder ||
window.MSBlobBuilder;
if (e.name == 'TypeError' && window.BlobBuilder) {
var bb = new BlobBuilder();
bb.append(response.Body.data);
var file = bb.getBlob("image/jpeg");
var link = document.createElement('a');
link.href = window.URL.createObjectURL(file);
link.download = "1.jpg";
//link.click();
}
else if (e.name == "InvalidStateError") {
// InvalidStateError (tested on FF13 WinXP)
var jpeg = new Blob(response.Body.data, {type: "image/jpeg"});
}
else {
// We're screwed, blob constructor unsupported entirely
}
}
},function(err) {
$log.log(err);
});
};
I can donwload the file easily by creating an 'a' element and then clicking it. However I would like to be able to either download it on the browser or render it on an Iframe I have in my view. The logic should be something like this:
if download == true:
create the <a> element and click it to download file.
else:
render the pdf on an iframe and don´t download on browser.
However I´m not able to get the blob URL to be rendered on the Iframe. I´m using PDFObject to visualize the PDF. Can anyone help me achieve this?
Do this in your page
<iframe ng-if="IframeManager.Url" ng-src="{{ IframeManager.Url }}"></iframe>
Then in your controller add
$scope.Download = true;
$scope.IframeManager = {
Show: function (url) {
$scope.IframeManager.Url = url;
},
Hide: function () {
$scope.IframeManager.Url = null;
}
};
So if you want to show the file you do your preview routine blob conversion and get the url
if ($scope.Download) {
var link = document.createElement('a');
link.href = window.URL.createObjectURL(file);
link.download = response.fileName;
link.click();
console.log("After..." + new Date());
console.log("GENERATED LINK: "+link.href);
} else {
$scope.IframeManager.Show(window.URL.createObjectURL(file));
}
How can I upload a JSON file on some click on a button on my web page say "import", and use it to store in a variable to use and update it using JavaScript.
I have gone through the other posts but could not find any answer.
I am saving the JSON variable using this function:
function save(filename, data){
if(!data) {
alert('error : No data')
return;
}
if(typeof data === "object"){
data = JSON.stringify(data, undefined, 4)
}
var blob = new Blob([data], {type: 'text/json'}),
e = document.createEvent('MouseEvents'),
a = document.createElement('a')
a.download = filename
a.href = window.URL.createObjectURL(blob)
a.dataset.downloadurl = ['text/json', a.download, a.href].join(':')
e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
a.dispatchEvent(e)
}
This is working fine and it downloads the file on clicking another button say "export".
How upload this file back and make a JSON variable of this file data?
Without server side code, your best approach may be to provide a textarea element for the user to copy/paste the JSON into, and then parse it using JSON.parse.
You could even go as far as to use something like Ace Editor to provide syntax highlighting for JSON - you can see it in action on the Ace Editor Kitchen Sink Demo - select JSON from the dropdown list in the top left.
Edit:
Turns out I was wrong. Here is a fiddle demonstrating the FileReader in use, which is exactly what you need:
https://jsfiddle.net/Ln37kqc0/
Here is the code:
Javascript:
document.getElementById('import').onclick = function() {
var files = document.getElementById('selectFiles').files;
console.log(files);
if (files.length <= 0) {
return false;
}
var fr = new FileReader();
fr.onload = function(e) {
console.log(e);
var result = JSON.parse(e.target.result);
var formatted = JSON.stringify(result, null, 2);
document.getElementById('result').value = formatted;
}
fr.readAsText(files.item(0));
};
HTML:
<input type="file" id="selectFiles" value="Import" /><br />
<button id="import">Import</button>
<textarea id="result"></textarea>
I have got a way to use the uploaded json file, here is the way i found.
$("#inputFile").change(function(e) {
onChange(e);
});
function onChange(event) {
var reader = new FileReader();
reader.onload = onReaderLoad;
reader.readAsText(event.target.files[0]);
}
function onReaderLoad(event){
//alert(event.target.result);
var obj = JSON.parse(event.target.result);
alert(obj);
}
Basic upload File:
<input id="contentFile" type="file" accept="application/json" />
document.getElementById('contentFile').onchange = function(evt) {
try {
let files = evt.target.files;
if (!files.length) {
alert('No file selected!');
return;
}
let file = files[0];
let reader = new FileReader();
const self = this;
reader.onload = (event) => {
console.log('FILE CONTENT', event.target.result);
};
reader.readAsText(file);
} catch (err) {
console.error(err);
}
}
[2021] Promise based approach
As mentioned here, you can make use of the newer blob api to easily get the file's value via:
await blob.text()
const getJsonUpload = () =>
new Promise(resolve => {
const inputFileElement = document.createElement('input')
inputFileElement.setAttribute('type', 'file')
inputFileElement.setAttribute('multiple', 'true')
inputFileElement.setAttribute('accept', '.json')
inputFileElement.addEventListener(
'change',
async (event) => {
const { files } = event.target
if (!files) {
return
}
const filePromises = [...files].map(file => file.text())
resolve(await Promise.all(filePromises))
},
false,
)
inputFileElement.click()
})
document.getElementById('upload-button').onclick = async () => {
const jsonFiles = await getJsonUpload()
console.log({jsonFiles})
}
<button id="upload-button">
Upload
</button>
Try this, works perfect
handleUploadFile = async(doc) => {
let file = doc.target.files[0]
let reader = new FileReader(file)
// await reader.readAsDataURL(file)
reader.readAsText(file)
reader.onload = async(e) => {
let aaa = e.target.result
let content = await JSON.parse(aaa)
console.log(content)
}
}
With the newer Blob API, the current top answer can be simplified by skipping the FileReader:
document.getElementById('import').onclick = function() {
var files = document.getElementById('selectFiles').files;
console.log(files);
if (files.length <= 0) {
return false;
}
files[0].text().then(function(text) {
console.log(text);
var result = JSON.parse(text);
var formatted = JSON.stringify(result, null, 2);
document.getElementById('result').value = formatted;
})
};
To explain the code a little: files[0] itself is a File object, which inherits from Blob, so files[0].text() is an asynchronous function that reads the content of the file into a string.
You may want to add the draggable option
Firs create your HTML
<div class="drag" id="drag_area">
<input class="box_file disabled" type="file" name="files[]" id="file" data-multiple-caption="{count} files selected" multiple />
<label for="file"><strong>Choose save file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
</div>
Than write out your JS
$("#drag_area").on('drag dragstart dragend dragover dragenter dragleave drop', function (e) {
e.preventDefault();
e.stopPropagation();
})
.on('dragover dragenter', function () {
$("#drag_area").addClass('dr_active');
// this is needed if you wish to style your drag area on drag events
})
.on('dragleave dragend drop', function () {
$("#drag_area").removeClass('dr_active');
// this is needed if you wish to style your drag area on drag events
})
.on('drop', function (e) {
let droppedFiles = e.originalEvent.dataTransfer.files;
let reader = new FileReader()
reader.readAsDataURL(droppedFiles[0])
reader.onloadend = function () {
$.ajax({
url: reader.result,
success: function (data) {
console.log(JSON.parse(data)); // This is your JSON
},
error: function (request, error) {
cliLog(2, "Upload", "Cant upload save file")
}
});
}
}),
I'd made a more general approach with support to customize upload button title and callback when load is done:
function uploadJson(id, callback) {
document.getElementById(id).onchange = function(evt) {
try {
let files = evt.target.files;
if (!files.length) {
alert('No file selected!');
return;
}
let file = files[0];
let reader = new FileReader();
const self = this;
reader.onload = (event) => {
callback(event.target.result);
};
reader.readAsText(file);
} catch (err) {
console.error(err);
}
}
}
uploadJson('importJson', function (json) {
console.log(json);
});
<button onclick="document.getElementById('importJson').click()">import json</button>
<input id="importJson" value="import json" type="file" accept="application/json" style="display:none" />
I have this function which generates the File URL using createobjectURL and works when I use the normal input file tag.
I am trying to implement the same using dropzone.js but when I drop the file it starts
showing the upload progress bar although I haven't defined any action.
How can i obtain the URL using dropzone.js?
Javascript
function localFileVideoPlayerInit(win) {
var URL = win.URL || win.webkitURL,
displayMessage = (function displayMessageInit() {
return function displayMessage() {
alert("error");
};
}()),
playSelectedFile = function playSelectedFileInit(event) {
var file = this.files[0];
var type = file.type;
var videoNode = document.querySelector('video');
var canPlay = videoNode.canPlayType(type);
canPlay = (canPlay === '' ? 'no' : canPlay);
if (canPlay === 'no') {
displayMessage();
}
}
};
var fileURL = URL.createObjectURL(file);
videoNode.src = fileURL;
},
inputNode = document.querySelector('input');
if (!URL) {
displayMessage('Your browser is not ' + 'supported!', true);
return;
}
inputNode.addEventListener('change', playSelectedFile, false);
}
HTML
<form action="" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</form>
Seems you would have to reference the variable fileURL, and use javascript to dynamically set the action of the form.
I got a small script to split the text inside 'var foo' after every 4 characters. It is working fine.
but my actual data is in a text file say 'a.txt'. How do I take this entire file text in 'var foo'. and write the split output to another text file?
var foo = "this is sample text !!!";
var arr = [];
for (var i = 0; i < foo.length; i++) {
if (i % 4 == 0 && i != 0)
arr.push(foo.substring(i - 4, i));
if (i == foo.length - 1)
arr.push(foo.substring(i - (i % 4), i+1));
}
document.write(arr);
console.log(arr);
To get the content of the file you need to select a file using an input tag.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="input" type="file" accept="text/plain">
<script src="script.js"></script>
</body>
A good moment to read the content of the file is in the change event.
const input = document.querySelector("#input");
input.addEventListener("change", () => {
const file = input.files.item(0);
});
To read the content of the file as a string you need to convert it.
function fileToText(file, callback) {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
callback(reader.result);
};
}
The content of the file as a string will be available to the the callback function. You can create a link and use the click event to download the string into a text file.
function save(content, fileName, mime) {
const blob = new Blob([content], {
tipe: mime
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
}
Here is the complete code
const input = document.querySelector("#input");
input.addEventListener("change", () => {
const file = input.files.item(0);
fileToText(file, (text) => {
save(text, "fileName.txt", "text/plain");
});
});
function fileToText(file, callback) {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
callback(reader.result);
};
}
function save(content, fileName, mime) {
const blob = new Blob([content], {
tipe: mime
});
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = fileName;
a.click();
}
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
</head>
<body>
<input id="input" type="file" accept="text/plain">
<script src="script.js"></script>
</body>
You can read more about manipulating files in JavaScript here: https://www.html5rocks.com/en/tutorials/file/dndfiles/
Solution to this helped me :
How do I load the contents of a text file into a javascript variable?
var client = new XMLHttpRequest();
client.open('GET', '/foo.txt');
client.onreadystatechange = function() {
alert(client.responseText);
}
client.send();