Jump to content

input type="file" not working on iOS9 (iPad)


Recommended Posts

Hello,

 

I want to access the camera on iOS. And since iOS6, that is supported by the browser.

Using <input type="file" access="image/*" capture="camera"> works fine on my desktop browser, but not on my iPad.  The input box is not shown as file input box.

I also tried some other pages, and there it works, like here: http://jsfiddle.net/4WHw5/1/

It seems I am missing something.

 

This is my code:

edtFileUpload.InputType := itFile;
w3_setAttrib(edtFileUpload.Handle, 'accept', 'image/*');
w3_setAttrib(edtFileUpload.Handle, 'capture', 'camera');

Can anybody help?

Link to post
Share on other sites
  • 4 months later...

You don't have to use the TW3EditBox. You have to use "clean" <input> tag, without all the default attributs.

 

I created a simple wrapper:

TMyInputFile = class(TW3CustomControl)
  private
    procedure SetAccept(aValue: string);
    procedure SetCapture(aValue: string);
  protected
    function MakeElementTagObj: THandle; override;
    procedure StyleTagObject; override;
  public
    procedure OpenDialog;
    property Accept: string write SetAccept;
    property Capture: string write SetCapture;
  end;

{ TMyInputFile }

procedure TMyInputFile.StyleTagObject;
begin
  //prevent default
  w3_setAttrib(Handle, 'type', 'file');
end;

function TMyInputFile.MakeElementTagObj: THandle;
begin
  result := w3_createHtmlElement('input');
end;

procedure TMyInputFile.SetCapture(aValue: String);
begin
  w3_setAttrib(Handle, 'capture', aValue);
end;

procedure TMyInputFile.SetAccept(aValue: String);
begin
  w3_setAttrib(Handle, 'accept', aValue);
end;

procedure TMyInputFile.OpenDialog;
begin
  Handle.click();
end;

Usage:

//Image File Upload
  _myFileOpenDialog := TMyInputFile.Create(divViewGeneral);
  _myFileOpenDialog.Visible := false;
  _myFileOpenDialog.Accept := 'image/*'; // or '.png, .jpg'
  _myFileOpenDialog.Capture := 'camera';

  _myFileOpenDialog.Handle.addEventListener('change',
    procedure(e: Variant)
    var
      fileReader: JFileReader;
      fileList: JFileList;
    begin
      fileList := JFileList(e.target.files);
      if fileList.length > 0 then
        _imageFile := fileList.item(0)
      else
        _imageFile := nil;

      if Assigned(_imageFile) then
      begin
        fileReader := JFileReader.Create;
        fileReader.onload :=
          function(event: JEvent): Variant
          begin
            imgRecipe.Url := Variant(event.target).result;
            result := true;
          end;

        fileReader.readAsDataURL(_imageFile);

      end;
    end, false);
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...