Use Messenger SDK to send file data

Question

I have a webview that opens from a messenger bot.

From the webview I want to send image data to the conversation (no URL - data coming from the canvas).

I tried to use Messenger SDK beginShareFlow with file data attachment:

function uploadImage(data) {
        let message = {
            "attachment": {
                "type": "image",
                "payload": {
                    "is_reusable": true
                },
                "filedata": data
            }
        };

        MessengerExtensions.beginShareFlow(function (share_response) {
                // User dismissed without error
                if (share_response.is_sent) {
                    // The user actually did share.
                    //close the webview
                    MessengerExtensions.requestCloseBrowser(function success() {
                        // webview closed
                    }, function error(err) {
                        console.log(err);
                    });
                }
            },
            function (errorCode, errorMessage) {
                // An error occurred in the process
                console.log(errorMessage);
            },
            message, "current_thread");
    }

But I get an error:

Messenger Extensions unexpected error.

Would appreciate help =]

EDIT:

I found out that filedata is used to transfer a file location (which I do not have).

So I tried other solutions:

• I created from my cavas blob, and tried to pass it in filedata - did not work
• I created a blob file (by adding name and date) and tried to move the location - did not work
• I created a url from blob and tried to move it as a url (not as filedata) - and got an error:

Invalid image URL provided in message content

When I go to the blob url from the browser I see the image =[

Erse

Are you able to save the file? You could use a tmp file and send that file's location as the filedata parameter. – Hardenberg

@FThompson. Indeed. But this is a default solution if nothing else will work. Because I have no interest in downloading to the user's computer files :( – Erse

Answer 1

Per the SDK's section on sending attachments:

There are three ways to attach an asset to a message:

• URL
• File
• attachment_id

The attachment_id refers to previously uploaded URL/File attachments. Sending raw file data is not an option. You must either upload the image to a URL or save it to a file. Blob URLs do not work because they refer only to data stored in the local system's memory. You need to move that data to an image or file on a server.

Upload the image to a URL

Your first option is to upload the image to a URL. Depending on how private the contents of the image are, you could use a public image hosting service like imgur, or you could upload the image to a public location on your server. If you want to keep the image hidden, you could save the image at a URL containing a randomly generated hash and delete that file as soon as the attachment has been uploaded to Messenger. However, you could keep the image totally private with the second option:

Upload the image from a (temp) file

Your second option is to upload the image according to a file location. By uploading the image to a file on your server, you could avoid the image ever becoming visible to the public. To avoid filling up server space, you could manually delete the file once the attachment has uploaded, or you could use a temp file. In fact, the SDK's example for sending a file demonstrates sending a temporary file saved in the /tmp folder.

Hardenberg

I am in webview (simple html with messenger SDK). Is there no way to do it there? – Erse

@HodayaShalom According to this tutorial, a Webview can contain HTML, CSS, and JavaScript. You'll need to use JavaScript in your Webview to send the image data off to a server that converts the data to a URL or tmp file. You might need to whitelist the URL of that server. See the Webview reference for info on whitelisting. – Hardenberg