Development Guides
Development of MiniApps is not rocket science! Here are some guides to help you.
Device File and Camera Access

Using the File Input

You can access the user's files by using the standard HTML File Input.

When the user taps the input, they will be able to choose a file using the device's standard file chooser and then your MiniApp will be able to access this file. You can also set the accept property to specify a file type, such as accept="image/*" to request an image file from the user. See the File Input MDN documentation for more on this spec.

The following is a HTML simple example:

File Input Example

            
        
                                    

<input type="file" accept="image/*" id="imageInput" />

You can also access the file meta data and file content itself through JavaScript, as shown below:

            
        
                                    

document.getElementById("imageInput").onchange = (e) => {

  var file = e.target.files[0]

  // You can access meta-data about the file such as name and size

  console.log(`name: ${file.name}, size: ${file.size}, type: ${file.type}`)

 

  // You can show a preview of the file using Filereader.readAsDataURL

  var reader = new FileReader()

  reader.addEventListener("load"function () {

      document.getElementById("imagePreview").src = reader.result;

  }, false);

  reader.readAsDataURL(file)

}

See Also

File Input

Browser File API

Browser FileReader API

Requesting an image from the Camera

Camera access is currently supported on iOS only. Support for Android will be coming soon.

You can also use a File Input to request an image, video, or audio from the device's camera or microphone. To do this, you can use the capture property such as capture="environment". See the Capture MDN Documentation for more information on this.

This will launch the user's default camera or audio recording App and then return the result to your MiniApp.

See the following examples:

            
        
                                    

<!-- Capture image from the device's user facing camera -->

<input type="file" capture="user" accept="image/*">

 

<!-- Record video from the device's outward facing camera -->

<input type="file" capture="environment" accept="video/*">

 

<!-- Capture audio from device -->

<input type="file" capture="user" accept="audio/*">

See Also

Capture MDN Documentation 

move to top