CODEWITHSUNDEEP
angularlaravelfetch-api
Payne
Payne

Reputation: 543

Blob() in a response isn't displaying original image url but size and type

Though I don't I have any error but instead of displaying the image as it displays perfectly on POSTMAN. I used res.json(), I received "unexpected token < in position 0". Then I tried res.text() and I can use res.blob() but when I used it with url = URL.createObjectURL(blob). I got a different file name which cannot be retrieved from API for display. I know there are several references on stack overflow but different from what I intend to do and it is becoming complex as I try so many options.

fetch(url, {
              method: 'POST',
              body: uploadData,
              headers: {
                // 'X-Requested-With': 'XMLHttpRequest',
                // 'Accept': 'application/json',
                'Authorization': 'Bearer ' + this.bearerToken,
                // 'Content-Type': 'multipart/form-data',
              }
            }).then(res => res.blob()).then((response) => {
              if (response) {
                console.log(response);
                // const slashIndex = response.lastIndexOf('/');
                // const filename = response.substring(slashIndex + 1);
                // this.openUploadConfirmDialog(filename, shareOption);
              }
            }).catch((error) => {
              if (error) {
                console.log('Error', error);
                this.snackBar.open('Unable to upload image, Try again later!', '', {duration: 4000});
              }
            });
          }
        });

And this is the API,

This is the return response; return 

response()->file(storage_path('app/uploads/images/'.$exportName));

Thanks

Upvotes: 1

Views: 818

Answers (1)

Abdulkabir Ojulari
Abdulkabir Ojulari

Reputation: 1467

First, you don't have any problem with your API, it is well written. The issue lies on angular fetch API which isn't complete and also jam-packed with some irrelevant codes. I have cleaned your code and rewritten it with some few lines.

Using FileReader() is the secrete. In your Laravel code, you are returning image file and in your javascript, you must use blob as against Text() and JSON()

fetch(url, {
              method: 'POST',
              body: uploadData,
              headers: {
                'Authorization': 'Bearer ' + this.bearerToken,
              }
            }).then(res => res.blob()).then((response) => {
              if (response) {
                const reader = new FileReader();
                reader.onloadend = function () {
                  console.log(reader.result);
                };
                reader.readAsDataURL(response);
              }
            }).catch((error) => {
              if (error) {
                console.log('Error', error);
                this.snackBar.open('Unable to upload image, Try again later!', '', {duration: 4000});
              }
            });
          }
        });

For further reading...

enter link description here

Upvotes: 1

Related Questions