A new bucket can be created directly from the management console.<\/a><\/p>\n![\"create](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2020\/12\/create-new-s3-bucket.png\")
<\/p>\n
You’ll want to create a new IAM user to programmatically interact with this bucket. Make sure that new user is added to a group that includes the permission policy \u201cAmazonS3FullAccess\u201d. You can find the\u00a0access key ID and secret in the “Security credentials” tab.<\/p>\n
![\"IAM](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2020\/12\/iam-user-creds.png\")
<\/p>\n
Uploading image files<\/h2>\n
When users select an image in the visual editor, they are shown a button to upload a new file. Clicking on it opens the gallery modal.<\/p>\n
<div id=\"image-gallery-modal\" class=\"modal image-gallery-modal\" style=\"display: none;\">\n <div class=\"modal-content\">\n <h3>Your image gallery<\/h3>\n <p><strong>Upload a new file:<\/strong><\/p>\n <input class=\"uploadimage\" id=\"uploadimage\" type=\"file\" name=\"uploadimage\" \/>\n <p class=\"display-none file-error\"><\/p>\n <div><hr \/><\/div>\n <div class=\"image-gallery-content\"><\/div>\n <p class=\"loading-images\"><i class=\"fas fa-spinner fa-spin\"><\/i> Loading images...<\/p>\n <\/div>\n<\/div>\n<\/pre>\nThe HTML file-type input element presents a browser dialog to select a file. Once selected, the image data is posted to the S3 upload script.\u00a0The newly uploaded image then replaces the existing image in the visual editor.\u00a0<\/span><\/p>\n$(\".uploadimage\").change(function(){\n\n var file = $(this)[0].files[0];\n var formData = new FormData();\n formData.append(\"file\", file, file.name);\n formData.append(\"upload_file\", true);\n\n $.ajax({\n type: \"POST\",\n url: \"\/s3-upload.php\",\n xhr: function () {\n var myXhr = $.ajaxSettings.xhr();\n if (myXhr.upload) {\n \/\/ myXhr.upload.addEventListener('progress', that.progressHandling, false);\n }\n return myXhr;\n },\n success: function (response) {\n console.log(response);\n\n document.getElementById(\"uploadimage\").value = \"\";\n\n if(response !== \"success\"){\n $(\".file-error\").text(response).show();\n setTimeout(function(){ $(\".file-error\").fadeOut();}, 3000)\n return;\n }\n\n $(\"#image-gallery-modal\").hide();\n loadS3images();\n var newImageUrl = \"https:\/\/splitwit-image-upload.s3.amazonaws.com\/<?php echo $_SESSION['userid'];?>\/\" + file.name;\n $(\"input.img-url\").val(newImageUrl);\n $(\".image-preview\").attr(\"src\", newImageUrl).show();\n $(\".image-label .change-indicator\").show();\n\n \/\/update editor (right side)\n var selector = $(\".selector-input\").val();\n var iFrameDOM = $(\"iframe#page-iframe\").contents()\n if($(\".element-change-wrap\").is(\":visible\")){\n iFrameDOM.find(selector).attr(\"src\", newImageUrl).attr(\"srcset\", \"\");\n $(\".element-change-save-btn\").removeAttr(\"disabled\");\n }\n if($(\".insert-html-wrap\").is(\":visible\")){\n var position = $(\".position-select\").val();\n var htmlInsertText = \"<img style='display: block; margin: 10px auto;' class='htmlInsertText' src='\"+newImageUrl+\"'>\";\n iFrameDOM.find(\".htmlInsertText\").remove();\n if(position == \"before\"){\n iFrameDOM.find(selector).before(htmlInsertText);\n }\n if(position == \"after\"){\n iFrameDOM.find(selector).after(htmlInsertText);\n }\n }\n },\n error: function (error) {\n console.log(\"error: \");\n console.log(error);\n },\n async: true,\n data: formData,\n cache: false,\n contentType: false,\n processData: false,\n timeout: 60000\n });\n\n});\n<\/pre>\nThe upload script puts files in the same S3 bucket, under a separate sub-directory for each user account ID. It checks the MIME type on the file to make sure an image is being uploaded.<\/p>\n
<?php\nrequire 's3.php';\n\n$s3 = new S3(\"XXXX\", \"XXXX\"); \/\/access key ID and secret\n\n\/\/ echo \"S3::listBuckets(): \".print_r($s3->listBuckets(), 1).\"\\n\";\n\n$bucketName = 'image-upload';\n\nif(isset($_FILES['file'])){\n\t$file_name = $_FILES['file']['name'];\n\t$uploadFile = $_FILES['file']['tmp_name'];\n\n\tif ($_FILES['file']['size'] > 5000000) { \/\/5 megabyte\n \t echo 'Exceeded filesize limit.';\n \t die();\n \t}\n \t$finfo = new finfo(FILEINFO_MIME_TYPE);\n\tif (false === $ext = array_search(\n\t $finfo->file($uploadFile),\n\t array(\n\t 'jpg' => 'image\/jpeg',\n\t 'png' => 'image\/png',\n\t 'gif' => 'image\/gif',\n\t ),\n\t true\n\t )) {\n\t \tif($_FILES['file']['type'] == \"\"){\n\t \t\techo 'File format not found. Please re-save the file.';\n\t \t}else{\n\t\t \techo 'Invalid file format.';\n\t\t }\n \t die();\n\t }\n\n\t\/\/create new directory with account ID, if it doesn't already exist\n\tsession_start();\n\t$account_id = $_SESSION['userid'];\n\n\tif ($s3->putObjectFile($uploadFile, $bucketName, $account_id.\"\/\".$file_name, S3::ACL_PUBLIC_READ)) {\n\t\techo \"success\";\n\t}\n\n}\n?>\n<\/pre>\nAfter upload, the gallery list is reloaded by the loadS3images() function.<\/span><\/p>\nFetching image files from S3<\/h2>\n
When the image gallery modal first shows, that same\u00a0loadS3images()<\/span> runs to populate any images that have been previously uploaded.<\/p>\nfunction loadS3images(){\n\n $.ajax({\n url:\"\/s3-get-objects.php\",\n complete: function(response){\n gotImages = true;\n $(\".loading-images\").hide();\n var data = JSON.parse(response.responseText);\n var x;\n var html = \"<p><strong>Select existing file:<\/strong><\/p>\";\n var l = 0;\n for (x in data) {\n l++;\n var name = data[x][\"name\"];\n nameArr = name.split(\"\/\");\n name = nameArr[1];\n var imgUrl = \"https:\/\/splitwit-image-upload.s3.amazonaws.com\/<?php echo $_SESSION['userid'];?>\/\" + name;\n html += \"<div class='image-data-wrap'><p class='filename'>\"+name+\"<\/p><img style='width:50px;display:block;margin:10px;' src='' class='display-none'><button type='button' class='btn select-image'>Select<\/button> <button type='button' class='btn preview-image'>Preview<\/button> <button type='button' class='btn delete-image'>Delete<\/button><hr \/><\/div>\"\n }\n if(l){\n $(\".image-gallery-content\").html(html);\n }\n\n }\n });\n}\n<\/pre>\nIt hits the “get objects” PHP script to pull the files in the account’s directory.<\/p>\n
<?php\nrequire 's3.php';\n\n$s3 = new S3(\"XXX\", \"XXX\"); \/\/access key ID and secret\n\n$bucketName = 'image-upload';\nsession_start();\n$account_id = $_SESSION['userid'];\n$info = $s3->getBucket($bucketName, $account_id);\necho json_encode($info);\n\n?>\n<\/pre>\nExisting images can be chosen to replace the one currently selected in the editor. There are also options to preview and delete.<\/p>\n
Delete an S3 object<\/h2>\n
When the delete button is pressed for a file in the image gallery, all we need to do is pass the filename along. If the image is currently being used, we also remove it from the editor.<\/p>\n
$(\".image-gallery-content\").on(\"click\", \".delete-image\", function() {\n var parent = $(this).parent();\n var filename = parent.find(\".filename\").text();\n var currentImageUrl = $(\".img-url\").val();\n if(currentImageUrl ==\"https:\/\/splitwit-image-upload.s3.amazonaws.com\/<?php echo $_SESSION['userid'];?>\/\" + filename){\n $(\".img-url\").val(testSelectorElImage);\n $(\".image-preview\").attr(\"src\", testSelectorElImage);\n var selector = $(\".selector-input\").val();\n var iFrameDOM = $(\"iframe#page-iframe\").contents()\n iFrameDOM.find(selector).attr(\"src\", testSelectorElImage);\n }\n $.ajax({\n method:\"POST\",\n data: {\n 'filename': filename,\n },\n url: \"\/s3-delete.php?filename=\"+filename,\n complete: function(response){\n parent.remove();\n if(!$(\".image-data-wrap\").length){\n $(\".image-gallery-content\").html(\"\");\n }\n }\n })\n\n});\n<\/pre>\n <\/p>\n
<?php\nrequire 's3.php';\n\n$s3 = new S3(\"XXX\", \"XXX\"); \/\/access key ID and secret\n\n$bucketName = 'image-upload';\nsession_start();\n$account_id = $_SESSION['userid'];\n$filename = $_POST['filename'];\nif ($s3->deleteObject($bucketName, $account_id.\"\/\".$filename) ){\n\techo \"S3::deleteObject(): Deleted file\\n\";\n}\n\n?>\n<\/pre>\n <\/p>\n","protected":false},"excerpt":{"rendered":"
Allowing users to upload images to your app can be a pivotal feature. Many digital products rely on it. This post will show you how to do it using PHP and AWS S3. After launching version 1.0 of SplitWit, I decided to enhance the platform by adding features. An important A\/B experiment involves swapping images. … <\/p>\n
Continue reading “Build an image upload gallery”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":3211,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[12,92,111,112],"class_list":["post-796","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-web-development","tag-aws","tag-php","tag-s3","tag-saas"],"_links":{"self":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/796","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/comments?post=796"}],"version-history":[{"count":1,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/796\/revisions"}],"predecessor-version":[{"id":3212,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/posts\/796\/revisions\/3212"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media\/3211"}],"wp:attachment":[{"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/media?parent=796"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/categories?post=796"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.antpace.com\/blog\/wp-json\/wp\/v2\/tags?post=796"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"image](\"https:\/\/www.antpace.com\/blog\/wp-content\/uploads\/2020\/11\/image-upload.png\")
<\/p>\n