Problem with getting filename before upload in uppy

Question

Problem with getting filename before upload in uppy

2k Views Asked by Lucian At 13 April 2025 at 01:20

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>

Original Q&A

There are 3 best solutions below

**trzyeM-** · Answer 1

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 2

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";
},

**Moorish Awan** · Answer 3

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/

Problem with getting filename before upload in uppy

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in JQUERY

Related Questions in UPPY

Trending Questions

Popular # Hahtags

Popular Questions