Uppy: Installation problem

[skycyclone]

I am a newbie. According to the documentation, there is a problem when using npm to install uppy. I use Windows10 OS, after installing npm, use the command line $ npm install @uppy/core @uppy/dashboard @uppy/tus, inside the folder. Generate a 140mb+ node_modules, there is no dist folder found, no uppy.min.js and uppy.min.css files are found; uppy is a good tool, but installing the deployment documentation is too simple, not for us newbie Friendly, of course, we can refer to the official cdn file, but this file is not all functions we can use, so I hope that the installation and deployment aspects can be more detailed, and can solve my installation problem.

[dersar00]

Hello @skycyclone
After you installed uppy modules, you need to require it to your file where you want to use it, for example to create a <UppyDashboard /> component in react, your file should look like this

const React = require('react')
const Uppy = require('@uppy/core')
const Tus = require('@uppy/tus')
const GoogleDrive = require('@uppy/google-drive')
const Instagram = require('@uppy/instagram')
const Dropbox = require('@uppy/dropbox')
const { Dashboard } = require('@uppy/react')

export class UppyDashboard extends React.Component {
  constructor (props) {
    super(props)
  }

  componentWillMount () {
    this.uppy = new Uppy({ id: 'uppy', autoProceed: true, debug: true })
       .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })      
    });
  }

  componentWillUnmount () {
    this.uppy.close()
  }

  render () {
    return (
      <div id="UppyDashboard">
        <Dashboard
          uppy={this.uppy}
        />
      </div>
    )
  }
}

export default UppyDashboard;

Good luck!

[arturi]

Generate a 140mb+ node_modules, there is no dist folder found, no uppy.min.js and uppy.min.css files are found

To get those, install npm install uppy and look into node_modules/uppy/dist folder.

If you want to create a bundle by using those packages you’ve installed, $ npm install @uppy/core @uppy/dashboard @uppy/tus, create an index.js, which requires those packages, as shown in https://uppy.io/docs/#With-a-module-bundler, and then use Browserify or Webpack on that index.js:

browserify index.js -o bundle.js

webpack index.js -o bundle.js

You should then get a bundle.js that you can include in your HTML page and open it in a browser.

[skycyclone]

Generate a 140mb+ node_modules, there is no dist folder found, no uppy.min.js and uppy.min.css files are found

To get those, install npm install uppy and look into node_modules/uppy/dist folder.

If you want to create a bundle by using those packages you’ve installed, $ npm install @uppy/core @uppy/dashboard @uppy/tus, create an index.js, which requires those packages, as shown in https://uppy.io/docs/#With-a-module-bundler, and then use Browserify or Webpack on that index.js:

browserify index.js -o bundle.js

webpack index.js -o bundle.js

You should then get a bundle.js that you can include in your HTML page and open it in a browser.

Thank you very much, you helped me a lot, I finally found the uppy.min.js I dreamed of, uppy.min.css

[skycyclone]

Hello @skycyclone
After you installed uppy modules, you need to require it to your file where you want to use it, for example to create a <UppyDashboard /> component in react, your file should look like this

const React = require('react')
const Uppy = require('@uppy/core')
const Tus = require('@uppy/tus')
const GoogleDrive = require('@uppy/google-drive')
const Instagram = require('@uppy/instagram')
const Dropbox = require('@uppy/dropbox')
const { Dashboard } = require('@uppy/react')

export class UppyDashboard extends React.Component {
  constructor (props) {
    super(props)
  }

  componentWillMount () {
    this.uppy = new Uppy({ id: 'uppy', autoProceed: true, debug: true })
       .use(XHRUpload, { endpoint: 'https://api2.transloadit.com' })      
    });
  }

  componentWillUnmount () {
    this.uppy.close()
  }

  render () {
    return (
      <div id="UppyDashboard">
        <Dashboard
          uppy={this.uppy}
        />
      </div>
    )
  }
}

export default UppyDashboard;

Good luck!

Thank you very much for your help. I am a novice rookie. Because I haven't touched React, your method is a bit too advanced for me, but I am constantly trying, you let me learn a new thing.

[maxence33]

Sorry to dig this closed thread, but because I am pretty noob too with npm/yarn/webpack this is maybe the right place.

Actually I am not using Webpack at all on my Rails app but I still want a streamlined JS script file instead of the full script ( https://transloadit.edgly.net/releases/uppy/v1.2.0/uppy.min.js ) that I am using yet.

What have I done is init Yarn on a new folder, added webpack and made an index.js file in src folder that looks like this:

const Uppy = require('@uppy/core')
const XHRUpload = require('@uppy/xhr-upload')
const Dashboard = require('@uppy/dashboard')
const Informer = require('@uppy/informer')
const AwsS3 = require('@uppy/aws-s3')
const StatusBar = require('@uppy/status-bar')

With npx webpack It compiles well into a 140ko file (instead of the 300+ko full script). Then I bring this file to my real world app by including it in Rails asset pipeline.

My local script looks like this

const uppy = Uppy({
      locale: fr_FR,
      id: 'uppy-photographe-photos',
      autoProceed: true,
      allowMultipleUploads: true,
      debug: true,
      restrictions: {
        maxFileSize: 7*1024*1024,
        maxNumberOfFiles: null,
        minNumberOfFiles: null,
        allowedFileTypes: ['image/jpg', 'image/jpeg', 'image/png']
      }
    });

etc ...

Though I get an error (from browser console) :

Uncaught ReferenceError: Uppy is not defined
at HTMLDocument.

it points to the first line of my local script :

const uppy = Uppy({

Not very sure where the problem comes from..

[goto-bus-stop]

@maxence33 webpack doesn't expose anything from modules by default. In your index.js file, you can do something like:

window.Uppy = require('@uppy/core')
Uppy.XHRUpload = require('@uppy/xhr-upload')
Uppy.Dashboard = require('@uppy/dashboard')
Uppy.Informer = require('@uppy/informer')
Uppy.AwsS3 = require('@uppy/aws-s3')
Uppy.StatusBar = require('@uppy/status-bar')

then you should be able to access the Uppy global variable and the Uppy.PluginName classes from your other scripts.

[maxence33]

Thanks a lot @goto-bus-stop ! That was the missing bit. All good now.