{"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_15095\"><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_57367\"  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_15095\"  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, that may help to crop any images into square or circle and set the zoom features of a croppie instance. There are so many options available to croppie&#8230;<\/p>\n","protected":false},"author":9,"featured_media":16635,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","_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}]}}