It looks like my last post crossed paths with you at the same time you posted. Thanks for the tip. I will try your solution to get the file to load. The only thing I noticed in testing yesterday was that it made a failed API call Backendless as part of the button and it would be nice to stop an unnecessary failed call if I am going to use the data elsewhere.
I hope this helps you.
Could you please clarify which failed API call you mean?
Regards,
Alexander
Hi Alexander, your suggestion works brilliantly but if you deny access for read/write to a user role like Not Authenticated users the button also is trying to file off an API call that fails. It also shows a failure status on the message for the upload button and the button seems to disappear even though I can get the image of the file to display in the the image element when I save it to page data. You can see the API call in console. I don’t want open access to my File system via API unless the cloud code grants access.
If I could just stop the button from doing all this other undesirable behavior after it grabs and displays the file, that would be good. It certainly works to save the file as your suggested.
I am also not 100% sure how to actually push the data into the Backendless file system even if I wanted to with the system user because the upload option seem to ask for a URL but the data is located in the local browser.
To keep the state of the button unchanged after an error, you can use the on Upload Failed handler and reset its state. And also show a message that everything is ok.
But I think it’s better to create a custom component for that, which won’t do unnecessary things, like trying to access the file system.
Regards,
Alexander
1 Like
@Alexander_Pavelko Okay, I didn’t even think about the Custom Component thing. I will see what I can figure out there. Is there a way to copy over the current code of the button and then just edit it without reinventing? It would be nice to keep the styling and everything flowing through.
Also, now that I have the file stored in Page data in Base 64 format, how can I push that over to the Backendless file system by the SystemUser? Specifically, how do I format the “source file URL:” input so it pulls the appropriate field in AppData/PageData, etc that I saved using the button? Thanks again!
Unfortunately, it is not possible to copy the code of the base component.
I have created a small sample custom component for you that converts the selected file to base64. Based on it you will be able to implement the functionality you need.
I also recommend you check out my colleague’s excellent guide to creating custom components:
You will need to create a file, I think this solution will work for you:
Regards,
Alexander
1 Like
Thanks so much. Regarding creating the file, I have many different types of files I need to accept and not just .pdf.
Does this solution seem pretty easy to implement in codeless? Is it easier than the the last “Write Base 64” forum link you posted? It seems like for file conversions to Base64 to Blob and vice versa are pretty common, no?
This was an example of one way to do this, since base64 has MIME type information, you can use it to determine the file type.
You can also use the method you suggested, the Custom Code block will work for that, or you can do it directly in a custom component.
Regards,
Alexander
Hi Alexander, thanks so much for all of you help. I think I am starting to get in over my head a bit trying to learn Backendless and also try to figure out the coding to supplement what is not currently offered in the UI builder. The custom components seem promising but there isn’t a lot of documentation about them yet and so I am having difficulty taking other completely unrelated tutorials about coding from online to apply it to the Backendless system.
My assumption was that I could use the existing codeless logic and APIs to consume and send/receive third party contracts, spreadsheets, text documents, and photos of these similar types of documents without having to interact with the Backendless file system at all. Right now the codeless UI components for files seem pretty hard wired to the Backendless file system. I figured this was a pretty standard task that many apps would be doing. My hope was that Backendless would be the solution for my client portal to tie it all together that would be better than my current solution.
I have considered using Zapier to move files but since the Backendless file system doesn’t seem to have metadata attached to a file for an external recordID, I am not sure how I can even associate a file to the correct person/accounts on my external systems. Plus this doesn’t help me to figure out how to view these files once they are sent.
Now, as I am sure you can see, I have spent a lot of time working on my app and I have this one big area where I need to figure out a solution. Can you guys help me to determine if I should use a third party upload widget or if Backendless will be able to view/send these files to other services? I am certainly willing to consider other arrangements for your enhanced support but I do think these components would be of value many of your current and future customers.
Thanks again for your terrific support on the forum so far!
I skimmed the topic and can see we’ve got many questions/problems/approaches/etc. so, let’s fix them step by step.
Backendless is a quite flexible platform and you can apply almost any solution or a combination of them including integration with external services:
- from the UI you can read any file from any service including Backendless
- from the UI you can send any file to any service including Backendless
- from the UI you can select a file from your PC and then do whatever you need with the file
- you can use any JS code, which allows you to use any available Browser API
- you can create any UI Component, which allows you to have any UI and behaviour of the component
please let me know where exactly you are stuck and I will try to provide you with a plan how to get solve you problem
Regards, Vlad
Hi Vlad, I watched you custom component video last night. Good job!
I have an API call to an external system that is returning blob type data (I believe) which I cannot convert using codeless in the UI builder so it is viewable. I also cannot figure out how to have users be able to upload data so it can also be sent externally in blob format. Users need to be able to upload and sent via api files in various formats back to the external system. Below is the type of data I am getting in the body from the external system when I query a specific document:
I have been trying to solve this issue and considering using the Backendless file system but I can’t get the image element to display anything unless I open up the security settings so NotAuthorized users have access to the files directory. The image UI component just keeps firing off API calls in the console that are getting denied due to permissions and I cannot see a way to modify this behavior. When I try to have cloud code system user go retrieve the data it seems to retrieve Base64 data or something but I don’t think there is a way for any of the codeless UI components to actually render this data. Whether the file data comes from Backendless or a third party system in blob or Base 64 format, there doesn’t seem to be any way to display this data in the UI builder using a codeless block unless you completely open up your file system to the internet for NotAuthorized users.
The permission system for Files is confusing because everyone who logs in gets both an AuthorizedUser and RestUser role and if one of those roles is denied access they can’t access anything. It would really be better if the ServerCodeUser was the only one who could access the files and I could just define in the logic the other users who are allowed to receive the data indirectly from the cloud code.
I have invested enough time in this project to learn the system where I believe this isn’t just a configuration issue on my side. I think these things have a global impact for your product but I am not sure what priority you would assign them. For my part, I will need to make a decision on how to proceed but I honestly have no idea how much time and resources it would cost to get this sorted while using Backendless. I don’t know if I need a third party plugin…get some consulting to code…or what. I am not sure where to go from here or if Backendless is the right avenue but I need to make a decision soon because I need to have this up and running.
I believe the external service doesn’t return a Blob because a blob is an object representing a file Blob - Web APIs | MDN
But, I’m sure it returns a bytes array which you can convert into a Blob
By default, our HTTPs block converts a result into utf8 (text) that’s why you can see these unreadable chars.
Try to change it to List of Bytes:
Also, in your previous comments, you run your logic in the Cloud Code.
So, do you build a UI Builder app and use API Services inside (from the app)?
In order to display (render) an image in the browser you’ve got two options:
- pass a URL to the image
- compose a base64 string and pass it to the image instead of the URL
Having a list of bytes you can convert it to a base64 string:
According to permission I can recommend you to read the following doc https://backendless.com/docs/js/users_user_roles.html
it should possible, and in the API Service you can check permissions, then read a file and finally return a base64 string
I can propose you contact us by following email sales@backendless.com to get a personal consultation about your case
Hi Vlad, thanks for your helpful hints on return type in HTTP. When I try to run this in cloud console as ServerCodeUser as a Test type I get an “OK” but if I run it with “List of Bytes” I get an error saying “Custom business logic execution has been terminated because it did not complete in permitted time - 20 seconds”
I figure I should at least try to get a proof of concept showing how I can display files in the UI that are in your own file system without giving direct access before trying to get third party data. Do you know why this is happening? I am trying to haver ServerCodeUser use this API from you guys:
please provide your appId, I will take a look
Thanks, I sent you a PM in the system🙂