how to get response after the file upload in angularjs using xhr

Question

I having hard time trying to get the response from the server to the angularjs client after the file upload. i want to get the filepath as response so that i can set the image source attribute. iam not using the angular $http service. i wanted to get the response after the xhr.onload function

this.uploadIssueAttachment = function(attachment){
          var file, form, xhr;
          var file = attachment.file;
          form = new FormData();
          form.append('Content-Type', file.type)
          form.append('file', file)
          xhr = new XMLHttpRequest(); 
          //it is because we want t have to access of underlying XMLHttpRequest.. like tracking progress of file upload.
          xhr.open('POST', uploadUrl, true) //AJAX post request
          xhr.setRequestHeader('x-access-token', token)

          xhr.upload.onprogress = function(evt){
             var progress;
             progress = evt.loaded/ evt.total * 100; //progress %
             return attachment.setUploadProgress(progress)
          };
          //load  onload  --->The upload completed successfully.
          xhr.onload = function(){
            console.log('iam done uploading the files')
            var href,url;
            if (xhr.status === 204) { 
                //can u get the response link from the post request.
                console.log('server stuff', this.response) //undefined
               //url = href = host + key;  key is for the imageUrl part.
                //u can use imageUrl to set the attachment attributes.
                return attachment.setAttributes({
                   url: url,
                   href :href
                })

            }
          }

          xhr.onloadend= function(){
            console.log('iam finally done whether error or ...', xhr.response)
            //hey u need to ask on stackoverflow... how do i obtain the response from the server
            //ima doing it on angularjs... failed to get response after the file upload.
          }
          return xhr.send(form)
        }

score 1 · Answer 1 · answered Jun 05 '18 at 07:13

I was able to finally get the response from the server after looking at some github gists. i was suppose to parse teh response that comes as json data. NodeJS server.

res.json({"status":204, "message": filePath})

Angular client.

xhr.onload = function(){
        console.log('iam done uploading the files')
        var href,url;
        if (this.status == 204) { 
            //can u get the response link from the post request.
             var res = JSON.parse(this.response) //this was the solution
           //url = href = host + key;  key is for the imageUrl part.
            //u can use imageUrl to set the attachment attributes.
            return attachment.setAttributes({
               url: url,
               href :href
            })

        }
      }

how to get response after the file upload in angularjs using xhr

1 Answers1