We Keep Coding

Get base64 in good old IE11 (Not using promises)

I have already implemented a method to get a base64 from a file using promises. Which runs fine in edge, chrome and firefox.
Problem is that I also have to make it work in internet explorer 11. Which does not like promises I found out. Problem is that IE11 is using ES5 and Promises came in ES6. (Please correct me if i'm wrong)
So I have 3 options as I see it.
Try to rewrite the code using callbacks so that IE11 knows the syntax.
Using babel (Which I haven't tried but read it was an option)
Using bluebirdjs (Which also I haven't tried but read it was an option)
Which is the best option for me?
Here are my code I need to change:
$('#fileselected').change(function (e) {
var fileList = document.getElementById('fileselected').files;
var file = fileList[0]; // User can only choose one file at a time
getBase64(file).then(
data => {
var fileObj = { name: file.name, base64: data };
postFilesToUpload.push(fileObj); // Collecting the files, if user wants to add multiple
}
);
$("#postfilesadded").append("<li><h5>" + file.name + "</h5></li>"); // Show the user which files he have selected to upload
});
This method is using another method which I need to change:
function getBase64(file) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => resolve(reader.result);
reader.onerror = error => reject(error);
});
}

Pasting large files

I'm writing a plugin to handle file uploads. I thought implementing a paste feature would be awesome (how often have you event just wanted to paste instead of having to open a photo editor and then save it as file and then upload, but I digress). What I'm doing so far works, except for when the file being pasted becomes too big. I cannot tell you what size 'too big' is, because I'm doing a screenshot selection and saving it to the clipboard.
My current code looks like
document.getElementById('AJS').onpaste = function (e) {
var items = (e.clipboardData || e.originalEvent.clipboardData).items,
blob = items[0].getAsFile();
if (blob && blob.type.match(T.s.accept) && T.currentlength < T.s.maxFiles) {
T.process(param1, param2, param3, param4, items[0].getAsFile());
}
};
T.process
T.process = function (file, i, changing, target, pasteblob) {
var fr = new FileReader();
fr.onload = function (e) {
var blob = pasteblob || new Blob([e.target.result], {type: file.type});
var dataURL = (win.URL || win.webkitURL).createObjectURL(blob);
var index = changing ? i : T.currentlength;
var filedata = {};
if (file.type.match('image/*')) {
var img = new Image();
img.onload = function () {
// Doing stuff
};
img.src = dataURL;
} else {
// Doing stuff
}
};
fr.readAsArrayBuffer(pasteblob || file);
};
For larger files, the blob from blob = items[0].getAsFile() returns a size of 0. Has anyone else experienced this problem and how have you been able to overcome it?
Note: I'm using the latest Chrome on Ubuntu 14.04

Although I don't have any references to anyone other than my own personal research into the matter, it seems as if there is a bug on the Ubuntu version of chrome that prevents users copying and pasting using the native JS api. If you attempt to paste a screenshot in a GMail message using Ubuntu Chrome, you get an error, but this error doesn't come up in any other version of chrome. It was also the same for my code above as well. I tested it on native windows and OS X environments running chrome that were pointing to my machine, and pasting using this script worked just fine!

HTML5 - Create dynamically an image from a local path?

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.

WebShims is not working in IE9 for FileReader

From the WebShims documents here at http://afarkas.github.io/webshim/demos/demos/filereader.html it is giving me an example of using FileReader with WebShims. Following it I have this code now
<input class="ws-filereader" id="userFiles" multiple type="file"/>
//Added Mordenizr and JQuery and WebShims library
$.webshims.polyfill();
$(function()
{
$('#userFiles').on('change', function (evt)
{
var reader, file;
reader = new FileReader();
reader.onload = function (evt)
{
var fileData = evt.target.result;
};
file = $(this).prop('files')[0];
reader.readAsDataURL(file);
});
});
When I run this in IE9, It enters the code on change of userFiles but when I call to get
console.log($(this).prop('files').length);
It gives 0. What's wrong with it?
When I turn on
$.webshims.setOptions('debug', true);
console gives me
Unable to get value of the property 'input': object is null or undefined.
There is a similar issue posted on its quesions https://github.com/Jahdrien/FileReader/issues/46 and it says that WebShims support IE9 for FileReader

The problem is that the files API was not introduced in IE until IE10:
http://msdn.microsoft.com/en-us/library/ie/hh673542%28v=vs.85%29.aspx
This list of polyfills might be of use finding a workaround:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills#wiki-file-api

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