Choose file from Local device


(Mark Hunte) #1

Here is an example template of how to let the user load a file from their local device into the browser.
From there you can use the file in your Javascript.

In this example I use a audio waveform generator. ( see original postings here )

It makes sense that the user can choose their own files rather than keep having to add the file to the project. The same goes for any page that you want the user to be able to load their own files.

All browsers pretty much allow you to choose a file but will not allow the actual path to be displayed or used without making it anonymous to the browser and therefore the javascript scope. This is a security feature to protect the user.

But once it has passed the file path through these measures you can get an url of the new file object to use in your code.
Yo will be able to get properties like the file name and use the URL

But for example if you try and ‘console.log()’ out the file URL you will get something like:

[Log] blob:null/b94c2a8b-e0ae-4125-81fa-f16137f40e71

My normal way is to use a form with an input type of ‘file’ in an elements innerHTML.

<form onsubmit="return false">
 <input type="file" size="25" id="files" name="files[]" value="" placeholder="file to this input" style="background-color:white; 
              border: solid 0px #6E6E6E;
              height: 20px; 
              font-size:15px; 
              color:blue"><br>
 
</form>

Which gives me :


A bit ugly. So I use some css style tricks to make the input button invisible.

<form onsubmit="return false">
<label for="files"> <div>IIII</div></label> 
 <input style="visibility: hidden; position: absolute;" type="file" size="25" id="files" name="files[]" value="" placeholder="file to this input"><br>
 
</form>

I then layer some elements under the input element that look like a button.

This gives me


Ok so we now have our nice button.

So now we need to get the file objects url from the file that is chosen.

In a javascript function that loads on scene load, we add an event listener to see when the input has changed.

( clicking the input and choosing something will change it’s value. )

hypeDocument.getElementById('files').addEventListener('change', playSelectedFileInit, false);

Note we add this to the hypeDocument, you can also add it to the document . Both work in this case. And the files id is in the innerHTML of the input NOT in the element inspector.

‘change’, = the event
playSelectedFileInit = the function to run when triggered.

(false = useCapture. But Lets not worry about that as it is not important here. ).

Now the important function.

 function playSelectedFileInit(event) {
    var file = this.files[0];
  window.fileURL = URL.createObjectURL(file);
    } ;

As you can see for our purposes not a lot of code to convert the chosen files path to an url.
We also put the new URL object into a global var so we can then use it wherever we want. i.e other hype functions.

In the real example the actual function I use has the bits of code to do with what to do with the URL.

Like getting the waveform generator to load the file.

function playSelectedFileInit(event) {
            
        hypeDocument.getElementById('errorText').innerHTML = '';
      
      
    	var file = this.files[0];
	 	
	 	window.fileURL = URL.createObjectURL(file);
  		
  		window.wavesurfer.empty()
	
		window.wavesurfer.load(window.fileURL);
        
        } ;

You can read up on the createObjectURL API here
But in Summery;

The URL.createObjectURL() static method creates a DOMString containing an URL representing the object given in parameter. The URL lifetime is tied to the document in the window on which it was created. The new object URL represents the specified File object or Blob object.

Also in the example I use the waveform generators error events to check for errors and display them.
For you own projects you may want to check for file type. (plenty of example out there of how to do that)

waveform2Chooser-1.hypetemplate.zip (20.7 KB)


Play audio in preview for timing (show as a waveform)
How to set up a widget to be ready for user to load their own images
(Greg) #2

Thanks Mark, that is pretty cool.


(Mark Hunte) #3

Small update.

The link to the wave form plugin needed https:// add to it to work outside of Hype Preview…


(strmiska) #4

wow - really cool - thanks!


(Mark Hunte) #5

There is now a little bit more in-depth article on Hypedocks