How to upload from BUFFER?

CODE-NINJA · May 15, 2021, 10:22pm

When taking a look onto the VELO-API, we can find this one here…

export function uploadImage(buffer) {
  return mediaManager.upload(
    "/myUploadFolder/subfolder",
    buffer,
    "myFileName.png",
    {
      "mediaOptions": {
        "mimeType": "image/png",
        "mediaType": "image"
      },
      "metadataOptions": {
        "isPrivate": false,
        "isVisitorUpload": false,
        "context": {
          "someKey1": "someValue1",
          "someKey2": "someValue2"
        }
      }
    }
  );
}

Let’s say my buffer-source / buffer-data is the following…

buffer = data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIACAYAAAD0eNT6AAABcGlDQ1BpY2MAACjPlZG5S0NBEIc/EyWikRSmSGGRIloZ0SiinUS8QC2SCEZtkpdLyPF4LyJiK9gKFh6NV2Fjra1gLQiCF+JfYKVoI+E5mwQShBTOsjvf/nZm9gLbYlbLmc39kMsXjdBU0LsYXfI6XrDhwYlYTDP1ufBkhIb2/UCT8vd+VYv/WXsiaWrQ1Co8pulGUXhaeH69qCveF3ZrmVhC+EK415ADCj8pPV7hd8XpMttUTbcRCY0Lu4W96TqO17GWMXLCQ8K+XHZNq55H3cSZzC+ElS69C5MQUwTxMsME4wwzwKiMw/gJ0CczGuQHyvnzFCRXk1FnA4NV0mQo0ivqmlRPik+JnpSWlQgx9Qd/39ZMDQYqOziD0PJmWZ/d4NiF0o5l/ZxYVukU7K9wna/lF45h5Ev0nZrmOwLXFlze1LT4Hlxtg+dZjxmxsmSXbkul4OMcOqLQeQdty5V3q65z9giRTZi9hYND6JF418ovewhm0YKQ/LsAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB+UCDBIBLfkt1mMAAIAASURBVHja7P15vH3JdReGrrX3uecOv6lHqSV1a7Iky7IlS8Y2GIzwIDCQOICZwuCEIbz38vKAT+BBHmEIz5CYF17y+CTkEwhTiMFg49hgIMTgITbCODa2sQFjy5Ylt0Zr6Ok33HuGXev9UbXW+q6q2ufeX3f/hm6dkn59z9mndg2rVq25VhHty77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77sy77c1cL3egD7cm/LLxsfoO+dnqF//Fe+cfziX/6e46OHLi230/Zg2k6LadouKaVFmuSIiY/GxeJ4uVweL5eHJ7xYHNFIS2IiEmEiYhIWEhIahIl5oERCRPkZCdNEUjBuIGKRlISZBhFJTAMRExNRIiJiJhYRIiEWIio/ikiilESGgQci4pSmKdcmEiFi5lxZEhGzkBAR8SApSZIkzANR7lyY80siJMTE+TdhotxW+e+QZBIqUyrvDVReIxIipkTCREIDMYmIlPHnuQqVUQglocRERElEJKVERCPzQMMwlDeJWAdGxCmlJEKi85IM7CGlJERMrP+nMhgmJqHkw+eROE8qiYjktSIeOFcVkZQmHngg5mEQEhGRiVmYhFlEUpLEAw9DnhgxiaTcJY9ElIaBKUlS0KWypnm4JIOITEQyMA2URESXqAxXhy9lvYmHgUVS0kpleQYFz8ADJUlkYOIMlgxukvxexhYhIeZhKJ/LmpOCjoQkMdEgkqc1DAMZ7HK9VPoaBh4kL30iXX3trYCm0FPRn5h5GHQuzKwLIELMTCLENNpYJS/cMJRpU14j4gxHA1ru05aDSCRJmtI03UopnRLJKSW6xcQrEV5LklWatutpm7ar09PNzZs3N//mX/zA2df/qT+++UVf/CX01777O+81GdqXe1T2AsBnSBER+rb/7q8OX/E1X308Xj64vFmtry0Pjh49vnLpiUTpiTSlJ8ZxfHxYjA8x0bEQHRLREQktiGRJREsiWhDRgpgXnBkLK+/UbqBLJqfIotTWfiP8nIndTNG68I5+VdI7/xKMZaZv6r1eN2VgLH3DfKXpqvzEEl5meJ+ceZQfnZdVg9Nx9yDc6bQzI4aZCsAuTsvn1OlFfzembsP2UYe2O+u7C/T153YI8VcmgLv9NUGrDyYErY2IOL7I3qFKKEWOyjIdFTAytMMVOCViq4+TYXxig1KBE7DBJ+1YXj4yzKHFk4mItsS0ZeEtCW1FZJOmtEppWgnRWZqmUyF5jok/JhN9bLNafezs7NbHps32Yyz86Vs3bjz3kz/yo8/9od/ztevf8Ju+lv70N38D7cvLt+wFgJdZGYhoEqEfe+8PLN74ts++xsRPnFy58iYheSKl9Pg4jq/lcXgtET1MRFeZ+DIxHeZXK+bQ4xX9h7OPX3ipGcO9K3dsivtyd8p9vYB3f3CShERkQyRnlOjmNKXr2+3m45Lkp7ar7b+9dfP6T2xXm/c/9clPfvL7v/ufXP+//Yk/OjHftwDcl+dR9qv5Ei//5W/6Wvqj3/wN9L7v/5GDx976+gcGHl57eOnk7ST0rvFg8Q4iehMTP0RMR5TlgwuVotk/rzFd+F3Vn6lRsz9jELOnQSIM7jgs7nAHzfwqW07fGHEXB91p6oXg/ovZxtxw0TJwp8CSUpokyY20TZ/YrFcfkEQ/uT5b/cTZres/sT7dPvnxD33403/lr/yFm+98xzvlP/kTf+RFn+e+3J3ymUJnX1ZFROjTH/zYwcHVw4cW48FrlydHn09C7xwXi3cQyRuJ+WFmPrpn46OLINbLh83fKWJ/e2PI/739cVzE6nPOa89jKaV4fV40uM2M54WuTXi/CKxu/he6uEZ8PpCez44I78x6d6pHxf9wW9q8EKWUNiLy7LTefny73bxv2kw/evP6c++9+cyNn/jB7/6uT7/iNU9M7/n3f+3zhvW+3P3y8qDAnwHlmY99gran68XhtUuvOjo5
....... and so on.........

