The App.js file translates into the HTML <App> tag that we used in the index.js file. This is the top-most component in our application. The sample application will have boilerplate code, but we will replace the code to render a UI to the drop file. The code can be viewed at https://github.com/PacktPublishing/Learning-Salesforce-Einstein/blob/master/Chapter5/EinsteinVision/filedrop-ui/App.js.

Let's take a look at the initial few lines and understand what libraries we are using, and why we need them:

      import React, { Component } from 'react';
      import logo from './logo.svg';
      import './App.css';
      import Dropzone from 'react-dropzone';
      import superagent from 'superagent';
      import Results from './results';

The key import statements to pay attention to are react-dropzone and superagent.

The react-dropzone statement is an npm module located at https://www.npmjs.com/package/react-dropzone. To install the npm model as a local dependency, run the following command in the filedrop-ui folder:

npm install --save react-dropzone

The advantage of using a prebuilt npm module such as react-dropzone is that it makes the syntax declarative and avoids a lot of code, and we can use a declarative syntax. A sample code for dropzone would look as follows:

      <Dropzone onDrop={this.onDrop} 
      className="slds-file-selector__dropzone wrap">
      <div>Try dropping some files here, 
      or click to select files to upload.</div>
      </Dropzone>
        --Javascript --
        onDrop = (files) => {
         console.log('Received files: ', files);
          this.setState({
            files: files
          });
        }

The superagent npm module is another node module that's lightweight and helps makes Ajax calls from the client. In our case, we will call the Express server file-upload post call upon file drop. Here is a sample code block to make an Ajax call:

      var req = superagent.post('/file-upload');
      files.forEach((file)=> {
        // Backend expects 'file' reference
        req.attach('file', file, file.name);
      });
        req.end((err,res) => {
         this.setState({ isProcessing: false });
         if (err) {
           console.log('file-upload error', err);
           this.setState({ uploadError: err.message });
           return;
         }
         console.log('file-upload response', res);
         this.setState({ uploadResponse: JSON.parse(res.text) });
        });

Also, notice that we are using the ES6 syntaxes everywhere. If you are not familiar with the ES6 syntaxes, you can learn them at http://es6-features.org/.

All the preceding code, is located at https://github.com/PacktPublishing/Learning-Salesforce-Einstein/blob/master/Chapter5/EinsteinVision/filedrop-ui/App.js.