{"id":16626,"date":"2020-07-24T12:53:48","date_gmt":"2020-07-24T12:53:48","guid":{"rendered":"https:\/\/www.devopsschool.com\/blog\/?p=16626"},"modified":"2021-10-30T05:57:48","modified_gmt":"2021-10-30T05:57:48","slug":"how-to-image-upload-and-crop-in-laravel-with-ajax","status":"publish","type":"post","link":"https:\/\/www.devopsschool.com\/blog\/how-to-image-upload-and-crop-in-laravel-with-ajax\/","title":{"rendered":"How to Image Upload and Crop in Laravel with Ajax"},"content":{"rendered":"\n<p>In this tutorial, I am going to tell you how to image upload and crop in <strong>Laravel <\/strong>with Ajax. To crop the image using <strong>jQuery <\/strong>croppie plugin, that may help to crop any images into square or circle and set the zoom features of a croppie instance.<\/p>\n\n\n\n<p>There are so many options available to croppie plugin that you can use while cropping any images. Using <strong>jQuery <\/strong>Croppie plugin, you can easily add the cropping or re-sizing functionality to your web application.<\/p>\n\n\n\n<p><strong>First<\/strong>, add routes to display the form for croppie view in <strong>web.php<\/strong> with following path <strong>routes\/web.php.<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/169e2318339ead0f316ba5c5e3bf9cf0.js\"><\/script>\n\n\n\n<p><strong>Next<\/strong>, create a controller <strong>CropImageController.php<\/strong> the is path <strong>app\/Http\/Controllers\/.<\/strong><\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/37a7ca70c65d3132a31af4730078e4e2.js\"><\/script>\n\n\n\n<p><strong>Next<\/strong>, create a new blade file <strong>croppie.blade.php<\/strong> and import the <strong>jQuery <\/strong>libraries for the<strong> <\/strong>Croppie plugin at the path is <strong>resources\/views\/croppie.blade.php<\/strong>.<\/p>\n\n\n\n<script src=\"https:\/\/gist.github.com\/narayanlog\/bcdd4176a14481bb8958239a67063032.js\"><\/script>\n\n\n\n<p>Don&#8217;t forget to create <strong>upload<\/strong> directory inside the <strong>public<\/strong> directory.<\/p>\n\n\n\n<p>Then, go to routes as&nbsp;<strong>web.php<\/strong> and run this code: <strong>crop-image<\/strong> in your browser.<\/p>\n\n\n\n<p>See the view after upload.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"415\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/after-crop-image-1024x415.png\" alt=\"\" class=\"wp-image-16632\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/after-crop-image-1024x415.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/after-crop-image-300x122.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/after-crop-image-768x311.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/after-crop-image.png 1122w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>After Cropping.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"418\" src=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/before-crop-image-1024x418.png\" alt=\"\" class=\"wp-image-16634\" srcset=\"https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/before-crop-image-1024x418.png 1024w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/before-crop-image-300x122.png 300w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/before-crop-image-768x313.png 768w, https:\/\/www.devopsschool.com\/blog\/wp-content\/uploads\/2020\/07\/before-crop-image.png 1125w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n<div class=\"epyt-gallery\" data-currpage=\"1\" id=\"epyt_gallery_87082\"><figure class=\"wp-block-embed wp-block-embed-youtube is-type-video is-provider-youtube epyt-figure\"><div class=\"wp-block-embed__wrapper\"><iframe loading=\"lazy\"  id=\"_ytid_69566\"  width=\"760\" height=\"427\"  data-origwidth=\"760\" data-origheight=\"427\" src=\"https:\/\/www.youtube.com\/embed\/?enablejsapi=1&#038;autoplay=0&#038;cc_load_policy=0&#038;cc_lang_pref=&#038;iv_load_policy=1&#038;loop=0&#038;rel=1&#038;fs=1&#038;playsinline=0&#038;autohide=2&#038;theme=dark&#038;color=red&#038;controls=1&#038;disablekb=0&#038;\" class=\"__youtube_prefs__  no-lazyload\" title=\"YouTube player\"  data-epytgalleryid=\"epyt_gallery_87082\"  allow=\"fullscreen; accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen data-no-lazy=\"1\" data-skipgform_ajax_framebjll=\"\"><\/iframe><\/div><\/figure><div class=\"epyt-gallery-list\"><div>Sorry, there was a YouTube error.<\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I am going to tell you how to image upload and crop in Laravel with Ajax. To crop the image using jQuery croppie plugin,&#8230; <\/p>\n","protected":false},"author":9,"featured_media":16635,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_joinchat":[],"footnotes":""},"categories":[5201],"tags":[5838,6035,5203],"class_list":["post-16626","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-laravel","tag-ajax","tag-jquery","tag-laravel"],"_links":{"self":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16626","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/comments?post=16626"}],"version-history":[{"count":3,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16626\/revisions"}],"predecessor-version":[{"id":24646,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/posts\/16626\/revisions\/24646"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media\/16635"}],"wp:attachment":[{"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/media?parent=16626"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/categories?post=16626"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devopsschool.com\/blog\/wp-json\/wp\/v2\/tags?post=16626"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}