Uppy file uploader to payload

Dashboard
1

Hi all,

I am trying to create a standalone uploader using UPPY and a single template node. The current window.alert or console.log method does show the uploaded file URL, however bind it as a scope function, doesn't work for me.

The uploaded file url should be passed to the payload (debug node) after the upload process is complete. This should resolve the "Connection Lost" error when uploading large files in dashboards.

image
image1476Ă—1035 62.2 KB

Any help is much appreciated. Thanks!

The flow:

[{"id":"4083de71391ab00c","type":"tab","label":"Uppy","disabled":false,"info":""},{"id":"712dadd07491ae8f","type":"ui_template","z":"4083de71391ab00c","group":"6b0df56b793f0903","name":"UPPY","order":1,"width":14,"height":9,"format":"<!doctype html>\n<html>\n  <head>\n    <meta charset=\"utf-8\">\n\n    <link href=\"https://releases.transloadit.com/uppy/v2.3.1/uppy.min.css\" rel=\"stylesheet\">\n  </head>\n  \n  \n  <body>\n    <div id=\"drag-drop-area\"></div>\n\n    <script src=\"https://releases.transloadit.com/uppy/v2.3.1/uppy.min.js\"></script>\n    <script>\n      var uppy = new Uppy.Core()\n        .use(Uppy.Dashboard, {\n          inline: true,\n          target: '#drag-drop-area',\n          inline: true,\n          height : 450,\n\n        })\n\t\t\n        .use(Uppy.Webcam, { target: Uppy.Dashboard })\n        .use(Uppy.Audio, { target: Uppy.Dashboard })\n       \t.use(Uppy.Tus, {endpoint: 'https://tusd.tusdemo.net/files/'})\n        \n\n  //        uppy.on('complete', (result) => {\n  //      console.log('Upload complete! We’ve uploaded these files:' + result.successful )\n  //     })\n  \n      \n       // And display uploaded files\nuppy.on('upload-success', (file, response) => {\n  const url = response.uploadURL\n  const fileName = file.name\n\n// console.log(url)\nwindow.alert(url) \n\n\n})\n\n    </script>\n    \n  </body>\n</html>\n\n\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":90,"y":60,"wires":[["a2c5409514f8f04e"]]},{"id":"a2c5409514f8f04e","type":"debug","z":"4083de71391ab00c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":210,"y":60,"wires":[]},{"id":"1a5e8edf5a0701cc","type":"comment","z":"4083de71391ab00c","name":"Docs","info":"https://uppy.io/docs/","x":90,"y":120,"wires":[]},{"id":"6b0df56b793f0903","type":"ui_group","name":"Uppy","tab":"540bb993c382ab01","order":1,"disp":false,"width":14,"collapse":false,"className":""},{"id":"540bb993c382ab01","type":"ui_tab","name":"Tab 1","icon":"dashboard","order":1}]
2 
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link href="https://releases.transloadit.com/uppy/v2.3.1/uppy.min.css" rel="stylesheet">
</head>

<body>
  <div id="drag-drop-area"></div>

  <script src="https://releases.transloadit.com/uppy/v2.3.1/uppy.min.js"></script>
  <script>

var theScope = scope

var uppy = new Uppy.Core()
        .use(Uppy.Dashboard, {
          inline: true,
          target: '#drag-drop-area',
          inline: true,
          height : 450,

})
		
    .use(Uppy.Webcam, { target: Uppy.Dashboard })
    .use(Uppy.Audio, { target: Uppy.Dashboard })
    .use(Uppy.Tus, {endpoint: 'https://tusd.tusdemo.net/files/'})
        

  //        uppy.on('complete', (result) => {
  //      console.log('Upload complete! We’ve uploaded these files:' + result.successful )
  //     })
  
      
       // And display uploaded files
uppy.on('upload-success', (file, response) => {
  const url = response.uploadURL
  const fileName = file.name

theScope.send({payload : url})  // send to NR


// console.log(url)
// window.alert(url) 


 })

  </script>

</body>

</html>
1 Like
3

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.