We help IT Professionals succeed at work.

What doesn't this switch case statement evaluate as expected in the ajax image upload code please?

James Froggatt
James Froggatt used Ask the Experts™
on
I am working on an ajax image upload system using ajax and php.

Within the ajax code, I am using :

ajax.addEventListener("load", completeHandler.bind(imageSelected), false);

I'm binding the Image selected in the web page because I have several windows on one page, each of which I different image can be uploaded to

Later in:

function completeHandler(event){

Open in new window


I have noticed that using the following code

if (this=="Image1"){
 ... do something
}

Open in new window


works just as expected.

However, I would like to use a switch case statement.

If I use the following within the completeHandler code:

 
function completeHandler(event){

var imageBeingControlled;
var inactiveImages;

switch (this){

    case Image1:
    imageBeingControlled=1;
    break;

    case Image2:

    break;

    default:
  }
alert (imageBeingControlled);

Open in new window


the alert ALWAYS shows undefined. What am I doing wrong here. It seems that although 'this' is indeed Image1, the switch statement doesn't evaluate it as such and so variable 'imageBeingControlled' always returns undefined.

Please help, thank you
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
leakim971Multitechnician
Top Expert 2014

Commented:
i'm not sure you provided th right informations
we also don't know how you call it previously and how you're calling it now

Author

Commented:
OK, let me try again please.

The final part of my ajax call looks like this:

  
ajax.upload.addEventListener("progress", progressHandler.bind(imageSelected), false);
  ajax.addEventListener("load", completeHandler.bind(imageSelected), false);
  ajax.addEventListener("error", errorHandler.bind(imageSelected), false);
  ajax.addEventListener("abort", abortHandler.bind(imageSelected), false);
  ajax.open("POST", "file_upload_parser.php");
  ajax.send(formdata);

Open in new window


If I use the following:

function completeHandler(event){
  if (this=="Image1"){
... do something
}
}

Open in new window


When Image one in the html is clicked, e.g.

  <div id="containerImage1">
          <input type="file" name="file" id="Image1" data-ext="jpg|jpeg">
          <label for="Image1">
            <img id="uploaded_image1" src="upload_images/no-image.png">
          </label>
          <div id="mainMessageImage1">Please click here to upload</div>
          <div id="deleteImageButton1">Remove?</div>
          <div id="cancelImageUpload1">Cancel Upload</div>
          <progress id="progressBarImage1" value="0" max="100"></progress>
        </div>

Open in new window


the fact that Image1 has been clicked is detected as I would expect it to be in the completeHandler function

However, if in the completeHandler function, I attempt a switch case methodology as below;

function completeHandler(event){
    var imageBeingControlled;
    var inactiveImages;

  switch (this){

    case Image1:
    imageBeingControlled=1;
    inactiveImages=2;
    break;

    default:
  }
alert (imageBeingControlled);

Open in new window



imageBeingControlled always evaluates to 'undefined'.

I know that 'this' is indeed 'Image1' because

if (this=="Image1"){

Open in new window


does work. However, when Image1 is put in a

case: Image1:

Open in new window


statement, it does not.

Does that explain my question better.

Thank you
leakim971Multitechnician
Top Expert 2014

Commented:
thank you for this line :
ajax.addEventListener("load", completeHandler.bind(imageSelected), false); // https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener


But this is what we're looking for :
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Check in bold underlined  :

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

Your issue is you're using :
case Image1:
instead :
case "Image1":

Author

Commented:
I have changed my test code to the following:

function completeHandler(event){
    var imageBeingControlled;
    var inactiveImages;

  switch (this){

    case "Image1":
    imageBeingControlled=1;
    inactiveImages=2;
    break;

    default:
  }
alert (imageBeingControlled);
}

Open in new window


I still get an alert saying 'undefined'

Any other ideas please?

Author

Commented:
If however I use

function completeHandler(event){
    var imageBeingControlled;
    var inactiveImages;

    if (this=="Image1"){
      imageBeingControlled=1;
    }
alert (imageBeingControlled);

Open in new window

}

I get an alert of '1' as expected. So still not understanding which the switch/case equivalent isn't working...

Author

Commented:
Furthermore, if I use the code:

function completeHandler(event){
    var imageBeingControlled;
    var inactiveImages;

    alert (this);

    switch (this){

    case "Image1":
    imageBeingControlled=1;
    inactiveImages=2;
    break;

    default:
  }
alert (imageBeingControlled);

Open in new window


and put an alert to display 'this' right at the top, it does indeed say "Image1" in the alert...

Author

Commented:
So although 'this' is indeed "Image1",

case "Image1":

Open in new window


is not detecting it...
leakim971Multitechnician
Top Expert 2014

Commented:
if (this==="Image1"){ // doesn't work right ? this is not a string

Author

Commented:
Hi @leakim971,

I just got out of bed and tested

  if (this==="Image1"){
    imageBeingControlled=1;
  }
  alert (imageBeingControlled);

Open in new window


this does indeed not work, and gives 'undefined' as the alert message, whereas;

  if (this=="Image1"){
    imageBeingControlled=1;
  }
  alert (imageBeingControlled);

Open in new window


gives an alert as '1' (i.e. does work)

Author

Commented:
@leakim971

I think given your last message, I might have fixed it, thanks to your pointer, the code

function completeHandler(event){
    var imageBeingControlled;
    var inactiveImages;

    switch (this.toString()){

    case "Image1":
    imageBeingControlled=1;
    inactiveImages=2;
    break;

    default:
  }
alert (imageBeingControlled);
}

Open in new window


Does now seem to give '1' as an alert.

Furthermore, if I now extend the code to include two of the images on my html (php)  page as follows;

function completeHandler(event){
    var imageBeingControlled;
    var inactiveImages;

    switch (this.toString()){

    case "Image1":
    imageBeingControlled=1;
    inactiveImages=2;
    break;

    case "Image2":
    imageBeingControlled=2;
    inactiveImages=2;
    break;

    default:
  }
alert (imageBeingControlled);
}

Open in new window


I do get an alert ('1' or '2') depending on which image was clicked on.

It seems adding the toString() function was the answer:

 switch (this.toString()){

Open in new window


I will further test this today to see if it's fully behaving itself and then close this thread (and give you due thanks) as a solution if it all seems to be working.
leakim971Multitechnician
Top Expert 2014

Commented:
good work
 switch (this.toString()){

Open in new window

Author

Commented:
Thank you for your help in resolving this issue. Very much appreciated.