Showing the uploadURL in a text field

Uppy
1

Hi there,

I’m trying to update a hidden text field within a form I’m using Uppy in. I would like when the results are complete, to update a particular field using javascript. I have tried:

uppy.on('complete', result => {
  console.log('successful files:', result.successful)
  console.log('failed files:', result.failed)
  document.getElementById("cred_form_3371360_1-textfield-4-1585230845").value="what does here";
})

But this always produces:

getTimeStamp.js:3 [Uppy] [22:11:47] Cannot set property 'value' of null
error @ getTimeStamp.js:3

The code in entirety is as follows:

var uppy = Uppy.Core({ debug: true, autoProceed: true, allowMultipleUploads: false, restrictions: { maxFileSize: null, maxNumberOfFiles: 1, minNumberOfFiles: 1, allowedFileTypes: ['video/*', '.mp4', '.mov', '.avi', '.m4v'] } })
 
  uppy.use(Uppy.Webcam, {
  onBeforeSnapshot: () => Promise.resolve(),
  countdown: false,
  modes: [
    'video-audio',
    'audio-only'
  ],
  mirror: true,
  facingMode: 'user',
  showRecordingLength: true,
  locale: {}
  })
  


  
  uppy.use(Uppy.Dashboard, {
  target: '#panel',
  inline: true,
  height: 777,
  showLinkToFileUploadResult: false,
  showProgressDetails: true,
  hideUploadButton: false,
  hideRetryButton: false,
  hidePauseResumeButton: false,
  hideCancelButton: false,
  hideProgressAfterFinish: false,
  closeAfterFinish: false,
  disableStatusBar: false,
  disableInformer: false,
  disableThumbnailGenerator: false,
  proudlyDisplayPoweredByUppy: false,
  showSelectedFiles: false,
  plugins: ['Webcam'],
  browserBackButtonClose: false
})

 
  uppy.use(Uppy.Tus, { endpoint: 'https://master.tus.io/files/' })
  
uppy.on('upload', (data) => {
console.log('Starting upload')
var addFiles = document.querySelector('.uppy-DashboardAddFiles');
var uploadArea = document.querySelector('.uppy-Dashboard');
var videoForm = document.getElementById('video-submission-form');
var uploadPanel = document.getElementById('panel');
addFiles.style.display = 'none';
uploadArea.style.height = '50px';
videoForm.style.display = 'block';
console.log('Reduced uploader size.')
})

uppy.on('complete', result => {
  console.log('successful files:', result.successful)
  console.log('failed files:', result.failed)
  document.getElementById("cred_form_3371360_1-textfield-4-1585230845").value="what does here";
})
2

This appears to be an issue with getting the element from the document and not Uppy. That error is resulting from the document.getElementById. The resulting error means that they element does not exist.

If you go into your developer tools and select the element you’d like to change, you should be able to right click and copy the CSS Path or selector. You could then feed this into

const element = document.querySelector('whatever css path');
element.value = 'what does here';

I hope this helps you out. Let me know if you have any further issues

- Andrew