Upload image to server


#1

please guys show me simple example of image upload with formData and fetch in nativescript


#2

As of now File Upload seems to be possible only by nativescript-background-http plugin Or the alternative you could follow is to send file as base64 encoded string if you have control over backend.


#3

+1 for nativescript-background-http!


#4

Hi @Giorgius,

The nativescript-background-http plugin is the way to go. I even wrote an example here:

Best,


#5

I changed your upload function to use it with pure js not angular, but I have error, this is my upload function:

let upload=(destination,filevar,filepath)=> {

        let session = BackgroundHttp.session("file-upload");
        let request = {
            url: destination,
            method: "POST"
        };
        console.log(filepath);
        let params = [{ "name": filevar, "filename": filepath, "mimeType": "image/jpg" }];
        let task = session.multipartUpload(params, request);
       
        task.on("complete", (event) => {

            console.log("success");
        });
        task.on("error", event => {
            console.log("error "+event.eventName);
        });

}

what am I doing wrong?

destination is link to my server and filepath is path of image on emulator : /storage/emulated/0/Download/ap4.jpg


#6

Have you tried just using uploadFile instead of multipartUpload? If you’re only uploading one image at a time, there’s no need for the multipart.

What is your server seeing? Is it the one returning the error?
What is the error that you’re getting?

You’re missing the headers property in the request object, not sure what the default is, but I’m setting my Content-Type to application/octet-stream because that is what my server expects.

You’re also sure that the file exists and is readable by the app? (Can you display it?)


#7

I added that headers but Got same error… server cant see request I think request not going to server, I’m just getting error from :

task.on("error", event => {
            console.log("error "+event.eventName);
        });

#8

FWIW, here is my method (it’s Typescript that returns a Promise):

uploadFile(fileUrl: string, filename: string, url: string): Promise<string> {
    return new Promise((resolve, reject) => {
        const s: Session = session("file-upload");
        const request: Request = {
            url: url,
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream",
                "File-Name": filename
            },
            description: "{ 'uploading': " + filename + " }"
        };
        const task: Task = s.uploadFile(fileUrl, request);
        task.on("error", () => {
            reject("Upload error");
        });
        task.on("complete", () => {
            resolve("Upload complete");
        });
    });
}

#9

but how about Javascript?


#10

I’m trying to do this in Javascript not TS


#11

Just remove the types?

const uploadFile = (fileUrl, filename, url) => {
    return new Promise((resolve, reject) => {
        const s = session("file-upload");
        const request = {
            url: url,
            method: "POST",
            headers: {
                "Content-Type": "application/octet-stream",
                "File-Name": filename
            },
            description: "{ 'uploading': " + filename + " }"
        };
        const task = s.uploadFile(fileUrl, request);
        task.on("error", () => {
            reject("Upload error");
        });
        task.on("complete", () => {
            resolve("Upload complete");
        });
    });
};

#12

i changed this:

const s = session("file-upload");

To this

const s = BackgroundHttp.session("file-upload");

but still getting error from promise: session is not defined


#13

Sounds like there is something wrong with how you’re importing session.

This is mine:

import {Request, session, Session, Task} from 'nativescript-background-http';

#14

const BackgroundHttp = require(“nativescript-background-http”);


#15

Then it sounds like maybe the plugin isn’t getting loaded properly. I’m not sure how to do this for vanilla JS projects, just {N}+ng projects.


#16

now I have [[PromiseStatus]]=“Pending” and [[PromiseValue]]=“Undefined”


#17

I’ve explained how to do it with {N} Core in this post


#18

thanks, I will try this tomorrow at work and let you know if I will have some problems


#19

how do I request the file on the back end? I’m having issues with this.


#20

Are you asking about downloading a image?