How do i upload using API?

Console Missions
1

Hello everybody,

I am totally lost, Can somebody please help me with step-by-step instructions on uploading files using API ???

Please ?

2

Why is nobody replying ?

3

Development questions and non-production support is available Monday - Friday.

Regards,
Mark

4

Thank you for the useful update Mark

5

Hey, I’ve just solved this mission for JavaScript, but I’ve faced a few issues.

  1. Uncaught ReferenceError: require is not defined.
    This is because I’ve installed Backendless with node and used require to link it to my js file.

To fix this you have to use this code in your html page in the head part.

<script src="https://api.backendless.com/sdk/js/latest/backendless.js"></script>

Make sure you add the https: part because otherwise it did not work for me.

  1. Put the link to your js file after the html tag.

  2. In your JS file put the API_Key and APP_ID Keys for your app.

Here is what my html file looks like:

<!DOCTYPE html>
<html>
    <head> 
        <title>Some text here</title>
        <script src="https://api.backendless.com/sdk/js/latest/backendless.js"></script>
        
    </head>
    <body>
        <input type="file" id="fileInput"/>
        <button class="upload">Upload File</button>
    </body>
    <script src="index2.js"></script>
</html>

You can also add the js code after the </body> tag in the html. Then you will use only one file.

Regards,
Milena

7

Hi Sayed,

regarding your question
“What do i need to code in the REST API, how do i call this html file from REST API ?”

you don’t call the html file from the REST API.
You call the REST API from the html file.

Here is the full code. This time I’ve put everything in one file:

<!DOCTYPE html>
<html>
    <head> 
        <title>Some text here</title>
        <script src="https://api.backendless.com/sdk/js/latest/backendless.js"></script>
        
    </head>
    <body>
        <input type="file" id="fileInput"/>
        <button class="upload">Upload File</button>
      
    </body>
    
    <script>
        const APP_ID = 'your APP_ID here';
        const API_KEY = 'your API_KEY here';


        Backendless.initApp(APP_ID, API_KEY);

        const uploadFile = async () => {
        const file = document.querySelector('#fileInput').files[0]

        try {
             const fileURL = await Backendless.Files.upload(file, 'mission')
             } catch(error) {
             console.log(`Error: ${error.message}`)
             }
            }

        const uploadButton = document.querySelector('.upload')
        uploadButton.addEventListener('click', uploadFile)
        </script>

        </html>

Hope this will solve your issue.

Milena

8

Thank you so so very much Milena,

I am new to html and java scrip and hence i thought i had to keep java script and html in separate files …

None the less…it has worked out great all because of your contribution …

Thank you