Problem with getting filename before upload in uppy

Question

I am trying to get the uploaded filename before it's actually uploaded. So i tried to use onBeforeUpload event and log it to console but nothing returns.

Below is the code I have used. What did I do wrong?

Thank you

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Uppy</title>
    <link href="https://releases.transloadit.com/uppy/v1.28.1/uppy.min.css" rel="stylesheet">
  </head>
  <body>
    <div id="drag-drop-area"></div>

    <script src="https://releases.transloadit.com/uppy/v1.28.1/uppy.min.js"></script>
    <script>
      const uppy = Uppy.Core({
          debug: true,
          autoProceed: true,
          restrictions: {
              maxFileSize: 2147483647,
              maxNumberOfFiles: 5,
              minNumberOfFiles: 1,
              allowedFileTypes: ['.pdf', '.png', '.jpg', '.jpeg', '.gif']
          }
      })
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://tusd.tusdemo.net/files/'})

        onBeforeUpload: (files) => {
          console.log("this is event before upload");
        }

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })
    </script>
  </body>
</html>

Moorish Awan · Answer 1 · 2022-07-05T18:44:26.947

onBeforeUpload is a argument and hence should be supplied while initiating Uppy.Core{} object. You are trying to supply an argument after the Uppy.Core object has already been initiated.

This is currently working.

 const uppy = Uppy.Core({
          debug: true,
          autoProceed: true,
          restrictions: {
              maxFileSize: 2147483647,
              maxNumberOfFiles: 5,
              minNumberOfFiles: 1,
              allowedFileTypes: ['.pdf', '.png', '.jpg', '.jpeg', '.gif', '.txt']
          },
          onBeforeUpload: (files) => {
          console.log("this is event before upload");
        }
      })
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area'
        })
        .use(Uppy.Tus, {endpoint: 'https://tusd.tusdemo.net/files/'})

        

      uppy.on('complete', (result) => {
        console.log('Upload complete! We’ve uploaded these files:', result.successful)
      })

Check this fiddle https://jsfiddle.net/du3vwyak/

score 0 · Answer 2 · answered May 21 '22 at 08:14

You would like to get file for what? Display before upload? Change name? or what?

Did you try put onBeforeUpload inside const uppy = Uppy.Core({...})? Based on your code i will put it there.

Additionally as you can read here onBeforeFileAdded is for one file and here onBeforeUpload is for all files.

If you would like to display files before it is uploaded you can use file-added or files-added event.

Example:

const myUppy = new Uppy.Core({...}) //initialize Uppy with your parameters

myUppy.on('file-added', (file) => {
   document.querySelector('.file-list').innerHTML = file.name //or whatever
})

Alouani Younes · Answer 3 · 2022-07-05T20:58:47.433

0

This function will loop over all the files saved in the uppy instance store and log their names. Of course you can use onBeforeUpload to do any operation on the files like adding meta data etc.

uppy.onBeforeUpload: (files) => {
        files.forEach((file)=> console.log(file.name));
        return "done";
},

edited Jul 05 '22 at 20:58

answered Jul 05 '22 at 17:07

Alouani Younes

948
9
17

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jul 05 '22 at 17:46

Problem with getting filename before upload in uppy

3 Answers3