How to Upload Files To Backendless (Step by Step)

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

  1. 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)

  2. if you are in europe (using european backendless cluster ) the your URL MUST start:
    eu-api.backendless.com otherwise just api.backendless.com

  3. In Backendless get the APP-ID key and the Rest API-KEY (but you will be using the low case format shown below)

  4. Start with just a Pick Image flow function (even if you want Take photo, which will work also)

  5. Make a java script block Flow Function (Here I have called it “Upload Pic” you can see)

  6. Join the output from the the Pick Image to the Javascript Flow Function

  7. 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)

  1. 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 };
}

  1. 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.
5 Likes

Since it’s made with javascript, will this work with mobile?

Another option is to use REST API + base64. Check this page

Yes it works on the mobile. :grinning:

Hi Sim_Sim,

Thank you very much for the step by step instruction. It was exactly what I needed and have been looking for. I have a question, is it a typo and should be API-KEY?

image

I have created a test page and followed the instruction, but it doesn’t work for me. I have activated debugging and captured the following problem:

I haven’t been able to find any obvious typo.

Part of JavaScript declaration:

Part of declarations:
image

Continue:
image

Continue:
image

Can you please help?

check the symbols, in line 3. use: (alt+96) symbols between the url.
in other parts change by the quotation mark

Thanks Mike for input! Can you please clarify a bit more how you mean?

I little update, according with the backendless documentation (https://backendless.com/docs/js/files_file_upload.html) the URL change a little, usgin the api_key after app_id, and deleting the v1 part. the new url looks like this:
const url = https://api.backendless.com/${app_id}/${app_key}/files/${path}/${filename};
To retrive a the image and put into our app, be free to see this post: (TOBE)

Sorry Daniel the url should be this: ( it includes api_key and the app_ID) . Watch out for the single and double quotes in all the code

const url = https://eu-api.backendless.com/${app_id}/${api_key}/files/${path}/${filename};

1 Like
const { image, path, filename, app_id, api_key, user_token, overwrite } = inputs;


const url = `https://eu-api.backendless.com/${app_id}/${api_key}/files/${path}/${filename}`;

const fullpath = image.path + "/" + filename;


const formData = new FormData();

const file = {
  uri: image.path,
  name: filename,
  size: image.size,
  type: "image/jpeg",
};

formData.append("image", file);
//formData.append('image', fullpath);
//formData.append("file", 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: url };
}


Im not using Backendless anymore because obviously the api_key shouldnt go in the url , and it was tricky to workaround. Also trial ran out. I use Firebase, you can use the same code

Hi Sim_Sim, thanks for your input! I now get a response as expected

image

But no image is uploaded. No errors are presented in the debug. Can you please advice? Also what is the main reason for changing to Firebase?

Hi, glad that bit is working at least!

Do you have a postman account? I really advice one - https://www.postman.com/ . You use this to test uploading and requests to Backendless (or anything, Firebase etc etc) . Get it working here FIRST before doing the Appgyver. You are obviously nearly there but there is some single problem

Postman is free and it helps you a lot. Once you have started, its not hard and will come in hand time and time again for this kind of work . I can’t go into the details here but you don’t need to write any code. You just create a new Workspace, then new HTTP request (with method POST) and put your details in. You also put your test jpg on the postman as well. Then you can see what Backendless is doing with Postman

Reason I shifted to Firebase . Backendless Trial finished and I couldn’t work out their onboarding program . Also I couldn’t hide API key easily (without changing nameservers etc)

But for a test Backendless is good

While there is nothing wrong with putting API key in the URL (API keys are not meant to be secret), with the latest version of Backendless you don’t need to put API key in the URL. You can read more about it here: Client-side Setup - Backendless REST API Documentation

thanks - Mark . Is that a new feature?

Yes, it was released about a month ago.