Alert message and image loader dialog

How to modificate next code to get alert message before image browser widow  appears?
 Variable CanEditProject is false.
document.getElementById('imgLoader').addEventListener("change", function(e) {
 if  (CanEditProject == true)
   {
       //alert("CanEditProject");
   }else{
       alert("You have to be logged to perform this operation.");
      return;
   }
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(f) {
        
        var data = f.target.result;
        fabric.Image.fromURL(data, function(img) {
            var oImg = img.set({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height,
                selectable:false,
                id:document.getElementById("selectProjectID").value+"imageID"
            });
             canvas.setBackgroundImage(oImg).renderAll();
         //canvas.add(oImg).sendToBack().renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);
});

Open in new window

Ivan GolubarAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michael VasilevskySolutions ArchitectCommented:
Are you saying when CanEditProject is false the lines below the return still run or something else?

Have you tried like this:

document.getElementById('imgLoader').addEventListener("change", function(e) {
 if  (CanEditProject == true)
   {
       var file = e.target.files[0];
      var reader = new FileReader();
      reader.onload = function(f) {
        
        var data = f.target.result;
        fabric.Image.fromURL(data, function(img) {
            var oImg = img.set({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height,
                selectable:false,
                id:document.getElementById("selectProjectID").value+"imageID"
            });
             canvas.setBackgroundImage(oImg).renderAll();
         //canvas.add(oImg).sendToBack().renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);
   }else{
       alert("You have to be logged to perform this operation.");
      return;
   }
});

Open in new window

Ivan GolubarAuthor Commented:
 <input type="file" id="imgLoader"></br></br>

Open in new window


My input type is "File".

When i press the "Choose file" button i get the file browser even if CanEditProject is false.

I did try also yours code, but  no difference.
Michael VasilevskySolutions ArchitectCommented:
How about adding preventDefault:

document.getElementById('imgLoader').addEventListener("change", function(e) {
  e.preventDefault();
 if  (CanEditProject == true)
   {
       //alert("CanEditProject");
   }else{
       alert("You have to be logged to perform this operation.");
      return;
   }
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(f) {
        
        var data = f.target.result;
        fabric.Image.fromURL(data, function(img) {
            var oImg = img.set({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height,
                selectable:false,
                id:document.getElementById("selectProjectID").value+"imageID"
            });
             canvas.setBackgroundImage(oImg).renderAll();
         //canvas.add(oImg).sendToBack().renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);
});

Open in new window

Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Ivan GolubarAuthor Commented:
Not working anyway .
Code of line below adds  an event listener on change. I need something else.
document.getElementById('imgLoader').addEventListener("change", function(e) {

Open in new window

Shahzad Fateh AliSoftware ArchitectCommented:
How the value of "CanEditProject" is being set? Seems like a type casting issue.

Try === instead of == in the "if" condition
Ivan GolubarAuthor Commented:
I get the alert message:

alert("You have to be logged to perform this operation.");

But after i choose an image in image loader window and after clicking on open button.
Shahzad Fateh AliSoftware ArchitectCommented:
Got the issue.

  • Change the event from "change" to "click".
  • In else, instead of returning "false", write "e.preventDefault();"


You code should look like

document.getElementById('imgLoader').addEventListener("click", function(e) {
 if  (CanEditProject == true)
   {
       //alert("CanEditProject");
   }else{
       alert("You have to be logged to perform this operation.");
      e.preventDefault();
   }
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(f) {
        
        var data = f.target.result;
        fabric.Image.fromURL(data, function(img) {
            var oImg = img.set({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height,
                selectable:false,
                id:document.getElementById("selectProjectID").value+"imageID"
            });
             canvas.setBackgroundImage(oImg).renderAll();
         //canvas.add(oImg).sendToBack().renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);
});

Open in new window

Ivan GolubarAuthor Commented:
Something is wrong because If i use "click",  I do not get the image in canvas.
Michael VasilevskySolutions ArchitectCommented:
Can you recreate your issue in a jsfiddle? We obviously don't have all the information we need to troubleshoot this...
Shahzad Fateh AliSoftware ArchitectCommented:
You will not get the image because "e" when passed in click does not hold the correct image. You will need to have to event handers bind to file. Click and Change. onClick you will do the validation and when the validation passes change will automatically run after image selection. So the code from file selection till end will go inside the change event.

Something like

var loader = document.getElementById('imgLoader');

loader.addEventListener("click", function(e) {
 if  (CanEditProject == true)
   {
       //alert("CanEditProject");
   }else{
       alert("You have to be logged to perform this operation.");
      e.preventDefault();
   }
    
});

loader.addEventListener("change", function(e){
var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(f) {
        
        var data = f.target.result;
        fabric.Image.fromURL(data, function(img) {
            var oImg = img.set({
                left: 0,
                top: 0,
                angle: 00,
                width: canvas.width,
                height: canvas.height,
                selectable:false,
                id:document.getElementById("selectProjectID").value+"imageID"
            });
             canvas.setBackgroundImage(oImg).renderAll();
         //canvas.add(oImg).sendToBack().renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 0.8
            });
        });
    };
    reader.readAsDataURL(file);

});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ivan GolubarAuthor Commented:
Yes. It is working.
I do not understands why if "click" does not pas "change" aborts, .... it must be because of : e.preventDefault();

So e from click is valid also for change. No need to spend more time on this. Important is that i have one worry less.
I hope to learn it  later with time.
Ivan GolubarAuthor Commented:
Thank you.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.