JavaScript: No callback after invoking fetch

Question

I did write a Javascript code to upload a file via API:

  function submitForm(bucket, accessToken) {
      console.log("Fetching the file...");
      var input = document.getElementsByTagName('input')[0];
      var name = input.files[0].name;
      var uploadUrl = 'https://www.googleapis.com/upload/storage/v1/b/'+ bucket +'/o?uploadType=media&access_token=' + accessToken +'&name=' + name;
      fetch(uploadUrl, {
          method: 'POST',
          body: input.files[0]
      }).then(function(res) {
          console.log('Something did happen!'); // <<----- Message never displayed!
      });
  }

However, I am not able to get the response body from the post request. The upload went well, but without a callback I cannot control the result in a deterministic way. How can I fix it, at least getting the HTTP Status Code?

try adding a `.catch(err => console.log(err))` - though, you do say there's no error, but it's very unlikely that the promise is neither resolved nor rejected — Jaromanda X, Feb 28 '18 at 22:52
`access_tokenn` ... that's unusual spelling, should that be `access_token`? However, none of the examples of using this API never mention this url search parameter. The documentation does show having an `Authorization:` header, which you don't seen to have in your code. Also, all the examples seem to be **not** browser based - perhaps a CORS issue (though, you'd see an error in the console if this were the case) - perhaps you're not looking at the right console? — Jaromanda X, Feb 28 '18 at 22:58
Inside the network tab, the action is marked as (cancelled), but the file is actually correctly uploaded. The access token is a misspell here, correct within the app. Also, without the access token no upload happens: with it, it works fine. — SubZeno, Feb 28 '18 at 22:59

Intervalia · Answer 1 · 2018-02-28T23:33:11.637

0

fetch can generate an error and, if it does, that happens through the .catch.

Like this:

function submitForm(bucket, accessToken) {
  console.log("Fetching the file...");
  var name = 'testName';
  var uploadUrl = 'https://www.googleapis.com/upload/storage/v1/b/'+ bucket +'/o?uploadType=media&access_tokenn=' + accessToken +'&name=' + name;
  fetch(uploadUrl, {
    method: 'POST',
    body: 'body stuff'
  }).then(function(res) {
    console.log('Something did happen!'); // <<----- Message never displayed!
    console.log(res);
  }).catch(function(err) {
    console.error('Got error:', err);
  });
}

submitForm('12345', 'testing');

edited Feb 28 '18 at 23:33

answered Feb 28 '18 at 22:58

Intervalia

10,248
2
30
60

Also adding the catch clause, nothing is being displayed within the console. – SubZeno Feb 28 '18 at 23:03
I changed the code to use hardcoded values and I do see the `"Something did happen!"` output. -- Maybe you are getting an exception prior to calling `fetch`. – Intervalia Feb 28 '18 at 23:33

score 0 · Accepted Answer · answered Feb 28 '18 at 23:07

0

Solved in a very stupid way, by adding:

event.preventDefault();

Source: What does status=canceled for a resource mean in Chrome Developer Tools?

answered Feb 28 '18 at 23:07

SubZeno

341
3
15

JavaScript: No callback after invoking fetch

2 Answers2