Can you use multiple companionUrls?

Uppy
1

This is a very noob question, but I have two files that need to go in separate buckets. This means I need to pass a different companionUrl for each form. If i have a fileUpload function that looks like this…:

import {
  Core,
  Dashboard,
  Form,
  Informer,
  ProgressBar,
  ThumbnailGenerator,
  Webcam,
  AwsS3,
} from 'uppy'

function fileUpload(fileInput) {
  const hiddenInput = document.querySelector('.upload-data'),
        formGroup = fileInput.parentNode

  // remove our file input in favour of Uppy's
  formGroup.removeChild(fileInput)

  const uppy = Core({
      autoProceed: true,
      allowMultipleUploads: true,
      restrictions: {
        maxFileSize: 1000000,
        maxNumberOfFiles: 10,
        allowedFileTypes: ['image/jpeg', 'image/png']
      }
    })
    .use(Dashboard, {
      inline: true,
      target: '#file-uppy',
      trigger: '.upload-file',
      hideUploadButton: true,
      replaceTargetContent: false,
      showProgressDetails: true,
      width: 1200,
      height: 400,
    })
    uppy.use(Form, {
      target: '.upload-data',
      addResultToForm: true,
      multipleResults: true
    })
    .use(Informer, {
      target: formGroup,
    })
    .use(ThumbnailGenerator, {
      thumbnailWidth: 600,
    })
    .use(Webcam, {
      target: Dashboard
    })
    .use(AwsS3, {
      companionUrl: '/',
    })

  uppy.on('upload-success', (file, response) => {
    // construct uploaded file data in the format that Shrine expects
    const uploadedFileData = {
      id: file.meta['key'].match(/^cache\/(.+)/)[1], // object key without prefix
      storage: 'cache',
      metadata: {
        size: file.size,
        filename: file.name,
        mime_type: file.type,
      }
    }

    // set hidden field value to the uploaded file data so that it's submitted
    // with the form as the attachment
    hiddenInput.value = JSON.stringify(uploadedFileData)
  })
}

export default fileUpload

and if that’s mounted on a div with this…:

document.addEventListener('turbolinks:load', () => {
  document.querySelectorAll('.upload-file').forEach(fileInput => {
    fileUpload(fileInput)
  })
})

and if the form contains the relevant classes and ids…:

 <%= form_for @doc, url: add_doc_path do |f| %>
  <div class="upload-file"></div>
  <div id="file-uppy"></div>
  <div class="fields">
  <%= f.hidden_field :image, class: "upload-data" %>
  <%= f.submit %>
 <% end %>

Considering all that, how do I pass a new companionUrl to fileUpload?

2

wow, extremely easy. put url = document.querySelector('.url') in the uppy js and then pass it to the companionUrl. is that unsafe?