{"id":2160,"date":"2019-08-22T15:33:16","date_gmt":"2019-08-22T14:33:16","guid":{"rendered":"https:\/\/ibex.tech\/cloud\/?p=2160"},"modified":"2025-01-28T10:49:55","modified_gmt":"2025-01-28T10:49:55","slug":"upload-photo","status":"publish","type":"post","link":"https:\/\/ibex.tech\/cloud\/php\/forms\/file-uploads\/upload-photo","title":{"rendered":"Upload Photo"},"content":{"rendered":"\n<h4 class=\"wp-block-heading\">Upload File and Take Photo styled into buttons<\/h4>\n\n\n\n<p>Instead of normal form file select boxes<\/p>\n\n\n\n<h5 class=\"wp-block-heading\">HTML<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>  &lt;form id=\"form_upload_image_file_button\" action=\"\/testpage\" method=\"POST\" enctype=\"multipart\/form-data\">\n      &lt;input type=\"hidden\" name=\"form_submit_id\" value=\"testpage\" \/>\n\n      &lt;label class=\"upload_image_file_button\">Select a photo\n        &lt;input type=\"file\" name=\"image_file\" accept=\"image\/*\" multiple=\"false\" onchange=\"form_upload_image_file_button.submit();\" \">\n      &lt;\/label>\n  &lt;\/form>\n\n  &lt;form id=\"form_upload_image_camera_button\" action=\"\/testpage\" method=\"POST\" enctype=\"multipart\/form-data\">\n      &lt;!-- Note this button will only select the camera on mobile devices, on desktop it will open the file picker -->\n      &lt;input type=\"hidden\" name=\"form_submit_id\" value=\"testpage\" \/>\n\n      &lt;label class=\"upload_image_camera_button\">Take a picture\n        &lt;input type=\"file\" name=\"image_file\" accept=\"image\/*\" capture onchange=\"form_upload_image_camera_button.submit();\" \">\n      &lt;\/label>\n  &lt;\/form><\/code><\/pre>\n\n\n\n<h5 class=\"wp-block-heading\">CSS<\/h5>\n\n\n\n<pre class=\"wp-block-code\"><code>\n\/*------------------------*\/\n\/*------------------------*\/\n\/*----- UPLOAD IMAGE -----*\/\n\/*------------------------*\/\n\/*------------------------*\/\n\n\/*----- CAMERA BUTTON -----*\/\nlabel.upload_image_camera_button {\n  display: inline-block;\n  margin: 1em 0;\n\n  \/* Styles to make it look like a button *\/\n  padding: 0.5em;\n  border: 2px solid #666;\n  border-color: #EEE #CCC #CCC #EEE;\n  background-color: #DDD;\n}\n\n\/* Look like a clicked\/depressed button *\/\nlabel.upload_image_camera_button:active {\n  border-color: #CCC #EEE #EEE #CCC;\n}\n\n\/* This is the part that actually hides the 'Choose file' text box for camera inputs *\/\nlabel.upload_image_camera_button input {\n  display: none;\n}\n\n\n\/*----- IMAGE FILE BUTTON -----*\/\nlabel.upload_image_file_button {\n  display: inline-block;\n  margin: 1em 0;\n\n  \/* Styles to make it look like a button *\/\n  padding: 0.5em;\n  border: 2px solid #666;\n  border-color: #EEE #CCC #CCC #EEE;\n  background-color: #DDD;\n}\n\n\/* Look like a clicked\/depressed button *\/\nlabel.upload_image_file_button:active {\n  border-color: #CCC #EEE #EEE #CCC;\n}\n\n\/* This is the part that actually hides the 'Choose file' text box for camera inputs *\/\nlabel.upload_image_file_button input {\n  display: none;\n}<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Upload File and Take Photo styled into buttons Instead of normal form file select boxes HTML CSS<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[364],"tags":[],"class_list":["post-2160","post","type-post","status-publish","format-standard","hentry","category-file-uploads"],"_links":{"self":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2160","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/comments?post=2160"}],"version-history":[{"count":1,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2160\/revisions"}],"predecessor-version":[{"id":2161,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/posts\/2160\/revisions\/2161"}],"wp:attachment":[{"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/media?parent=2160"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/categories?post=2160"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ibex.tech\/cloud\/wp-json\/wp\/v2\/tags?post=2160"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}