I have a file upload control that reads TXT file and load editBox with file content. The code blow works fine for onChange event for file upload control. But it I want to show loading gif icon or hourglass icon while it's loading a large data. E.g. if I try to load 3Mb file with about 130K lines it takes few seconds to appear in inputUsers edit box and then still loading the data. While this time users are able to click other controls or close the page. So how do I show loading icon when I call reader.readAsText(file); ???
var fileUploadControl = dojo.query("[id$=':fileUploadControl']")[0];
var file = fileUploadControl.files[0];
var reader = new FileReader();
reader.onload = function(e) {
dojo.query("[id$=':inputUsers']")[0].value = reader.result;
}
reader.readAsText(file);
NOTE: well, same happens when you copy/paste a very large text into multiline editBox. I need to show something while the list is loading
Have a try of this code
reader.onloadstart = function(event) {
ShowLoadingBar();
};
reader.onprogress = function(event) {
if (event.lengthComputable) {
if (LoadingBarVisible)
ShowLoadingBar();
AddProgress();
}
};
reader.onloadend = function(event) {
LoadingBarComplete();
};
Related
I am using primeng p-fileupload to upload images, but I want to do programmatically to preview the image onUpload event, after uploading I am getting the image URL path as
blob:https://primeng-breadcrumb-demo-ntijjo.stackblitz.io/1c2dadec-e61b-42b7-8c6b-c56d342fb136, but the image is not showing ...so after inspecting the image its displaying
unsafe:blob:https://primeng-breadcrumb-demo-ntijjo.stackblitz.io/6a7a24d7-33fc-4738-b7f8-93b4b6007123
I am attaching the stack blitz URL for reference:-
https://stackblitz.com/edit/primeng-breadcrumb-demo-ntijjo?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts
Please help me with these issues.
Thanks in advance.
You can use the FileReader API to read the contents of the file and then set it as an src.
For example:
onUpload(e## Heading ##vent) {
const reader = new FileReader();
reader.onload = (e: any) => {
// Set image src
this.imageSrc = e.target.result;
}
reader.readAsDataURL(event.files[0]);
}
Then in your template:
<img [src]="imageSrc" />
I have this line of HTML in my code:
<img src="https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png" id="site-logo" alt="Mundo New Impact">
and what I want to do is that, everytime an user loads any page from my website, this img loads a .gif file (which is: https://im3.ezgif.com/tmp/ezgif-3-d8b13ba46bfb.gif) for a couple of seconds, enough for its animation to finish, and then replace this .gif file to the original .png file.
I tried using this piece of javascript code, but it doesn't work:
function play(){
var img = document.getElementById("site-logo");
if (img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png"){
img.src = "https://im3.ezgif.com/tmp/ezgif-3-d8b13ba46bfb.gif";
}else{
img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
}
setTimeout(function(){end()},10000);
}
function end(){
document.getElementById("site-logo").src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
}
What am I doing wrong? I am a total noob so help me please!
You need to call play()in order to run the function.
You also have mistakes like if (img.src = ... instead of if (img.src == ....
I would work with event handlers, like, show the GIF animation and when the document ready event triggers, change the GIF to a different image.
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var img = document.getElementById("site-logo");
img.src = "https://mundonewimpact.com.br/wp-content/uploads/2018/10/MNI-Logo-3.png";
});
</script>
I need to load a file (either jpg or pdf) into a popup as a preview. The extension of the file is not given in the URL.
The point is that as long as it is an image the file need to exactly fit into the popup and because of that I'd like to output an image tag with the external file. If its a pdf I'd like to output an iframe (we are requiring the browser to have a pdf-plugin).
To achieve this i wrote the following code in jQuery:
var src = "http://localhost/test/js/embed/test";
var popup = $("#popup");
var previewImage = $('<img style="width:100%" id="previewImage" />');
var previewFrame = $('<iframe id="previewFrame"></iframe >');
previewFrame.on("load", function() {
//alert("frame loaded");
});
previewFrame.on("error", function() {
//alert("frame error");
});
previewImage.on("load", function() {
//alert("img loaded");
popup.append(previewImage);
});
previewImage.on("error", function() {
//alert("img error");
previewFrame.attr("src", src);
popup.append(previewFrame);
});
previewImage.attr("src", src);
Looking at the inspector i can see that, as long as a pdf is loaded, 2 requests are made for the file. Can I somehow change the code so that always only one request is made or are the 2 requests an issue anyway (will the second request take the file from the cache)?
Thanks in advance
I try using this jQuery cropper http://fengyuanchen.github.io/cropper/#examples , but there isnt any way to upload an image from your pc to cropper it, anyway the plugin page says that i have to upload using HTML5 FileReader object.
I try to do as follows:
HTML code:
<img id="cropper">
<input id="inputImage" name="image" type="file" accept="image/*">
Javascript code:
$(function() {
var input = event.target;
var reader = new FileReader();
reader.readAsDataURL(input.files[0]);
reader.onload = function()
{
var dataURL = reader.result;
$("#cropper").attr("src", dataURL);
};
});
Now thatIf you run the code it works perfectly but when i try to modify the plugin src image attribute it doesnt works :(
any ideas? (sorry for my bad english)
I've got some functionality on my site where I initially show a static image, then when clicked I show a loading image until an mage variable has been loaded with a gif at which time I show the gif.
It works nicely as can be seen here
http://www.lazygamer.net/xbox-360/has-watchdogs-been-downgraded-since-e3-2012/
However what I'd like to do is update a label with the progress of the loading. I tried the following in my click event to change the image
var img = new Image();
var $el = jQuery(this);
img.onprogress = function(e) {
if (e.lengthComputable)
$mydiv.html(e.loaded / e.total * 100);
}
img.src= 'http://myfile.com/test.gif';
but the onprogress simply doesn't fire ever.
I don't get any errors in the console either, it's just ignored?