How do I make mobile web browser show these photo uploading options?

Question

When pressing + button on the the center bottom of Instagram using mobile browser, it invokes a non-HTML menu like the illustration below:

Does anyone know how to invoke this? My guess is that this is mobile user-agent specific feature but I need an affirmative answer, as well as how it is named.

FWIW, I don’t think this question is too broad. It’s very specific. It’s just one of those rare cases where it’s hard to articulate the question because the OP is asking how to achieve some very specific UI. But it’s hard to imagine how this question could be more clear. — Rob, Jan 26 '19 at 17:46

Rob · Answer 1 · 2019-01-26T01:19:35.253

1

You generate this with a HTML <form> that contains an input field of type file:

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

The mobile web browser will render that as an action sheet. E.g. in iOS:

A desktop web browser will render that as a file dialog box (again, not a web based form, but a native OS dialog box).

Obviously, feel free to customize the upload button appearance however you want, e.g. https://stackoverflow.com/a/6461518/1271826.

edited Jan 26 '19 at 01:19

answered Jan 25 '19 at 23:44

Rob

415,655
72
787
1,044

Thanks for your answer, it saved my day. – 高科技黑手 Jan 26 '19 at 11:15

Ajay saini · Accepted Answer · 2019-01-26T07:41:07.527

This is UIAlertController for native iOS. find code below for reference.

@IBAction func showActionSheet(_ sender: Any) {

        let alertController = UIAlertController(title: "Title", message: "Delete option exists", preferredStyle: .actionSheet)


        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: { (alert: UIAlertAction!) -> Void in
            print("Cancel")
        })

        let noAction = UIAlertAction(title: "No", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("No")
        })

        let maybeAction = UIAlertAction(title: "Maybe", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Maybe")
        })


        alertController.addAction(cancelAction)
        alertController.addAction(noAction)
        alertController.addAction(maybeAction)

        self.present(alertController, animated: true, completion: nil)


    }

for native android go for BottomSheetDialog And if you want to achieve this functionality in iOS safari browser for your website, then simple file input type will render this.

Thanks a lot for your answer. – 高科技黑手 Jan 25 '19 at 19:19 — 高科技黑手, Jan 25 '19 at 19:19

How do I make mobile web browser show these photo uploading options?

2 Answers2