I'm currently working on a Rails 6 application using trubolinks. I'm working on a function to reaplace an avatar placeholder with the image selected upon upload. However, something weird is happening I'm declaring two variables, one is stated with a value the over does not.
document.addEventListener('readystatechange', event => {
if (event.target.readyState === "complete") {
/**
* Display the image in the file input when added to the form.
* Replace avatar with image selected.
*/
const profileAvatarBlock = document.getElementById('profile-avatar');
function showImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
let avatarPreview = document.getElementById('profile-avatar-preview');
let img =avatarPreview.children[1].setAttribute("src", e.target.result);
debugger;
['width', 'height'].forEach(attribute => {
img.removeAttribute(attribute)
});
debugger;
};
reader.readAsDataURL(input.files[0]);
}
}
profileAvatarBlock.addEventListener('change', function() {
showImage(this);
})
}
});
At first I thought that it was because of turbolinks so I add "turbolinks:load", but this didn't change anything. When I check for avatarPreview I get back back in the debugger but when I check img I get undefined. if I run avatarPreview.children[1].setAttribute("src", e.target.result); I also get it returned but if I assigned it to img is not working.
Why I cant declare a variable inside the callback? I want to understand dont care much about getting it to work.
You are calling setAttribute to assign e.target.result to the src attribute of the element. Then, you are assigning the return value from that function (which is always undefined) to img.
Try instead:
let img = e.target.result
If you really want to get the value from the children, you can try
let img = avatarPreview.children[1].getAttribute('src')`
Related
$(document).on('change', '#id_edit_profile_photo', e => {
uploadPhoto(avatarElem, previewPPContainer, avatarUploadElem)
});
function uploadPhoto(elem, preview, uploadElem) {
elem.addClass('d-none');
preview.removeClass('d-none');
preview.find('img').attr('src', '');
let blobUrl = URL.createObjectURL(uploadElem.files[0]);
preview.find('img').attr('src', blobUrl);
// call this fuunction after completing the above task
ImageLoaded();
}
function ImageLoaded() {
_IMAGE_WIDTH = $("#drag-image").width();
_IMAGE_HEIGHT = $("#drag-image").height();
_IMAGE_LOADED = 1;
alert('Image Loaded');
}
The uploadPhoto function runs when value of the file input tag #id_edit_profile_photo changes. Inside the uploadPhoto blobUrl variable stores the url of the loaded file. The url is then set to an img tag. How do I allow the ImageLoaded function to run only after the img tag has loaded the image.
Any help is appreciated.
Thank you.
I'm using SixLabors.ImageSharp to crop images with Javascript JQuery and all is working rigth but when i need to get the image cropped i don't know how can i get the image without refresh the page and without do a POST.
I'm using Tutexchange tutorial and they obtain the image by a POST method (and i dont wanna do it like that) i think about run a method and with Blazor get the file encoded base64 but when i do it i cant get the reader.result because is inside the onloadend event.
How can i get a image blob without a POST method and without save the image in a folder to read with Blazor?
I tried passing the onloadend reader.result with a method and await with a bucle while to return it when is done but value never is different than null and i tested if the cropper work with a console.log() and all is right with it:
function InitializeCroppie(div_width, div_height) {
basic = $('#main-cropper').croppie
({
enableExif: true,
url: '/images/ChooseImage.png',
viewport: { width: div_width, height: div_height },
boundary: { width: div_width, height: div_height },
showZoomer: false,
format: 'png' //'jpeg'|'png'|'webp'
});
//Reading the contents of the specified Blob or File
function readFile(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#main-cropper').croppie('bind', {
url: e.target.result
});
}
reader.readAsDataURL(input.files[0]);
}
}
// Change Event to Read file content from File input
$('#select').on('change', function () { readFile(this); });
}
var returnThisValue;
async function GetImageCroped() {
returnThisValue = null;
var blob = await basic.croppie('result', 'blob');
var reader = new FileReader();
if (blob != null) {
reader.readAsDataURL(blob);
reader.onloadend = function () {
SetValue(reader.result);
console.log(reader.result);
}
}
while (returnThisValue == null) {
//Waiting...
}
return returnThisValue;
}
function SetValue(value) {
returnThisValue = value;
}
function GetImageValue() {
return returnThisValue;
}
If is impossible without a POST method how can i receive it without reload the page.
EDIT:
I'm doing some test to know if is possible that js let blazor know when put the image in the localStorage to get it synchronic way with Blazor.
AFTER TEST: I tried to get the image with Blazored.LocalStorage and i cannot Chrome has a problem with "big data".
You can add a JavaScript listener event. It will trigger another event when updating the localstorage. It should be loaded when the page is initialized.
var orignalSetItem = localStorage.setItem;
localStorage.setItem = function (key, newValue) {
var setItemEvent = new Event("setItemEvent");
setItemEvent.key = key;
setItemEvent.newValue = newValue;
window.dispatchEvent(setItemEvent);
orignalSetItem.apply(this, arguments);
};
window.addEventListener("setItemEvent", function (e) {
if (e.key == 'image') {
var _this = localStorage.getItem("image")
if (_this != e.newValue) {
console.log(e.newValue)
//call method which sends this blob
} else {
console.log('key->');
console.log(e.newValue)
}
}
});
Trigger method.
$('#btnupload').on('click', function ()
{
basic.croppie('result', 'blob').then(function (blob)
{
localStorage.setItem('image', blob)
//...
});
});
You can see my demo here.
I have simple html:
<input type="file" id="files" multiple>
<div class="preview"></div>
So when user choose image he can preview it, and when he click on upload button and add another images he also will see in preview that this images was added.
My problem that I want to add for each appended div a data attribute with index value of it.
My js:
$("#files").on("change", previewFiles);
function previewFiles() {
var preview = $('.preview');
var files = $(this)[0].files;
function readAndPreview(file) {
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.onload = function(event) {
var conta = $('<div></div>').addClass("preview__image");
var img = $('<img>');
img.attr('src', event.target.result);
img.attr('title', file.name);
img.appendTo(conta);
conta.appendTo( preview );
}
reader.readAsDataURL(file);
}
}
if (files) {
[].forEach.call(files, readAndPreview);
}
var child = preview.find(".preview__image");
child.each(function(index) {
$(this).attr("data-index", index);
});
}
In my code there is a problem, when user choose image for the first time, data attribute is not created, if he upload image for the second time, appended before div or divs which was first will get data attribute, but new appended div or divs not.
What am I doing wrong?
P.S. I know that my input is clearing its value before uploading another images. All I want is related to preview block. Thanks in advance.
This is happening because you're trying to talk to an element that is not yet in the DOM - because onload is an asynchronous event.
In other words, the element with .preview__image does not get added until AFTER you're running preview.find('.preview__image').
There's various ways round this. One would be to use Promise.all() and convert your reader function to return a promise that gets resolved only once the onload callback has completed.
We could attach a then() to Promise.all, but more elegant would be to use await, which means we'll need to make your outer function asynchronous, by prefixing async to it.
All in all (I've commented the key changes):
$("#files").on("change", previewFiles);
async function previewFiles() { //<-- prefix with async
var preview = $('.preview');
var files = $(this)[0].files;
function readAndPreview(file) {
return new Promise(res => { //<-- reader func now returns promise...
if ( /\.(jpe?g|png|gif)$/i.test(file.name) ) {
var reader = new FileReader();
reader.onload = function(event) {
var conta = $('<div></div>').addClass("preview__image");
var img = $('<img>');
img.attr('src', event.target.result);
img.attr('title', file.name);
img.appendTo(conta);
conta.appendTo( preview );
res(); //...which is resolved once onload is complete
}
reader.readAsDataURL(file);
}
});
}
//now let's have a master promise that waits for the sub-promises to resolve
await Promise.all([...files].map(file => readAndPreview(file)));
//now we can talk to the updated DOM
var child = preview.find(".preview__image");
child.each(function(index) {
$(this).attr("data-index", index);
});
}
I'm having a problem with the Javascript File API. First I'm checking if a form input is valued, and if the form input type=file name is image, I want it to get the image:
function checkIfValued() {
$("form input, textarea").change(function() {
// ifs ....
else if (name === "image") {
checkQrCode();
}
// else ifs ....
});
}
Getting the image:
function checkQrCode(evt) {
var qrcode = evt.target.files[0]; // create a FileList and take the first one
if (!qrcode.type.match("image.*")) { // check to see if it is an image
var $parentDiv = $(this).parent().parent();
$parentDiv.removeClass("has-success");
$parentDiv.addClass("has-error");
return;
}
var reader = new FileReader(); // create a FileReader
reader.onload = function (evt) {
var img = new Image(); // create a new image
img.src = event.target.result; // set the src of the img to the src specified
if ($("#qrcode").siblings().length != 0) { // if qrcode has siblings (function already executed)
$("#qrcode").siblings().remove(); // remove the siblings
}
$("#qrcode").parent().append(img); // append the img to the parent
$("#qrcode").siblings("img").addClass("img-thumbnail");
$("#qrcode").siblings("img").css("float", "left");
}
reader.readAsDataURL(qrcode);
}
When I used :
$("#qrCode").change(checkQrCode);
It worked, but when I use the first code it doesn't. I guess it has something to do with the event in the checkQrCode function (in the last code, the event is tied directly to the function and in the second code it has an if statement in the way).
Anyway, how can I fix it and if someone could explain the event/evt option, it would be very appreciated.
Your checkQrCode function expects to receive the triggered event, which is given as an argument in the event callback.
When you call it like this:
$("#qrCode").change(checkQrCode);
... then that even is being passed to the function by the callback. However in your first example you're ignoring the event and calling your event-expecting function with no arguments.
You'd want it to look more like this:
$("form input, textarea").change(function(evt) {
// ...
checkQrCode(evt);
How can I check if a picture is already loaded?
image.src = ay.url_static + 'uploads/apps/' + thumbnail.uid + '.png';
image.onload = function(e)
{
// [..]
};
I know how to trigger a callback upon image is loaded, but how do I check if picture is loaded at the moment?
I'm not sure what you want, but from what I understand you need to know if an image is loaded at any moment in time, right?
I've one function do check if the image is valid. You can use it to see if the image is already loaded also if you want. If you don't want to know if the image is valid, you can use only the img.complete property.
function IsImageLoaded(img) {
if (!img.complete) {
return false;
}
if (typeof img.naturalWidth != "undefined" && img.naturalWidth == 0) {
return false;
}
return true;
}
Set image.loaded = false, and then set image.loaded = true in your onload callback and check that property later?
Or image.complete seems like a legit property, if not W3C.
assuming you're using jQuery...
image.onload = function(e)
{
$(this).data({loaded: true});
};
later...
if($(yourImage).data('loaded')) {
// it's loaded!
} else {
// it's not
}
jQuery's .data() is great for setting variables specific to elements.