As stated in the beginning of the BUFFER-DATA, this should be an IMAGE in PNG format.
But when i try to load it up, it always gets saved as TXT-file.

My question is now, why it does not save as PNG-file?

End of file-name is setted-up to —> “myFileName.png”
Media-type is setted-up to —> “image”
Mime-type is setted-up to —> “image/png”

But it gets still saved as TEXT-FILE, why ?

vervoortyves · May 16, 2021, 1:41am

Well, because it is … text. Basically it’s binary data in ASCII string format. You need to decode it to get to the actual image.

CODE-NINJA · May 16, 2021, 4:39am

Ok, i must say, i am not so familiar with uploading-processes (yet).

So just to understand the upload-flow.
Let us say i have a "file-selector inside a html-component…

Where i can select a file (for example a picture/image).

CODE:

<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a File Upload Button.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
  var x = document.createElement("INPUT");
  x.setAttribute("type", "file");
  document.body.appendChild(x);
}
</script>
</body>
</html>

How i can upload the selected file and in which format do i have the file?
Is it than already coded as buffered URI-file?

Is it a MUST to buffer/encode the pic before uploading?

Just try to understand how it works.

Is the following scenario right?

Choose file in a file-selector (opens a new explorer-window to choose file).
After chosen a file (image), what happens then?
Do i already have an encoded /buffered) file, which will be sent to server?
How should the file-format look like? Example?

