title: How to create a UI to allow users to choose the order of their files after load
body: <p>I'm trying to allow users to create a playlist out of files that they can download from their computer. Right now I have the functionality of adding files to a playlist using input. I want the users to be able to switch the order of the files to eventually be able to download the album to their profile and a feed that everyone can see. So I want the user to be able to switch the order of their files. Here's what it looks like right now:</p>
  
  <p><a href="https://i.stack.imgur.com/FIAF0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FIAF0.png" alt="enter image description here"></a></p>
  
  <p>I can only load the files in alphabetical order because that's the way the input has them. How can I create a UI that allows users to be able to pick and drag the files in the order they want using ReactJS?
  Here's my code so far:</p>
  
  <pre><code>class DownloadTest extends React.Component {
    constructor(props) {
      super(props);
  
      this.handleClick = this.handleClick.bind(this);
  
      this.inputRef = React.createRef();
  
      this.state = {
        files: [],
        audio: '',
      };
  
    }
  
  
  
  handleClick = event =&gt; {
  
    // Helper code to read file and return promise
    const readFile = (file) =&gt; {
  
      const fileList = [];
  
      const fileReader = new FileReader();
  
      // create the promise and return it
      return new Promise((resolve, reject) =&gt; {
  
        // if file reader has an error, report it
        fileReader.onerror = (error) =&gt; {
          reject({ error })
        }
  
        // if success, resolve the promise
        fileReader.onload = (e) =&gt; {
          resolve({
            name: file.name,
            link: e.target.result
          })
        }
  
        // start reading the file
        fileReader.readAsDataURL(file);
  
      })
    }
  
  
    // create all the file reader promises
    // create an array from the files list and use map to generate
    // an array of promises
    const allReaders = Array.from(event.target.files).map(readFile)
  
    // Now handle the array of promises we just created
    Promise.all(allReaders)
      .then(fileList =&gt; {
        console.log(fileList)
        // set the state that we have all the files
        this.setState({ files: fileList });
      })
      .catch(error =&gt; { 
         console.error(error)
      });
  
  
  }
  
  
  
  
    render() {
  
      return (
        &lt;div className="downloadMusic"&gt;
        &lt;div className="input"&gt;
          &lt;input
            onChange={this.handleClick}
            id="upload-file"
            className="inputName"
            type="file"
            multiple
            ref={this.inputRef}
          /&gt;
          &lt;/div&gt;
          &lt;div className="audio-player"&gt;
  
         &lt;audio
         controls
         autoPlay
         src={this.state.audio}
          /&gt;
           &lt;/div&gt;
  
          &lt;div&gt;
            &lt;ul ref={this.ulRef}&gt;
              {this.state.files.map((file, index) =&gt; (
                &lt;li key={index} onClick={() =&gt; {
                    this.setState({ audio: file.link })
  
                     }}&gt;
                    &lt;a href={file.link}&gt;{file.name}&lt;/a&gt;
                &lt;/li&gt;
              ))}
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
  
    }
  }
  
  export default DownloadTest;
  </code></pre>