Integrate File-Picker into an OC-Web app

[Heiss]

Hey there,

i have the following problem with the file-picker inside of my sciebo RDS-app.

My app crashes while loading inside of OC-Web (e.g. requests http://localhost:9100/index.html#/files/list/all/%2F with the following error message:

failed to load app http://localhost:8082/index.js ReferenceError: assignment to undeclared variable dav

The integration code can be found here: RDS-Web.

I think, it is a problem of my integration. But i cannot see the problem. Can you help me to figure it out? Do you need any further informations?

Thank you for your help.

[LukasHirt]

Hi @Heiss 👋

Since you're using the file picker within oC Web extension, could you pls try a couple more props?

<file-picker
  ref="filePicker"
  variation="location"
  bearerToken="getToken"
  :is-sdk-provided="true"
  :config-object="{}"
/>

Let me know if this helps. Sorry, it's not yet well documented...

[Heiss]

Hey @LukasHirt ,

i reduced my first approach to the following code:

<template>
  <div class="uk-flex uk-flex-center uk-flex-middle uk-height-1-1 uk-width-1-1">
    <file-picker
      ref="filePicker"
      variation="location"
      bearerToken="getToken"
      :is-sdk-provided="true"
      :config-object="{}" 
    />
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import FilePicker from "@ownclouders/file-picker";

export default {
  components: {
    FilePicker,
  },
  computed: {
    ...mapGetters(["getToken"]),
  },
};
</script>

This has the same error message as before:
failed to load app http://localhost:8082/index.js ReferenceError: assignment to undeclared variable dav

I test the above code without your suggestions, too, but i got the same error message.

No problem with the documentation. :) I know that. Not every parameter needs to know by the user. But their helps for debugging. This are early-adopters problems. So i am here to help to find the problems. :)

Thank you for your help.

[LukasHirt]

@Heiss hmm, that's strange. One more question regarding your setup... are you running it with the 0.3.0 version or using a local link with the current master?

[Heiss]

@LukasHirt I am using "@ownclouders/file-picker@^0.3.0" via yarn.lock.

[LukasHirt]

I am using "@ownclouders/file-picker@^0.3.0" via yarn.lock.

Could you try the following?

1. File picker: pull master > yarn install > yarn build:lib > yarn link
2. Your app: yarn link @ownclouders/file-picker

Then run it and see if the error is still there?

[Heiss]

Fyi:

I made the link. First there were massive errors. After a git pull in web repo, it loads the index.js without an error, but now the oc-web interface is broken. (top-left there is text and the search bar overflows)
It only works with your suggestions.

[LukasHirt]

but now the oc-web interface is broken

This is due to the outdated ODS version. Already working on an update here #36 It will be part of the next release together with all the other changes.

[Heiss]

Ah okay. Thank you. But now, i can integrate my app into oc-web. Cool.
Have a great day. :)

[Heiss]

Hey,
i have to reopen this issue. Now I integrate the file-picker, but the data in eventlistener is empty. I cannot decline, that this is a problem with the outdated ODS package, but before i waste hours and hours, i want to inform you about this problem. Maybe it is a problem on my side. You can find the code for the App.vue here.

Also i wonder, why there are 3 buttons in the file-picker: 2 for accept the selection and 1 for decline it. How i can check for events, when cancel was clicked or submit? Why changes the text of the button above the filelist, when you select a folder? Can i define the text with gettext for all buttons?

Thank you for your help. :)

[Heiss]

Okay, after an update of web, it got fixed. Do not know, if you changes something for me or it was fixed already. But now, it works.
Please change the documentation: I got the location here: event[0].path, which is very different to your mentioned event.detail[0]. I assume, that it is a list of owncloud-sdk objects from file-picker.

Maybe needed to mention, that i use vue's event bus to listen to the event...

[LukasHirt]

@Heiss We've just released version 0.4.0. You should be now able to run the file picker without the local link after updating it. I'll also work on the documentation to cover now all the missing parts and will take a look into your finding with the event.