A little bit confused, after reading for 3-days about all that stuff.

What i need is to see a clear process-flow:

which formats are at which checkpoints?
what do i have after a selected file?
how to start the upload after file-selection in the file-selector?
is the following code the right one, to achieve my aim?
which format is expected here for (buffer) ?

export function uploadImage(buffer) {
 return mediaManager.upload(
    "/myUploadFolder/subfolder",
    buffer,
    "myFileName.png",
    {
      "mediaOptions": {
         "mimeType": "image/png",
         "mediaType": "image"
       },
       "metadataOptions": {
          "isPrivate": false,
          "isVisitorUpload": false,
          "context": {
             "someKey1": "someValue1",
             "someKey2": "someValue2"
           }
        }
     }
  );
}

I know how to use this one…(import file from URL)…

import { mediaManager } from 'wix-media-backend';

export function importFile(url) {
 return mediaManager.importFile(
 "/myImportFolder/subfolder",
    url,
 {
 "mediaOptions": {
 "mimeType": "image/jpeg",
 "mediaType": "image"
 },
 "metadataOptions": {
 "isPrivate": false,
 "isVisitorUpload": false,
 "fileName": "my-image.jpg",
 "context": {
 "someKey1": "someValue1",
 "someKey2": "someValue2"
 }
 }
 }
 );
}

But my aim is to do it the direct way, after choosing a file.

And —> NO —> i do not want to use an UPLOAD-BUTTON.
I need it the programatically way with VELO-CODE.

CODE-NINJA · May 16, 2021, 4:46am

Found somewhere in the net these two snipets here, looks like encoding/decoding…

var base64Image = new Buffer(original_data, 'binary').toString('base64');
var decodedImage = new Buffer(base64Image, 'base64').toString('binary');

vervoortyves · May 16, 2021, 11:05am

I think you need to look at the following, where in your case, url is a dataurl instead of an actual url.

import { mediaManager } from 'wix-media-backend';
import rp from 'request-promise';

export function uploadImage(url) {
  return rp.get({ url, encoding: null })
    .then( (image) => {
      return mediaManager.upload(
        "/myUploadFolder/subfolder",
        image,
        "myFileName.jpg",
        {
          "mediaOptions": {
            "mimeType": "image/jpeg",
            "mediaType": "image"
          },
          "metadataOptions": {
            "isPrivate": false,
            "isVisitorUpload": false,
            "context": {
              "someKey1": "someValue1",
              "someKey2": "someValue2"
            }
          }
        }
      );
    } );
 }

However, in your case, you need to be decoding, so you need to replace the rp.get() part with something like:

import * as fs from 'fs';
fs.writeFileSync('img.png', buffer);

Where buffer is calculated from the following:

let buffer = new Buffer(your_dataurl, 'base64');

See: Node.js | fs.writeFileSync() Method - GeeksforGeeks

CODE-NINJA · May 16, 2021, 2:57pm

Ok, i will give it a try. Thanks.
Although i also played with this function, but the import of RP did not work, besause NPM was stated as depricated or so.

But i hope this time it will work. Thanks, i will look at it the next days.

vervoortyves · May 16, 2021, 4:05pm

Well I’m not sure what didn’t work about rp.get(), but the loading of external resources is typically not allowed through HTTP - you then run into the typical CORS restrictions. Maybe try again using a local url e.g. the direct url to an image that you manually uploaded on your site.

CODE-NINJA · May 16, 2021, 8:34pm

@vervoortyves Ok, i think i will have to study it a little bit more, till i can understand all the sub-steps.

Here my first progress…

I was able to convert from base64 to binary.

The only question is —> do i really need this conversion?

CODE-NINJA · May 16, 2021, 8:42pm

@vervoortyves

Maybe try again using a local url e.g. the direct url to an image that you manually uploaded on your site.
How does look like a local-URL ? Can you give me an example?

an image that you manually uploaded on your site.
That’s exactly what i do not want to do manualy

Here the flow i expect…

