Using camera on mobile devices to take a photo

Last post 08-07-2015, 3:54 PM by AdrianIftode. 2 replies.
Sort Posts: Previous Next
  •  07-31-2015, 2:33 PM 80559

    Using camera on mobile devices to take a photo

    I'm trying to enable the camera selection while browsing for files on mobile devices.

     

    For example when I'm using the following html code:

     <label for="image3" class="btn btn-default">

            <input id="image3" type="file" accept="image/*" name="fImages" class="m_none" style="display:none" capture>

             <span class="glyphicon icon icon-camera"></span> Take / Upload Photo

      </label>

    Then the mobile device will show the camera options.

     

    I'm trying to achieve the same with CuteWebUI.MvcUploader, but with no success (

    The html looks like this

         <span id="Uploader1Insert">

                                    <span tabindex="0" class="group-span-filestyle d_none">

                                        <label class="btn btn-default">

                                           <span class="glyphicon icon icon-camera"></span> Take / Upload Photo

                                        </label>

                                    </span>

        </span>

     

     @{

          using (CuteWebUI.MvcUploader uploader = new CuteWebUI.MvcUploader(System.Web.HttpContext.Current))

          {

                uploader.UploadUrl = Response.ApplyAppPathModifier("~/UploadHandler.ashx");

                //the data of the uploader will render as <input type='hidden' name='myuploader'>

                uploader.Name = "myuploader";

                uploader.InsertButtonID = "Uploader1Insert";

                uploader.MultipleFilesUpload = true;

                uploader.AllowedFileExtensions = "*.jpg,*.jpeg,*.png";

                uploader.MaxSizeKB = 4 * 1024;

                uploader.ManualStartUpload = false;

                @Html.Raw(uploader.Render())

          }

    <script type="text/javascript">

       

          function CuteWebUI_AjaxUploader_OnInitialize() {

                var hidden = this;

                hidden.internalobject.addonobject.accept = "image/*";

                hidden.internalobject.addonobject.capture = true;

          }

    </script>

     

     

    Filed under: ,
  •  08-05-2015, 9:53 AM 80563 in reply to 80559

    Re: Using camera on mobile devices to take a photo

    Hi,

     

    What do you want to achieve with this code? use the camera  to take photo and upload this photo by uploader directly?

     

    Regards,

     

    Ken 

  •  08-07-2015, 3:54 PM 80568 in reply to 80563

    Re: Using camera on mobile devices to take a photo

    For anyone else who want to use <input accept="image/*" capture="camera" type="file" /> 

    function CuteWebUI_AjaxUploader_OnInitialize() {
        var hidden = this;
        var _addonobject = hidden.internalobject.addonobject;
        // set accept and capture attributes
        _addonobject.setAttribute("accept", "image/*");
        _addonobject.setAttribute("capture", "camera");

        // save the native setAttribute method
        _addonobject._setAttribute = _addonobject.setAttribute;
        // override the native setAttribute method
        _addonobject.setAttribute = function (name, value) {
            // call the native method for any attribute except accept
            if (name !== "accept")
                _addonobject._setAttribute(name, value);
        };
    }
View as RSS news feed in XML