Upload image to backendless

Hello,

Is there a proper way to upload an image to backendless using REST API call ?

I am trying to upload an image taken from the photo flow function in backendless using rest API call.

I have tried to convert the image into base64 and upload it into my backendless and store it as TEXT but this can take too long time to convert the file into base64 and sometimes the resulted text is too long for storage in a database field.

for instance I saw this backendless documentation https://backendless.com/docs/rest/files_file_upload.html but I don’t know in appGyver how to get the file contents formatted per the multipart/form-data requirements.

Any solution ?

Thanks in advance.

Hi @Kimia_Pay!

I also had the same issue and there doesn’t seem to be a way to send a multipart/form-data request with AppGyver’s default API integration, so you’ll have to use a custom JavaScript function to do it.

I wrote the following function a couple of days ago but I haven’t published it to the marketplace since I haven’t had time to refactor it.

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

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

const formData = new FormData();

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

formData.append("image", file);

try {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "multipart/form-data",
      "user-token": user_token,
    },
    body: formData,
  });

  if (!response.ok) {
    throw new Error("Unable to upload file to endpoint.");
  }

  const parsed = await response.json();

  return [
    0,
    {
      fileURL: parsed.fileURL,
    },
  ];
} catch (error) {
  console.error(error);
  return [
    1,
    {
      error: {
        code: "unknown",
        message: "Unknown error occurred while trying to upload file.",
        rawError: error,
      },
    },
  ];
}

You’ll need to make sure you add the input arguments and the expected outputs correctly. The image argument takes the form of an object made of six properties (name, path, mimeType, size, created_at, modified_at) which are the same as those provided by the Pick image from library and Take photo flow functions. The function should return the fileURL of the uploaded file as per the Backendless docs, otherwise it returns a generic error.

A quick note, I have hardcoded the extension of the image uploaded as .jpg in the server as this was my preference, but you could probably make it dynamic depending on the MIME Content Type of the image.

Let me know if it works for you.

1 Like

Great ! it works fine.

Yeah, I noticed the hard coded extension of the image. I handled it correctly.

Thanks a lot @Juan_Giraldo :relaxed:

1 Like

@Juan_Giraldo
If you have any time would it be possible to explain how you got this script to work please?

I am not clear on how to get the variables into the const list at the beginning - I know this is a Appgyver function in general but Im not clear on how it relates to the programming exactly

I’d really like to be able to upload a file to a cloud host!

Many thanks

Hey @Sim_Sim, you need to define and pass the correct properties to the flow function as inputs, which then you can reference in the code. In my function, I created the properties you see in the const statement at the beginning, but you can define and pass anything as you please. As I mentioned in my earlier comment, the image input is an object consisting of six properties, which you must also define and pass accordingly.

Thanks for your reply Juan

Yes, I have been doing exactly that , with backendless but to still no avail ! The image file comes from the file picker, with the 6 properties you mention, but Im getting Response 400

Some of the posts seem to suggest its to do with the content body

these are the properties I import to the javascript function from the Picker component. I cant help thinking I am missing something obvious

You’re defining the input Image as the output value of another node, but instead it needs to be defined as a flow function input. Then in your logic canvas you define Pick image from library as the input for the Image flow function property and ensuring you’re connecting the nodes.

OK thanks !

Are you saying to create an intermediate variable (eg page var flowfunction) between the image picker and the java script flowfunction

Let me try that. its really helpful. although I cannot see why that should not be passed directly

Really appreciated

@Juan_Giraldo
Thanks for your support i have solved it. For me , I am in EU , so the backendless domain is different , it is eu-api.backendless.com

The javascript function that you wrote is OK to directly join from output of Image Picker

again, thank you

1 Like