HTML5 - Create dynamically an image from a local path? - javascript

Is it possible to create an HTML image, if I have only a path to a local file? I tried to use a filereader, but the mere path does not work. how can I solve the issue?
JS
var reader = new FileReader();
reader.onload = {
$('#myImg').attr('src', e.target.result);
};
reader.readAsDataURL("file:///C:/Users/me/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg ");

This is a simple tool I have made for reading files in JavaScript:
Fiddle
The JavaScript code is:
var reader = new FileReader();
reader.onerror = function(ev) {
$('#output').html('=== Error reading file ===');
}
reader.onload = function(ev) {
$('#output').html(ev.target.result);
};
reader.readAsDataURL(e.target.files[0]);
When you select an image file it will present you with a base64 dataURI of the image.
I recommend not trying to select a file that's not an image, I don't know what'll happen.

something like this?
var x=document.createElement("img");
x.src="C:\data\images\test.jpg";
x.style.height="50px";
document.getElementById('whereimgoing').appendChild(x);
Also I should add that if this is on a website then it will depend highly on browser security

var reader = new FileReader();
reader.onload = function(e) {
$('#myImg').attr('src', reader.result);
};
reader.readAsDataURL("file:///C:/Your/path/msohtmlclip1/01/clip_image002.jpg");
Should be fine, if access to local files is granted (check your browser settings or try if it works when deployed on a server (either localhost or www.yourserver.com).. Local files can always cause some troubles as browser behave differently. Also try to not use the temp folder.

Related

Angular 7+: how to only allow upload of files with content in utf-8?

I am using angular 7+, I have a simple function to do the upload files and read their contents, but I would like to know how to identify the encode of document content, to only allow documents with encode utf-8.
async uploadFile(event) {
var document;
var reader = new FileReader();
let file = event.target.files[0];
reader.onload = ((file: any) => {
return (e: any) => {
document.description = e.srcElement.result;
document.title = title;
document.fileName = file.name;
}
})(file);
reader.readAsText(file);
}
Thanks.
Here is the documentation of FileReader.readAsText()
instanceOfFileReader.readAsText(blob[, encoding]);
To ensure that the uploaded file is in UTF-8, do :
instanceOfFileReader.readAsText(blob, 'UTF-8');
Know that UTF-8 is the default setting, so it should work, you could also do :
instanceOfFileReader.readAsText(blob);
If the encoding is not UTF-8, the read should fail. I've seen no documentation at all about that, considering this as the normative documentation.
You should try to upload a file having an other encoding to be sure of it.
There is no attribute called encoding or anything like it in FileReader documentation
There is no bulletproof technique to get the encoding of a text file. Anyhow, a library called jschardet tries to achieve this goal though.
function read(f) {
var reader = new FileReader();
reader.readAsText(f);
reader.onload = function(e) {
console.log(jschardet.detect(reader.result))
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jschardet/2.1.0/jschardet.min.js"></script>
<input type="file" onchange="read(this.files[0])"></input>

Using only pure javascript how to get file name, format and content of a browsed file

I need to get the name, format and content of a browsed file only, multiple files not required. Even I cant use any HTML5 API/jQuery. Could you please guide me, using only pure JavaScript how do I solve this.
Here is the fiddle:
[https://jsfiddle.net/summtz8m/][1]
After getting all I need to click ImportASN1 button to POST data in REST service.
Here is my HTML
<button class="ebBtn" id="importButt" name="importButt"><span>Import ASN1</span></button><input type="file" id="myfile" name="myfile"><p id="contents"></p>
Here is my JS
var file = document.getElemtById("myfile").files[0];
console.log(file);
if (file) {
// create reader
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
// browser completed reading file - display it
console.log(e.target.result);
};
}
Your current code runs on page load. But at that time the file input is not filled out yet! Instead, listen to the click event on the button, or the change event on the file input.
In addition, there is a typo: document.getElemtById should be document.getElementById. Use the developer console in your browser (F12 → Console in many browsers) to find these errors.
The file name will then be present in the file.name property.
<script>
document.getElementById("myfile").addEventListener('change', function(ev) {
var file = ev.target.files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function(e) {
console.log(file.name, e.target.result);
};
});
</script>

Is it possible to overwrite existing local xml file with javascript?

I have been successfully using FileReader to parse some XML data to HTML page from a local file. If I make changes to the DOM, I can successfully parse the data back to an XML file, but if I try to overwrite the file that was used to read, it does not successfully download. If I save the file with a different name, it successfully downloads.
I use FileReader like this from a browse/input selector:
function handleFileSelection(evt) {
var files = evt.target.files;
var url = window.URL.createObjectURL(files[0]);
reader = new FileReader();
reader.onload = function (e) {
Then if I make changes, I save the data like this:
var blob = new Blob(
arrayOfUnits,
{ type: "text/xml" }
);
window.navigator.msSaveBlob(blob, 'Units.xml');
I feel like the FileReader either has the file locked, or perhaps JavaScript cannot overwrite local files?
I have tried using: FileReader.abort() which seems to be like FileReader.close() in java, but this didn't fix my issue.
Any help is appreciated, I am new to using JavaScript with local file system.
FileReader won't write to the file system. You need FileWriter to do so.

How to hash the contents of a file uploaded in Meteor.js

I'm just starting out with Meteor and (and coding in general) I have done the tutorial projects and examples etc and am looking to start my own project. My project is I want users to be able to select a file on their computer with an field, user selects file, the contents of the file is read and the webpage provides a hash of the contents. Possible to be done clientside without the file being uploaded to a server?
A bit lost where I should be looking- HTML5 file-read API, cryptoJS, or something else? How would I go about providing that functionality in a webpage?
Yes, this can be done using the HTML5 FileReader API.
Template.fileUpload.helpers({
'change #file': function (e) {
var files = e.target.files;
var file = files[0];
var reader = new FileReader();
reader.onload = function() {
console.log(this.result);
}
reader.readAsText(file);
}
});

Javascript fileReader

I've been working on a page that aa user will be able to load some local files and basically stream them to the browser, I'm having problems with the below code in IE10, it runs through fine in IE10, firefox and chrome.
If I put it though an interval IE10 won't read it after the source file changes :(
however firefox and chrome can, anyone know of a workaround (besides don't use IE10)?
setInterval(updateLog, 5000);
function updateLog(){
for (j=0;j<LogList.length;j++){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById("LogList").innerHTML += e.target.result;
}
reader.readAsText(LogList[j].file);
}}
Thankyou for any help
Try this code:
setInterval(updateLog, 5000);
function updateLog(){
for (j=0;j<LogList.length;j++){
var reader = new FileReader();
reader.onload = function(e){
document.getElementById("LogList").innerHTML += "<pre>"+e.target.result+"</pre>";
}
reader.readAsText(LogList[j].file);
}}
and follow the link:
http://msdn.microsoft.com/library/ie/ms533897.aspx

Categories