We Keep Coding

Cannot open blob file on chrome v.71 ios 12+

Already used this code, cannot open the blob url in chrome ios, the result is just: about:blank.
var reader = new FileReader();
var out = new Blob([this.response], {type: 'application/pdf'});
reader.onload = function(e){
window.location.href = reader.result;
};
reader.readAsDataURL(out);
Also already tried using FileSaver.js, still cannot open it.
Any idea for this case/issue?

I am occurring the same problem in a nearly close-phase project.
Very depressing that it blocks my project schedule..
However, i found that the Chrome IOS v71 is affecting the FileSaver and MIME type but still no idea how to solve it. I am going to explore the compatibility of FileReader

Client sideFile Reading for all browsers using Javascript

I am trying to read a file on client side using File API and it is working fine with Chrome and Mozilla. But it fails on IE9.
The application must be supported on IE9 or above as per the requirements specification.
$(document).ready(function () {
$("#btnUpload").on("change", function (id) {
var data = id.target.files[0];
var reader = new FileReader();
reader.readAsText(data, "UTF-8");
reader.onload = function (e) {
var text = reader.result;
}
Is there a way I can write a generic code,supported by all browsers including IE and safari ?

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.

Display image with JavaScript FileReader

I'm trying to display an image before uploading it via javascript / jQuery.
I'm executing this code in the ADD-Method of the jQuery Fileuploader. The data-attribute provides me with the file
var reader = new FileReader();
reader.onload = function(e) {
var img = $('<img></img>');
img.attr('src', e.target.result);
$("#general_dropable").append(img);
}
reader.readAsDataURL(file); // Retrieved from the data-attribute of the ADD-Method of the jQuery Fileuploader
Displaying works fine. When I drag the image in Google-Chrome, however, I'm getting this error from Chrome:
He's dead, Jim! Either Chrome ran out of memory or the process for the webpage was terminated for some other reason. To continue, reload or go to another page.
Dragging the image in Firefox works fine.
The image source is the actual source code of the image, not an absolute path.
Is there a workaround to this bug?
Thank you very much.
Edit
You can see a live example here:
http://jsfiddle.net/Fractaliste/LvsYc/1669/
Just drag the image after uploading and the error will appear (In Chrome)

I just found this question on stackoverflow. But looking at the jsfiddle I don't get this exception in Chrome any more (Chrome 46). To me it looked like you forgot to define the "file" variable in your function when you write it to the DOM (reader.readAsDataURL). But in your jsfiddle it seems fixed:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#target').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
.. this is not my answer as it was fixed already in jsfiddle ... but as I was searching for a solution for my problem i wanted to clarify things here as this might help others.

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