getItemByFileId undefined in onSubmitted with FineUploader

Question

At this point, uploads are working (to s3), but my onSubmit callback exploding: [Fine Uploader 5.0.2] Caught exception in 'onSubmitted' callback - undefined is not a function

This may be a cofeescript fat arrow problem, since I transpiled the example to coffeescript for my build environment (and my preference for coffeescript), but I'm stumped anyhow.

Here's the relevant dict for the options.

 callbacks: {
           onSubmitted: (id, name) =>
              console.log "calling onSubmitted(#{id}, #{name})"
              console.log "This shouldn't be undefined: #{@getItemByFileId}"
              # but it _is_ undefined
              $file = $(@getItemByFileId(id))
              console.log $file
              $thumbnail = $file.find(".qq-thumbnail-selector")
              $thumbnail.click ->
                 openLargerPreview(
                    $scope,
                    $(element),
                    largePreviewSize,
                    id,
                    name
                    )
                 return
              return
        }

Here's the skinny arrow version (see comments below) as rendered into JS:

callbacks: {
          onSubmitted: function(id, name) {
            var $file, $thumbnail;
            console.log("calling onSubmitted(" + id + ", " + name + ")");
            $file = $(getItemByFileId(id));
            console.log($file);
            $thumbnail = $file.find(".qq-thumbnail-selector");
            $thumbnail.click(function() {
              openLargerPreview($scope, $(element), largePreviewSize, id, name);
            });
          }
        }

the result (when I upload something) is

[Fine Uploader 5.0.2] Received 1 files or inputs. 
[Fine Uploader 5.0.2] Attempting to validate image.
calling onSubmitted(0, IMAG0161.jpg) 
This shouldn't be undefined: undefined 
[Fine Uploader 5.0.2] Caught exception in 'onSubmitted' callback - undefined is not a function

as indicated in the code, the problem (as I understand it) is that @getItemByFileId is not defined on this properly, where (again, as I understand it) this should be the fineuploaderS3 object.

score -1 · Answer 1 · answered Jun 20 '14 at 21:33

-1

There's no need to use a fat arrow in the Fine Uploader event handlers. The context of the event handler will be set to the Fine Uploader instance for you (by Fine Uploader). Just use a "skinny arrow".

answered Jun 20 '14 at 21:33

Ray Nicholus

19,538
14
59
82

Hmm. I tried that. Changing => to -> and removing the @ prefix to the method results in `Caught exception in 'onSubmitted' callback - getItemByFileId is not defined ` – Ben Jun 20 '14 at 21:44
I'm guessing CS is messing with the context of the event handler in some other way. I gave up CS a while back as I found it made my code hard to parse without any obvious gains. We're still using it in our build script, but I hope to convert to plain 'ole JS shortly. – Ray Nicholus Jun 20 '14 at 21:51
Well, even if I didn't prefer CS, it's not my call to make in this situation. I'll post the transpiled JS above. – Ben Jun 20 '14 at 21:55
The transpiled version shows that you are trying to reference a `getItemByFileId` variable. Instead, you should be referencing `getItemByFileId` on the context of the event handler like so: `this.getItemByFileId(id);` – Ray Nicholus Jun 20 '14 at 22:00
Indeed, but it's unclear to me how to achieve that. I can do the -> version, which results in the variable reference, or I can do the => version which results in the wrong `this` context, but I don't understand how to grab and pass the _right_ context. I tried several things based on [these answers](http://stackoverflow.com/questions/12648187/coffeescript-how-to-use-both-fat-arrow-and-this?rq=1), such as this=that at various points, or event.currentTarget, but no dice – Ben Jun 20 '14 at 22:45
Actually, by changing the linting rules to allow backticks, `\` this \`.getItemByFileId(id)` works... but I would rather understand which context to grab and pass... – Ben Jun 20 '14 at 22:53
I would say that using `this` is most appropriate. Fine Uploader will set the correct context for you. – Ray Nicholus Jun 21 '14 at 04:14

getItemByFileId undefined in onSubmitted with FineUploader

1 Answers1