Choosing a file from an HTML-Component-File-Selector.
Post the File-data to my page.
Upload the File to Wix-Data-Manager automaticaly after file-selection or a press on a —> normal-button called —> “UPLOAD”.
Not using the “Wix-Upload-Button”.

How to do it with the “wix-upload-button” i already know, but unfortunately that is not enough for my requirements.

To be continued…

chris-derrell · May 16, 2021, 11:32pm

Hey @russian-dima !

For your flow, you could be much better off using the getUploadURL() , since you’re using the HTML Component. This will save you some issues later on if you have very large file sizes since the HTML Component has a max size that it can pass back to your main Wix website through postMessage() in those cases, you’re going to have a 413 Payload Too Large response.

The getUploadURL() will give you back just a URL that you will be able to post your file to, or use in the form of your HTML Component. It’s great because

You’re only passing the URL to the component, rather than just the entire buffer.
All the upload is done from the component, and the provided URL is CORS friendly
If you do the upload in the HTML Component, you can use other cool built-in JS libraries like XmlHTTPRequest. You can use that to get upload progress and more.

Hope this helps, and just shout if you need more details/answers.

CODE-NINJA · May 16, 2021, 11:46pm

Hello Chris,
also a big thanks for your reply.
yvervoort already tried to explain some thing to me, but i am still at the same point, with some issues and questions.

Yes, i already saw this option with the getUploadURL () and i am also trying to use it at the moment, but i can’t handle it the right way. I must missing something in my understandings.

I also experimented with it already to see what i get if i inspect it by using the CONSOLE.

Strange was that i got a coded UPLOAD-DATA or something but no token.
Token was empty.

Anyway, i am still trying, i think it will still take some time till i got it (because i try to study all the substeps and not just to find out a solution). I want to understand the whole flow/process.

To be continued…

chris-derrell · May 17, 2021, 12:33am

@russian-dima Keep me posted on your progress. It takes a bit of reading, but you can definitely get through with this. Different tools to match your project.

CODE-NINJA · May 17, 2021, 1:23am

For example i found this code-snipet here from Guy Tadmor …

<label class="custom-file-upload" >
 <input type="file" accept='pdf/*' onchange='openFile(event)' />
   Select File
</label>

<script>
 var openFile = function(event) {
 var input = event.target;
 var msg = {fileName:"",content:""};
 var reader = new FileReader();


 reader.onloadend = function(){
 var buffer = reader.result;   
 msg.fileName = fileName;
 msg.content = buffer;
 window.parent.postMessage(msg,"*");

  };
 
 var fileName = input.files[0].name;    
 reader.readAsDataURL(input.files[0]);
};
</script>

…which seems to be the right direction.

Modified it to investigate/inspect/analyse it a little bit more… Upload-Test - JSFiddle - Code Playground

And am able to get the following results for every selected img…

And i am also able to send this data from html to my page.

But my question is still —> Is the DATA-URI-FORMAT the format i need for UPLOAD ?

I was also following the suggestion of yvervoort , to convert to binary, but my question here would be, why do i need this decoding to binary?

On wix-side: Which format is expected? Does wix do any decoding on their side?
Or do i have to do the decoding?

Looking at the given CODE from VELO-API:

import * as request from 'request-promise';
33
34async function uploadImageViaUploadUrl(uploadUrl, uploadToken, contentStream, fileName, contentType) {
35  const body = {
36    upload_token: uploadToken,
37    file: {
38      value: contentStream, // a Node.js Buffer with the file content
39      options: {
40        filename: fileName,
41        contentType: contentType
42      }
43    }
44  };
45
46  const response = await request.post({url: uploadUrl, formData: body, json: true});
47  return `wix:image://v1/${response[0].file_name}/${response[0].original_file_name}#originWidth=${response[0].width}&originHeight=${response[0].height}`;
48}

What do i have?

