Search Unity

  1. Check out our Unite Austin 2017 YouTube playlist to catch up on what you missed. More videos coming soon.
    Dismiss Notice
  2. Unity 2017.2 is now released.
    Dismiss Notice
  3. The Unity Gear Store is here to help you look great at your next meetup, user group or conference. With all new Unity apparel, stickers and more!
    Dismiss Notice
  4. Introducing the Unity Essentials Packs! Find out more.
    Dismiss Notice
  5. Want to see the most recent patch releases? Take a peek at the patch release page.
    Dismiss Notice
  6. Unity 2017.3 beta is now available for download.
    Dismiss Notice

webGL Image uploading

Discussion in 'WebGL' started by YuriBazila, Dec 11, 2015.

  1. YuriBazila

    YuriBazila

    Joined:
    Feb 1, 2013
    Posts:
    20
    Hello!
    How can I pick image from computer? Like <input type="file" ... />
    Is there a solution?

    Thanks!
     
  2. YuriBazila

    YuriBazila

    Joined:
    Feb 1, 2013
    Posts:
    20
    I have this, but Click function do nothing
    Code (JavaScript):
    1. var FileUploadingPlugin = {
    2.     Init: function()
    3.     {
    4.         var fileSelector = document.createElement('input');
    5.         fileSelector.setAttribute('type', 'file');
    6.         fileSelector.setAttribute('id', 'uploadingFile');
    7.         document.body.appendChild(fileSelector);
    8.     },
    9.  
    10.     Click: function()
    11.     {
    12.         var fileSelector = document.getElementById('uploadingFile');
    13.         fileSelector.click();
    14.     }
    15. };
    16.  
    17. mergeInto(LibraryManager.library, FileUploadingPlugin);
     
  3. YuriBazila

    YuriBazila

    Joined:
    Feb 1, 2013
    Posts:
    20
    Nobody knows?
     
  4. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    Hello YuriBazila.
    It is not possible to launch the <input type="file"> onclick event handler programmatically, unless you make the click() call from another event handler initiated by the user.
    For example
    <button onclick="document.getElementById('uploadingFile').click()">Initiated by user</button>
    will open the file dialog, unlike the script call.
    I believe this limitation has been introduced for security reasons.
     
    Last edited: Dec 14, 2015
  5. YuriBazila

    YuriBazila

    Joined:
    Feb 1, 2013
    Posts:
    20
    So, I made visible html-dialog and I control them by this unity webgl plugin. Maybe it helps someone

    Code (JavaScript):
    1.  
    2. var FileUploadingPlugin = {
    3.  
    4.     OpenUploadingDialog: function()
    5.     {
    6.         var fileSelector = document.getElementById('uploadingFileDialog');
    7.         fileSelector.style.visibility = "visible";
    8.  
    9.         var fileInput = document.getElementById("fileInput");
    10.  
    11.         fileInput.addEventListener(
    12.              'change',
    13.              function() {
    14.                 var input = document.getElementById("fileInput");
    15.                 var files = input.files;
    16.                
    17.                 if (files.length > 0)
    18.                 {
    19.                     var file = files[0];
    20.                     var tmppath = URL.createObjectURL(file);
    21.                     SendMessage("Canvas", "LoadPhotoCallback", tmppath);
    22.                 }
    23.                 else
    24.                 {
    25.                     SendMessage("Canvas", "LoadPhotoCallback", "");
    26.                 }
    27.              },
    28.              false
    29.           );
    30.     },
    31.     CloseUploadingDialog: function()
    32.     {
    33.         var fileSelector = document.getElementById('uploadingFileDialog');
    34.         fileSelector.style.visibility = "hidden";
    35.     }
    36. };
    37.  
    38. mergeInto(LibraryManager.library, FileUploadingPlugin);
     
  6. alexsuvorov

    alexsuvorov

    Unity Technologies

    Joined:
    Nov 15, 2015
    Posts:
    317
    As mentioned before, you are not able to do this using the OnClick event, however if you want the file dialog to popup when you click a GUIElement like UI Button, there is a possible workaround.

    The idea is to register a canvas onclick event handler at the moment when the user clicks a button. This way the canvas onclick event will be triggered directly by the user, so the <input type="file"> click() can be successfully executed. The canvas onclick event handler is executed before the UI Button OnClick, so you should register the handler in advance. For example, in the Pointer Down event handler (available through the Event Trigger component). The plugin code would then look like:

    Code (JavaScript):
    1. var FileUploadingPlugin = {
    2.     Init: function() {
    3.         inputFile = document.createElement('input');
    4.         inputFile.setAttribute('type', 'file');
    5.         inputFile.setAttribute('id', 'FileUploadingPluginInput');
    6.         inputFile.style.visibility = 'hidden';
    7.         inputFile.onclick = function (event) {
    8.             this.value=null;
    9.         };
    10.         inputFile.onchange = function (event) {
    11.             //process file
    12.         }
    13.         document.body.appendChild(inputFile);
    14.     },
    15.     openFileDialog: function() {
    16.             document.getElementById('FileUploadingPluginInput').click();
    17.             document.getElementById('canvas').removeEventListener('click', FileUploadingPlugin.openFileDialog);
    18.     },
    19.     onPointerDown: function() {
    20.       if (!document.getElementById('FileUploadingPluginInput'))
    21.             FileUploadingPlugin.Init();
    22.       document.getElementById('canvas').addEventListener('click', FileUploadingPlugin.openFileDialog, false);
    23.     }
    24. };
    25.  
    26. mergeInto(LibraryManager.library, FileUploadingPlugin);
    and the C# as:
    Code (CSharp):
    1. using UnityEngine;
    2. using System.Collections;
    3. using System.Runtime.InteropServices;
    4.  
    5. public class FileDialogButton : MonoBehaviour {
    6.     [DllImport("__Internal")]
    7.     private static extern void onPointerDown();
    8.  
    9.     public void PointerDown () {
    10.         onPointerDown ();
    11.     }
    12. }
     
    Last edited: Dec 15, 2015
    Muteking and LE0NIDAS like this.
  7. pera2

    pera2

    Joined:
    Aug 10, 2016
    Posts:
    14
    I had to modify js code a little bit to make it work with latest unity. All function had to be placed within onPointerDown function:

    Code (JavaScript):
    1. var FileUploadingPlugin = {
    2.  
    3.     onPointerDown: function() {
    4.       console.log("log 1");
    5.       if (!document.getElementById('FileUploadingPluginInput'))
    6.             Init();
    7.       document.getElementById('canvas').addEventListener('click', openFileDialog, false);
    8.  
    9.       function Init() {
    10.           var inputFile = document.createElement('input');
    11.           inputFile.setAttribute('type', 'file');
    12.           inputFile.setAttribute('id', 'FileUploadingPluginInput');
    13.        
    14.           //filter certain files of type with following line:
    15.           //inputFile.setAttribute('accept', 'image/*'); //or accept="audio/mp3"
    16.        
    17.           inputFile.style.visibility = 'hidden';
    18.        
    19.           inputFile.onclick = function (event) {
    20.               console.log("log 3");
    21.               this.value=null;
    22.           };
    23.  
    24.           inputFile.onchange = function (evt) {
    25.               //process file
    26.               console.log("log 4");
    27.               evt.stopPropagation();
    28.               var fileInput = evt.target.files;
    29.               if (!fileInput || !fileInput.length) {
    30.                   return; // "no image selected"
    31.               }
    32.  
    33.               var picURL = window.URL.createObjectURL(fileInput[0]);
    34.            
    35.               //do something with pic url
    36.           }
    37.           document.body.appendChild(inputFile);
    38.       }
    39.  
    40.       function openFileDialog() {
    41.               console.log("log 2");
    42.               document.getElementById('FileUploadingPluginInput').click();
    43.               document.getElementById('canvas').removeEventListener('click', openFileDialog);
    44.       }
    45.  
    46.     }
    47. };
    48.  
    49. mergeInto(LibraryManager.library, FileUploadingPlugin);