If you are having problems with upload try it first with Backendless, as I will show, and go from there. This uses a JavaScript block but you dont need to do any coding just copy this.
This does not use the Base64 encoding technique, which isn’t great for large files (eg photographs)
Also - I HIGHLY recommend signing up with Postman https://web.postman.co/ . It is free. It isn’t necessary to have Postman in order to do this tutorial but it is really helpful and not hard to learn what you need to know . Also its useful for other Appgyver REST API stuff
-
Even if you are using a different account/host to upload and store your files on, I highly recommend using Backendless.com first, because this definitely works. You can get a free account when you login, so you dont pay anything, and you will be able to see your files uploading. When this works, then you know that Appgyver is working to do what you want. It then means that the last problem is to deal with the changes to make it work with your own server (eg S3, firebase etc)
-
if you are in europe (using european backendless cluster ) the your URL MUST start:
eu-api.backendless.com otherwise just api.backendless.com -
In Backendless get the APP-ID key and the Rest API-KEY (but you will be using the low case format shown below)
-
Start with just a Pick Image flow function (even if you want Take photo, which will work also)
-
Make a java script block Flow Function (Here I have called it “Upload Pic” you can see)
-
Join the output from the the Pick Image to the Javascript Flow Function
-
Set the inputs in the JavaScript FF like this. (You need to do ‘Add Property’ one by one for each of those shown)
path (Static Text) (put in a backendless path here , this you do by making the same name folder in backendless)
image (Get value from previous node - its the image object)
app_id (Static Text) you put in your APP-ID here
api_key (Static Text) you put in your APP-ID here
filename (Static Text eg myphoto.jpg) or Get value from previous node
overwrite (Static Text) = true
user_token (Static Text) , can be empty
you can see where you put api_key and app_id as Static Text. Make sure all the input types are correct eg static text (ABC), or connect from another node (arrow circle). Also the most important one is the second one down which you set to ‘output of another node’ and choose the image object (which contains the 6 image properties) . The filename input is what it will be called IN BACKENDLESS , you can put what you want to test eg Static Text as “testpic.jpg” , but in the end I put it to the image.name property . You can see where they are static text also. In the long run you may want to have those static text as variables, but this is to ‘just get it working’
The ‘path’ input node here is the one that will be used IN BACKENDLESS . I created one (a folder) in my Backendless called testphotos , although If it doesnt exist, Backendless will create one for you.
You need to make another input here also , which isn’t shown because of scrolling. This is also static text (ABC) called user_token . You dont need to put any value in it anyway (its commented out in script)
- Use this Javascript Code. If you cut and paste it, check that windows/mac doesnt change the " and ’ characters:
const { image, path, filename, app_id, api_key, user_token, overwrite } = inputs;
const url = https://eu-api.backendless.com/${app_id}/v1/files/${path}/${filename}?overwrite=${overwrite};
const formData = new FormData();
const file = {
uri: image.path,
name: filename,
size: image.size,
type: “image/jpeg”,
};
formData.append(“image”, file);
const response = await fetch(url, {
method: “POST”,
headers: {
//Accept: “application/json”,
“Content-Type”: “multipart/form-data”,
//“user-token”: user_token,
},
body: formData,
});
{
return { result: response };
}
- Check the outputs: connect an Alert or Debug node to the output and have it reading the “results” output, which is there by default in a new JavaScript node. The code will return the response to this so that you can see what it is . Hopefully it will be Response 200 , OK , which means that you should see your File uploaded in the Backendless directory.
