0

I'm trying to set up an app in google app engine to do a similar thing to the application demonstrated in this google io talk. this is my html code which is basically entirely lifted from the talk-

<html>
    <head>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script language="JavaScript">
        function startUpload(f){
            if(typeof jQuery != 'undefined') { document.writeln("jQuery!"); } else { document.writeln("no jQuery :("); }
            document.write("topwrite");
            $.ajax({url:'http://projectid.appspot.com/getFileUploadEndpoint', cache: false, success: function (data){
                document.write("i can write");
                var fd = new FormData();
                for(var n in data.params){ fd.append(n, data.params[n]); }
                fd.append('file', f);
                var xhr = new XMLHttpRequest();
                xhr.upload.addEventListener('progress', function (evt){ $('#progress').text(evt.loaded+'/'+evt.total);}, false);
                xhr.upload.addEventListener('load', function (evt){ $('#progress').text('Complete'); }, false);
                xhr.open(data.method, data.url);
                xhr.send(fd);
            },
            error: function(errorThrown){ document.write("didn't work did it"); document.write(errorThrown); } });
            return true;
        }
        </script>
    </head>
    <body>
        <form id="uploadbanner" enctype="multipart/form-data" onsubmit="return startUpload(myfile)">
            <input id="fileupload" name="myfile" type="file" />
            <input type="submit" value="submit" id="submit" />
        </form>
    </body>
</html>

i know the /getFileUploadEndpoint works fine because i can go to that url and see the endpoint info print out and change every time i refresh but nothing inside either the success function or the error seems to run (that is to say i see "jQuery!topwrite" printed between pages but nothing else and the upload obviously isn't working) can anyone tell me what i'm doing wrong?

Ross Manson
  • 339
  • 1
  • 3
  • 14
  • Where's the success callback? – artm Oct 07 '14 at 11:05
  • it's on the same line as _$.ajax_, you have to scroll right, sorry – Ross Manson Oct 07 '14 at 11:35
  • You're instantiating a new XMLHttpRequest *inside* the jQuery .ajax success callback? Why would you do that? Why not use .ajax() there as well? And even better you can use the promises API to run your second Ajax call on successful completion of the first. – Daniel Roseman Oct 07 '14 at 11:39
  • @DanielRoseman I'm pretty much a complete newcomer to internet based programming as a whole (never used html OR javascript before) so at the moment I'm kind of a monkey with a typewriter. As I said this code is almost entirely lifted from the talk I linked to (which is from 2012 so maybe that's why it's done a bit oddly? I couldn't say). Do you think this is the reason it's not working or is that just good advice? – Ross Manson Oct 07 '14 at 12:00

1 Answers1

0

The example code (at 11:35 in the linked video, or in the PDF on the same page) doesn't include any calls to document.write, whereas you have several. This is almost certainly your problem, since that method replaces the current page if it's called after the page is loaded, which is the case inside your callback. (See this question for some explanations.)

On the strange use of XHR: I haven't watched the video properly to know why they're doing that (or even if they mentioned it), but it certainly is a very odd way to write an Ajax callback.

Community
  • 1
  • 1
Daniel Roseman
  • 588,541
  • 66
  • 880
  • 895
  • i've removed all the calls to document.write but it's still not working. if it's the script that's making the call, should it matter what's on the page? – Ross Manson Oct 07 '14 at 13:05