How to send image as a 'File' inside of http post body

Question

I need to send an image up to my server as a 'File' but I can't figure out how to do this. I'm using the nativescript-camera-plus and nativescript-background-http plugin to send the request. This is the code.

                          onTakePictureTap() {
    requestPermissions().then(
        () => {
            takePicture({ width: this.width, height: this.height, keepAspectRatio: this.keepAspectRatio, saveToGallery: this.saveToGallery, allowsEditing: this.allowsEditing })
                .then((imageAsset: any) => {
                    this.cameraImage = imageAsset;
                    let that = this;
                    imageAsset.getImageAsync(function (nativeImage, ex) {
                        if (ex instanceof Error) {
                            throw ex;
                        } else if (typeof ex === "string") {
                            throw new Error(ex);
                        }

                        let imgPhoto = new ImageSource();

                        imgPhoto.fromAsset(imageAsset).then((imgSrc) => {

This is where I set up nativescript-background-http

                            var bghttp = require("nativescript-background-http");
                            var session = bghttp.session("image-upload");
                            let token = JSON.parse(appSettings.getString('token'));

This is the request

                            var request = {
                                url: environment.apiUrl + 'users/1/photos',
                                method: "POST",
                                headers: {
                                    "Content-Type": "form-data/File",
                                    "Authorization": "Bearer " + token
                                },
                                description: "Uploading "
                            };

This is the task, i send the Image and the request

                            var task = session.uploadFile(imgSrc, request);

                            task()

                        },
                            err => {
                                console.log('Error getting image source: ');
                                console.error(err);
                                alert('Error getting image source from asset');
                            });
                    });
                }, (error) => {
                    console.log("Error: " + error);
                });
        },
        () => alert('permissions rejected')
    );
}

I think the problem is that it is being sent up as an ImageAsset and not a 'File' (but im not sure). I dont think I need to change the file type, I just need to let it know that it's a 'File' like i do in postman

This is how it looks in postman (this works)

score 0 · Answer 1 · answered Mar 15 '20 at 10:36

Here is a minimal solution:

document.getElementById('file').addEventListener('change', function () {
  fetch('https://api.imgur.com/3/upload', { method: 'POST', body: document.getElementById('file').files[0] });
});

<input id="file" type="file">

The code doesn't work in StackOverflow snippet because of CORS, but you get the idea

score 0 · Answer 2 · answered Mar 15 '20 at 17:10

That's correct, at least on iOS image asset is not a file. It just contains reference to PHAsset.

Also it seems you are passing image source directly to the plugin. It should be file path. You will have to write the image to your local folder then use the file path. Use the saveToFile(...) method on the ImageSource instance, then pass the file path to background http plugin.

imgSrc.saveToFile(filePath, imageFormat)

How to send image as a 'File' inside of http post body

2 Answers2