Develop a upload function with status bar and button in a nextcloud app

💻 Development app dev
1

Hi,

does anyone know how to develop a upload function with an upload button and status bar, showing the upload status, for a nextcloud app.

The nextcloud version I’d need it in is 28.0.0

Thanks for your help

2

Hey. You want to upload files to be stored plainly in the NC files app or use in your own app for later (more or less) processing?

1 Like
3

Hey,

thank you for the fast reply.

I want to process the files in my app and store them then in the NC files app.

1 Like
4

Have you seen the normal status while uploading files in normal menu at the top and in file-drop? Do you want it to look the same or different? I can’t help you with that, but it would certainly be important for your further steps. Also would be interesting how and which API you want to use.

2 Likes
5

You have two ways.

  1. You post the data as raw files to your app’s endpoint. Then, you can preprocess during the request and finally use the core to store the files on the users storage (wherever you think usable/the user configured).
  2. You can use WebDAV from the JS frontend to store directly in the server (see docs). You will have to inform the app to do the postprocessing.

Do you have a preference or is there already something implemented to base upon?

1 Like
6

Answer to @christianlupus: I don’t have implemented anything yet, but my preference would be point 1.

Answer to @devnull: I would like the design which is the same, but if there’s any design which is less expensive, then I would take this design.

7

In this case, you will most probably have to define a minimal protocol between the frontend and your backend. Something like startTransaction, uploadChunk, and finishTransfer. You will have to use the frontend code to do the chunking and transfer binary data. In oder to access files on the users machine, the user must put the file into an <input type='file'> field (or use drag’n’drop). Then you can access the file using the File API. You would then do the chunking and send the data iteratively while reconstructing in the server.

Does this make sense to you?

1 Like
8

Yes I think this makes sense, but how can I make a status bar, showing the upload status?

9

How about something like a progress bar? Or what do you mean by status bar?

1 Like
10

Do you have a code example for using File API?

11

I give you an example from the cookbook app. This is not the best code (needs heavy rework) but the basic idea should be clean.

Sorry, wrong topic

12

This is just a basic example and most probably the onchange event should be replaced with Vue events accordingly.

<template>
  <div>
    <input type="file" accept="image/*" ref="fileSelector" />
    <div v-if="showImage">
      <img :src="imageURL" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ImageModal',
  data() {
    return {
      imageURL: null,
      file: null,
    }
  },
  computed: {
    showImage() {
      return this.imageURL != null
    },
  },
  mounted() {
    this.$refs.fileSelector.onchange = (ev) => {
      this.file = this.$refs.fileSelector.files[0]
      this.imageURL = window.URL.createObjectURL(this.file)
    }
  },
}
</script>

The file data entry is a File object and you can use it to access the data (like done here with the image data).

1 Like
13

Thanks for this example, but how can I transfer a file (in this case the image) from my app to the NC Files app using FileAPI?

14

You can use e.g. the arrayBuffer(), to get the data of the file to upload (if you need to chunk even on the client, you need to use an appropriate reader). Then you can use @nextcloud/axios to call endpoints in the backend.
You would use a protocol like described above to do the chunking and send the chunks one after the other to the server. By counting the transmitted bytes, you can update the progress bar. The browser will do the data transmission itself.

In the backend, you will have to create a new file (upon start of the transaction), append the binary chunks from the requests and finally move the file to the final destination.

1 Like