uploadUrl —> should be given already —> CHECKED!
token: —> not sure!!! (when i tested it —> got —> “” for token).
filename: fileName —> (just the question with .npg at the end?) CHECKED!
value: contentStream: —> I do not know what is expected here.
content-type: —> if it is the fileType from my console-example -->CHECKED!

So at the end, my biggest questions are:

Which format is expected to be uploaded? (Binary? ASCII? BASE64?)
Does wix decode on their side?
Do i have to decode before upload? Decode to which format?
Isn’t the following format already the right one…?

EXAMPLE:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO3gAAAABJRU5ErkJggg==

Putting this into webbrowser-input you will get an IMAGE
From DATA-STRING to FILE (image)

EDIT:

The getUploadURL() will give you back just a URL that you will be able to post your file to, or use in the form of your HTML Component. It’s great because

You’re only passing the URL to the component, rather than just the entire buffer.
All the upload is done from the component, and the provided URL is CORS friendly
If you do the upload in the HTML Component, you can use other cool built-in JS libraries like XmlHTTPRequest. You can use that to get upload progress and more.

Reading this part of your post again, i recognize that you try to tell me to go another way (right?).

Ok, when i got the UPLOAD-URL (still not sure how this upload-URL looks like), how to continue?

Ok, sending the URL (in whatever format) to the component should not be the difficult one. But what and how i do the upload at the end?

Sorry, for a lot of questions. Just trying to understand everything in detail.

CODE-NINJA · May 17, 2021, 1:56am

@chris-derrell

To your suggestion to use → XmlHTTPRequest, i found this emidiately at my first found post at → StackOverflow…

You simply can’t upload a file with pure Javascript (at least not in a cross browser way, see this article for more information )

This is because XMLHttpRequest has no support for multipart/form-data, you can do tricks like using an iframe or use flash.

There are enough articles on the internet that explain this.

Is XmlHTTPRequest my only way to achieve my aim ?

chris-derrell · May 17, 2021, 2:04am

Hey, two things. At the end of that same article someone points out that CORS is the problem that person had, you won’t have that problem they had, cause Wix set it up to work

The other thing is you can also use the browser version of the fetch API to do the request, instead of XHR. The tradeoff is that the browser fetch won’t give you the nice features like tracking how much has been uploaded, because it doesn’t have support for that yet!

The browser fetch works alot like wix-fetch, and can be used from your HTML Compoene6

chris-derrell · May 17, 2021, 2:08am

No problem, love the questions!

The upload URL should be a nice long URL that serves as an endpoint for the upload. You won’t need the token for the upload for this file.

When you’re generating the URL, you should give it the file name and file type you’re planning to upload. (Like, mypicture.jpg for filename and image/jpeg for the mimeType)

chris-derrell · May 17, 2021, 2:10am

And yes, I was suggesting another way. The contentStream is your buffer, and the code from Guy Taymor looks like it will definitely help.

CODE-NINJA · May 17, 2021, 2:25am

@chris-derrell

The upload URL should be a nice long URL that serves as an endpoint for the upload. You won’t need the token for the upload for this file.

Yes this was exactly what i got, while doing some analyses and testings, i got a long URL → looked like a DATA-URI (but not sure).

And yes —> the given token was → empty.

And yes, I was suggesting another way. The contentStream is your buffer, and the code from Guy Taymor looks like it will definitely help.

Ok…the content-stream is my buffer and my buffer is…? —> my DATA-URI?
Just the DATA-URI, or including something else?

When i say DATA-URI, i am talking about…
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO3gAAAABJRU5ErkJggg==

Is my way of thingking correct?

CODE-NINJA · May 17, 2021, 3:34am

Played around a little bit, but still stuck…

Got my UPLOAD-URL…which looks like…
Token = “”

Did some testings and tried to get it to work from backend…with the following setup…

import * as request from 'request-promise';

var uploadToken = "" 
var fileName = "Test-PNG.png"
var contentType = "image/png"

var contentStream =    "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO3gAAAABJRU5ErkJggg=="

var uploadUrl = "https://upload.wixmp.com/upload/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE2MjEzMDY2MDgsImJ1Y2tldCI6InVwbG9hZC10bXAtd2l4bXAtY2RmYzM4NGYxNTg0MWFhYTVlYWIxNmIxIiwicGF0aCI6Im1lZGlhL2IwMzE0M18yZDUwNDI4Y2M4ODM0MTRhYmQzZjU1ODg4OTYxNzRmMH5tdjIucG5nIiwiY2FsbGJhY2tVcmwiOiJodHRwczovL3dpeG1wLWNkZmMzODRmMTU4NDFhYWE1ZWFiMTZiMS5hcHBzcG90LmNvbS9fYXBpL3YzL3VwbG9hZC9jYWxsYmFjaz91cGxvYWRUb2tlbj1leUowZVhBaU9pSktWMVFpTENKaGJHY2lPaUpJVXpJMU5pSjkuZXlKcGMzTWlPaUoxY200NmMyVnlkbWxqWlRwbWFXeGxMblZ3Ykc5aFpDSXNJbUYxWkNJNkluVnlianB6WlhKMmFXTmxPbVpwYkdVdWRYQnNiMkZrSWl3aWMzVmlJam9pZFhKdU9tRndjRHBsTmpZMk16QmxOekUwWmpBME9UQmhZV1ZoTVdZeE5EbGlNMkkyT1dVek1pSXNJbWxoZENJNk1UWXlNVEl5TURFNU9Dd2laWGh3SWpveE5qSXhNall6TXprNExDSnFkR2tpT2lKbE1tTTVNelk0Wm1NeU5ETWlMQ0p3ZEdnaU9pSXZiV1ZrYVdFdllqQXpNVFF6WHpKa05UQTBNamhqWXpnNE16UXhOR0ZpWkRObU5UVTRPRGc1TmpFM05HWXdmbTEyTWk1d2JtY2lMQ0poWTJ3aU9pSndkV0pzYVdNaUxDSnNabU1pT201MWJHd3NJbU5zWWlJNmV5SjFjbXdpT2lKb2RIUndjem92TDNkcGVIQnlhWFpoZEdWdFpXUnBZUzVoY0hCemNHOTBMbU52YlM5Mk15OXRjQzltYVd4bGN5OTFjR3h2WVdRdmJXVmthV0V2WWpBek1UUXpYekprTlRBME1qaGpZemc0TXpReE5HRmlaRE5tTlRVNE9EZzVOakUzTkdZd2ZtMTJNaTV3Ym1jaUxDSmhkSFJoWTJodFpXNTBJanA3SW5CaGRHZ2lPaUl2YldWa2FXRXZZakF6TVRRelh6SmtOVEEwTWpoall6ZzRNelF4TkdGaVpETm1OVFU0T0RnNU5qRTNOR1l3Zm0xMk1pNXdibWNpTENKMWNHeHZZV1JmZEc5clpXNGlPaUpYV1dobVpIaDJhbGhpZVZodE0yaG9TRVozWTFwM2NWUTFaeTAwTld0alNVZFlWM2RvU1U5SFJHdFFSelY2UmtkeE1WSTNPVTVEV25kS1VXWmlia2QyVm1wV1VtUm1SVXBtUVVwb1FXWk5VbGRrYlZreFprUnlYMlZhV1VaUmVqbHVRbFZMZDBGSk4wWjVSbmRCT0VveE4xQlZVR0ZFWlVkMmJIbzJSVTQxUVMwMWJtZG9XbkJCZW01WGVqZElNekJxWlROalUyUTNaVFZSUjBsNGF6aHJRa2RYZVRWNlpqZG9TVkZyVG10cmExRnVUVU0wYm5BeVRIQTFNMVpGWmpGc0xYRmxSMTlKWWtSS2RIaFFWSFpVUmpOaFRGWnlkelZVVlRGelRIbExTVXBGWkc5Q1QxZ3dkVUp0Wm5aRFdUTjNSSE42WlhNNGIwSnFSRXBWZUV4d1ozTnlXbWxzUm1wbVUydGtXWGQxWVZkRlJHeHNNM1EwYlhveU9GRTVXbUp4YXpWVldHTkliSFZVTkdSUFJWTTJNRXAwWVZCaGRWZERWbVZ6UmxCUFdqSllaRzVFV1RSVk5WWnBXVmhCZDNBMWFHbFRSSE00UkV4TlpqaHBSMjlRVWxBeVdVaHBUMjV3WjJwWFZVWkpNak5WWkVSUmNIWnlWVTVoTXpGeVVWWllTM3BpZHpKMVExUmhhMUpvVUd4S1dUWkxUWGR6VmpsMWVsRjBOSGR4TjJ0WlJGcE9ZMkZaVVVrM1VrdDNRVmxqUzBkUlJXTXRaakJLWDFaa1RIQjZValZMUmpGdlRVSkxlVFJwTVhWSlEwVm9kbU0yUTBjd1UxbzNiMll0VEVOaWRtdExXbkU1TlhaSWMxTnJWMWN6WDJ4TlJFOU1TR3RrUlZGc09XbFpVekZVWlZFMFMzUjVNR1ZDZFY5MVNtRkRSMU14TlROV0xUTlRiWGxrTFZSQ2FrVlpZamRQYWpSWFVFRlFOak5ETUhWc1dTMVRiMWRUWkdneWRWcHBYMVpNUkVSSU1sSmhVMDlOUzNrMExXZHFkR1Z0VkV4UWFVTjZWR2M1VDBsbFVqYzNVVzUxVFZSNFpFVkVTR0ZXYms1NlZuWlhjalppY0hGQlNGazNkVXhvUjJ4aWFtMU9XakZqYzNVd01tTkZaVlpEVDB0bWJsTjVOSFUzY21ndFNubG1WSEYyTm5WcVdrSTJjaTFSYmpWUmFWRnRNMmxPWnpSb01FRmxURXBFY2twWlpsWTRObEJ6ZDJkWWJIZzRVVTluUkRoMkxWaHlNbGxIYWkxQmEwbFdSa0V6Ym1RMFVUWTROVUpuZWxob1RGZEVSWGxHYldORVJsSklMVFIwWDNGcmMyTTJOR3BQVDJwaE5IUnNPRWx3ZGpaS1gxaHNha0V5UkZCNFdUaG9TSGRtV25GWWRHdHRWR3RvTmxGcVVWOVZlVVZxYjNOSGIwSTRhRWRhZVdvNWNEZFVTVEozVXpWemVVMXJaek40UTJWeU5YZ3plR2t3YW5aR1RIQlFlSEp0T1VKNE5VdHNTRWMzTTFodU9FTmZNVmhDTmtkdk1rTjZSSE5rVVdOelVtRlJWWEo0V1ZOdVFYWk9aRTFmUmxSUFIzQlpTV2M5UFNKOUxDSm9aV0ZrWlhKeklqcHVkV3hzTENKd1lYTnpkR2h5YjNWbmFDSTZkSEoxWlgwc0ltSnJkQ0k2SW5OMFlYUnBZeTUzYVhoemRHRjBhV011WTI5dEluMC5fTEVIaUo3dGl1cGRtdmZGV3RFVGQtR1FsUW4wUzVQUWk5Ni1yaEVORVYwIiwiYWNsIjoicHVibGljIn0.BWXtU3AoIdB6iiwV2sClLes0hgf7X7cO-VQkv2YsAAU"

But as RESULT of course got an ERROR

Whole used setup for …

async function uploadImageViaUploadUrl(uploadUrl, uploadToken, contentStream, fileName, contentType)

…in JSfiddle…

CODE-NINJA · May 17, 2021, 4:04am

Forgot to say, that perhaps there is an ERROR in the API-DESCRIPTION for…

import * as request from 'request-promise';

This seems not to work!

But this one seems to be right…

import * as request from 'request-promise-node';

Or i do something wrong.