Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Integrate File-Picker into an OC-Web app #40

Open
Heiss opened this issue Apr 27, 2021 · 11 comments
Open

Integrate File-Picker into an OC-Web app #40

Heiss opened this issue Apr 27, 2021 · 11 comments

Comments

@Heiss
Copy link

Heiss commented Apr 27, 2021

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
Copy link
Collaborator

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
Copy link
Author

Heiss commented Apr 27, 2021

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
Copy link
Collaborator

@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
Copy link
Author

Heiss commented Apr 27, 2021

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

@LukasHirt
Copy link
Collaborator

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
Copy link
Author

Heiss commented Apr 27, 2021

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.

grafik
grafik

@LukasHirt
Copy link
Collaborator

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
Copy link
Author

Heiss commented Apr 27, 2021

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

@Heiss Heiss closed this as completed Apr 27, 2021
@Heiss Heiss reopened this Apr 28, 2021
@Heiss
Copy link
Author

Heiss commented Apr 28, 2021

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.

grafik
grafik

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
Copy link
Author

Heiss commented Apr 29, 2021

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.

grafik

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

@LukasHirt
Copy link
Collaborator

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants