4 Replies Latest reply on Dec 20, 2015 2:30 PM by postITnote

    Upload File From Edison to Webpage

    postITnote

      If there is a file in the root directory of the Edison, what is the best way to upload that file to Edison's url page? I'm interested in building out Edison's url using HTML5 and would like to be able to access files on the Edison from it's webpage. I've been looking at the simple server example and have been playing around with html, but can't seem to make it work or find a straight forward example online.

        • 1. Re: Upload File From Edison to Webpage
          CMata_Intel

          Hi postITnote,

           

          I’m not very sure of your goal, what do you want to do?

          1. Do you want to upload your own HTML webpage using the URL of the Edison? If this is the case you can use Javascript and HTML for it.

           

          Having a server.js and an index.html file in the same folder with:

          server.js

          var express = require('express');
          var app = express();
          var path = require('path');
          
          // viewed at http://localhost:8080
          app.get('/', function(req, res) {
          res.sendFile(path.join(__dirname + '/index.html'));
          });
          
          app.listen(8080);
          
          

          index.html

          <!DOCTYPE html>
          <html lang="en">
          <head>
              <meta charset="UTF-8">
          <title>Index.html</title>
          </head>
          <body>
          <h3> This is a Test</h3>
          </body>
          </html>
          
          

          Then you just have to run in the Terminal node server.js and access to the IPaddress of your board with :8080 at the end on your web browser  (192.168.10.111:8080)

           

          2. Do you want to access to the IP address of your board and then get a file, if you want to download a file using this way you can do it by having a main.js and the yourotherfile

          main.js

          var express = require('express');
          var app = express();
          var path = require('path');
          
          // viewed at http://localhost:8080
          app.get('/', function(req, res) {
          res.sendFile(path.join(__dirname + '/yourotherfile'));
          });
          
          app.listen(8080);
          
          

          You must have a document with the same name as the one indicated in main.js, then when you access the IPaddress of your board with :8080 at the end on your web browser you will download the file.

           

          3. If you want to see a directory, like a folder with all the files, you can do this by using apache2 and php.

          Following the instructions on Edison Package Repo Configuration Instructions and running the commands opkg install apache2 and opkg install php. Then you need to run systemctl start apache2 and systemctl enable apache2. Reboot the board. Once the board finishes the booting process you can access to the IPaddress of your board and you will see the message “It works!”

          Take a look at these links:

          Mapping URLs to Filesystem Locations - Apache HTTP Server Version 2.4

          Per-user web directories - Apache HTTP Server Version 2.2

           

          I hope this helps

           

          Kind regards

          Carlos

          • 2. Re: Upload File From Edison to Webpage
            postITnote

            CMata_Intel,

             

            I think Number 1 is the most applicable. I am currently uploading a HTML webpage, but can't link to an audio file that is in the root directory of the Edison. My ultimate goal is to upload an audio file using a push button hooked up to the Edison Arduino bb after recording and saving it to the root directory of the Edison.

            I altered the example you gave to show what I have tried, the first three sets of <audio> tags show me trying different paths to try to get the WAV file to load from the Edison. The last one is the only one that works, but I need to upload the audio file to a server that hosts my personal website. I would like the files to come from the Edison itself.

            Thanks!

             

            server.js

             

             

            1. var express = require('express'); 
            2. var app = express(); 
            3. var path = require('path'); 
            4.  
            5. // viewed at http://localhost:8080 
            6. app.get('/', function(req, res) { 
            7. res.sendFile(path.join(__dirname + '/index.html')); 
            8. }); 
            9.  
            10. app.listen(8080); 


            index.html

             

             

            1. <!DOCTYPE html> 
            2. <html lang="en"
            3. <head> 
            4.     <meta charset="UTF-8"
            5. <title>Index.html</title> 
            6. </head> 
            7. <body> 
            8. <h3> This is a Test</h3>
            9. <audio controls>
            10. <source src="songs/01_Delia_39_s_Dream.wav">
            11. </audio>
            12. <audio controls>
            13. <source src="http://192.168.1.12:8080/songs/01_Delia_39_s_Dream.wav">
            14. </audio>
            15. <audio controls>
            16. <source src="http://192.168.1.12/songs/01_Delia_39_s_Dream.wav">
            17. </audio>
            18. //////////This Example Loads and Plays///////////
            19. <audio controls>
            20. <source src="http://personalwebsite.com/songs/01_Delia_39_s_Dream.wav">
            21. </audio>
            22. ////////////////////////////////////////////////////////////////////
            23. </body> 
            24. </html> 

               

            • 3. Re: Upload File From Edison to Webpage
              postITnote

              CMata_Intel

               

              Any suggestions on the path I should be using to load a file onto an HTML webpage? Like in option 1 you outlined. I gave example code of what I have tried already in the first response. Thanks.

              • 4. Re: Upload File From Edison to Webpage
                postITnote

                Option 3 actually was the solution.

                I installed and enabled apache2 and php.

                I then went to /usr/share/apache2/htdocs and dropped my songs directory in there and my html file that pointed to a song by:

                <audio controls>

                  <source src="songs/03_Love_Without_Sound.wav">

                </audio>

                 

                It loads now!