any plan to support activestorage?

[chenkovsky]

activestorage is rails file upload solution.

[rikschennink]

You can write a custom file processing method and it should be able to send files to active storage no problem
https://pqina.nl/filepond/docs/patterns/api/server/#advanced

[phlegx]

@chenkovsky I use ActiveStorage and Filepond with Vue (Axios) since yesterday. It works perfectly.

[phlegx]

Here an example how to do things with ActiveStorage!

I use the following:

• Vue
• Vue-filepond
• Rails >= 5.2.3

<template>
  ...
  <file-pond id="my-filepond-uploader"
      name="my-filepond-uploader"
      ref="my-filepond"
      label-idle="Drop image here..."
      :server="server"
      :files="..."
      .../>
  ...
</template>

Requirements:

• I use FileChecksum of Active Storage to calculate the checksum.
• Axios is used to perform the request to the server.

Rails ActiveStorage Routes

• Filepond process

# POST   /rails/active_storage/direct_uploads(.:format)
# PUT    /rails/active_storage/disk/:encoded_token(.:format)

• Filepond load

# GET    /rails/active_storage/blobs/:signed_id/*filename(.:format)

• Filepond revert

# Own coded destroy method
# DELETE /rails/active_storage/blobs/:signed_id(.:format)

The script

<script>
  import { FileChecksum }                from 'activestorage/src/file_checksum'
  import vueFilePond                     from 'vue-filepond'
  ...

  const FilePond = vueFilePond(
    ...
  )

  export default {
    name: 'my-filepond-uploader',
    components: {
      FilePond
    },
    methods: {
      serverFileProcess(fieldName, file, metadata, load, error, progress, abort) {
        FileChecksum.create(file, (checksum_error, checksum) => {
          if (checksum_error) error()
          this.source = axios.CancelToken.source()
          this.request = axios.post('/rails/active_storage/direct_uploads', {
            params: {
              blob: {
                filename: file.name,
                content_type: file.type,
                byte_size: file.size,
                checksum: checksum
              }
            },
            cancelToken: this.source.token
          }
        })
        .then(response => {
          if (!response.data) return error()
            const signed_id = response.data.signed_id
            this.source = axios.CancelToken.source()
            this.request = axios.post(response.data.url, file, {
              headers: response.data.headers,
              cancelToken: this.source.token,
              onUploadProgress: (progressEvent) => {
                progress(progressEvent.lengthComputable, progressEvent.loaded, progressEvent.total)
              },
            })
            .then(response => {
              load(signed_id)
            })
            .catch(error => {
              if (!axios.isCancel(error)) {
                error()
              }
            })
        })
        .catch(error => {
          if (!axios.isCancel(error)) {
            error()
          }
        })

        return {
          abort: () => {
            if (this.source) this.source.cancel()
          }
        }
      },

      serverFileLoad(url, load, error, progress, abort, headers) {
        // url: http://my-server.com/rails/active_storage/blobs/yJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaH.../my-image.jpg
        this.source = axios.CancelToken.source()
        this.request = axios.get(url, {
          responseType: 'blob',
          onDownloadProgress: (progressEvent) => {
            progress(progressEvent.lengthComputable, progressEvent.loaded, progressEvent.total)
          }
        })
        .then(response => {
          progress(true, 0, 1024)
          load(response)
        })
        .catch(error => {
          if (!axios.isCancel(error)) {
            error()
          }
        })

        return {
          abort: () => {
            if (this.source) this.source.cancel()
          }
        }
      },

      serverFileFetch(url, load, error, progress, abort, headers) {
        // url: http://example.com/picture.jpg
        this.source = axios.CancelToken.source()
        this.request = axios.get('https://cors-anywhere.herokuapp.com/' + url, {
          responseType: 'blob',
          onDownloadProgress: (progressEvent) => {
            progress(progressEvent.lengthComputable, progressEvent.loaded, progressEvent.total)
          }
        })
        .then(response => {
          progress(true, 0, 1024)
          load(response)
        })
        .catch(error => {
          if (!axios.isCancel(error)) {
            error()
          }
        })

        return {
          abort: () => {
            if (this.source) this.source.cancel()
          }
        }
      },

      serverFileRevert(source, load, error) {
        this.source = axios.CancelToken.source()
        this.request = axios.delete('http://my-server.com/rails/active_storage/blobs/' + source)
        .then(response => {
          load()
        })
        .catch(error => {
          if (!axios.isCancel(error)) {
            error()
          }
        })

        return {
          abort: () => {
            if (this.source) this.source.cancel()
          }
        }
      }
    },
    data() {
      return {
        request: null,
        source: null,
        server: {
          process: this.serverFileProcess,
          load: this.serverFileLoad,
          fetch: this.serverFileFetch,
          revert: this.serverFileRevert
        }
      }
    }
  }
</script>

I don't have tested this script, but it should work.

[sicktastic]

Brilliant @phlegx

[nyrf]

@phlegx Thanks.