{"id":1976,"date":"2021-07-19T22:50:42","date_gmt":"2021-07-19T19:50:42","guid":{"rendered":"https:\/\/www.etemkeskin.com\/?p=1976"},"modified":"2021-07-19T22:50:44","modified_gmt":"2021-07-19T19:50:44","slug":"laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme","status":"publish","type":"post","link":"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/","title":{"rendered":"Laravel&#8217; de DropzoneJS Kullanarak S\u00fcr\u00fckle B\u0131rak  ile \u00c7oklu Dosya\/Resim Y\u00fckleme"},"content":{"rendered":"\n<p>Web uygulamalar\u0131nda g\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131 deneyimine b\u00fcy\u00fck \u00f6nem veriliyor. Form doldurmak kullan\u0131c\u0131lara s\u0131k\u0131c\u0131 gelen bir aktivitedir. Bu nedenle form doldurmay\u0131 kolayla\u015ft\u0131rmak uygulama geli\u015ftiricisin g\u00f6revidir. Bu yaz\u0131da<strong> Laravel<\/strong> ile geli\u015ftirilen uygulamalarda, kullan\u0131c\u0131lar\u0131n kolay bir \u015fekilde birden fazla dosya ve resimi nas\u0131l y\u00fckleyebilece\u011fini anlataca\u011f\u0131m.<\/p>\n\n\n\n<p>A\u015fa\u011f\u0131da anlataca\u011f\u0131m \u00f6rnekte javascriptin <strong>dropzoneJS<\/strong> k\u00fct\u00fcphanesini kullanaca\u011f\u0131m.  <strong>DropzoneJS<\/strong> k\u00fct\u00fcphanesi basit, hafif ve ilerleme bar\u0131 bulunan kullan\u0131\u015fl\u0131 bir k\u00fct\u00fcphanedir.<\/p>\n\n\n\n<h3>1.) Laravel Projesinin Kurulumu<\/h3>\n\n\n\n<p>E\u011fer bilgisayar\u0131n\u0131zda <strong>composer <\/strong>y\u00fckl\u00fc ise a\u015fa\u011f\u0131daki kod sat\u0131r\u0131n\u0131 terminalde \u00e7al\u0131\u015ft\u0131rarak <strong>laravel<\/strong> projenizi olu\u015fturabilirsiniz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>composer create-project --prefer-dist laravel\/laravel dropzone-laravel-project<\/code><\/pre>\n\n\n\n<h3>2.) <strong>MySQL <\/strong>Veritaban\u0131 Ayarlar\u0131<\/h3>\n\n\n\n<p>Laravel projesinin <strong>.env<\/strong> dosyas\u0131nda <strong>Mysql<\/strong> veritaban\u0131 ayarlar\u0131m\u0131z\u0131 tan\u0131ml\u0131yoruz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>DB_CONNECTION=mysql \nDB_HOST=127.0.0.1  \nDB_PORT=3306  \nDB_DATABASE=myLaravelDb \nDB_USERNAME=root\nDB_PASSWORD=<\/code><\/pre>\n\n\n\n<h3>3.) Model Olu\u015fturulmas\u0131 ve Veritaban\u0131nda Tablonun Olu\u015fturulmas\u0131<\/h3>\n\n\n\n<p>\u0130lk \u00f6nce <strong>ImageGallery<\/strong> ad\u0131nda modelimizi ve migration dosyas\u0131n\u0131 a\u015fa\u011f\u0131daki kod sat\u0131r\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak olu\u015ftururuz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:model ImageGallery -m<\/code><\/pre>\n\n\n\n<p><strong>2021_07_19_144128_create_image_galleries_table.php <\/strong> ad\u0131nda dosyam\u0131z olu\u015ftu. Bu dosyay\u0131 a\u00e7arak veri taban\u0131nda olu\u015fturaca\u011f\u0131m\u0131z kolonlar\u0131n\u0131 tan\u0131mlar\u0131z.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;PHP&quot;,&quot;modeName&quot;:&quot;php&quot;}\">class CreateImageGalleriesTable extends Migration\n{\n    \/**\n     * Run the migrations.\n     *\n     * @return void\n     *\/\n    public function up()\n    {\n        Schema::create('image_galleries', function (Blueprint $table) {\n            $table-&gt;id();\n            $table-&gt;string('original_filename');\n            $table-&gt;string('filename_path');\n            $table-&gt;timestamps();\n        });\n    }\n\n    \/**\n     * Reverse the migrations.\n     *\n     * @return void\n     *\/\n    public function down()\n    {\n        Schema::dropIfExists('image_galleries');\n    }\n}<\/pre><\/div>\n\n\n\n<p>Dosyay\u0131 d\u00fczenledikten sonra migrate ederiz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan migrate<\/code><\/pre>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"937\" height=\"208\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-7.png\" alt=\"\" class=\"wp-image-1922\"\/><\/figure>\n\n\n\n<h3>4.) Route&#8217; lar\u0131 Tan\u0131mla<\/h3>\n\n\n\n<p><strong>routes\\web.php<\/strong> dosyas\u0131nda route&#8217; lar\u0131m\u0131z tan\u0131ml\u0131yoruz. \u0130lk route kullan\u0131c\u0131n\u0131n kar\u015f\u0131s\u0131na \u00e7\u0131kacak aray\u00fczd\u00fcr. \u0130kinci route&#8217; da dosyam\u0131z\u0131 post edece\u011fimiz url&#8217; i \u00fc\u00e7\u00fcnc\u00fcs\u00fcnde kullan\u0131c\u0131 y\u00fckledi\u011fi dosyay\u0131 an\u0131nda sildi\u011finde \u00e7al\u0131\u015facak url&#8217; i tan\u0131ml\u0131yoruz.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;PHP&quot;,&quot;modeName&quot;:&quot;php&quot;}\">\/\/ ============== DropZone Example ==================\nRoute::get('\/dropzone-ui', [ UploadController::class, 'dropzoneUI' ])-&gt;name('front.dropzone-ui');\nRoute::post('\/upload', [ UploadController::class, 'uploadDropzoneFile' ])-&gt;name('front.upload');\nRoute::post('\/file-destroy', [ UploadController::class, 'destroyFile' ])-&gt;name('front.file-destroy');<\/pre><\/div>\n\n\n\n<h3>5.) Blade View Dosyas\u0131n\u0131n Olu\u015fturulmas\u0131<\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki resimdeki g\u00f6r\u00fcld\u00fc\u011f\u00fc gibi <strong>dropzone-upload.blade.php<\/strong> ad\u0131nda <strong>view<\/strong> dosyam\u0131z\u0131 olu\u015fturuyoruz.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"240\" height=\"176\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-8.png\" alt=\"\" class=\"wp-image-1928\"\/><figcaption>Klas\u00f6r yap\u0131s\u0131<\/figcaption><\/figure><\/div>\n\n\n\n<p>Blade dosyas\u0131na <strong>bootstrap, jquery<\/strong> ve <strong>dropzone<\/strong> javascript k\u00fct\u00fcphanelerini ekliyoruz.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;language&quot;:&quot;HTML&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;!DOCTYPE html&gt;\n&lt;html lang=&quot;en&quot;&gt;\n&lt;head&gt;\n    &lt;meta charset=&quot;UTF-8&quot;&gt;\n    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;\n    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;\n    &lt;link rel=&quot;stylesheet&quot; href=&quot;{{asset('assets\/css\/bootstrap.css')}}&quot;&gt;\n  \t&lt;link rel=&quot;stylesheet&quot; href=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dropzone\/5.7.2\/min\/dropzone.min.css&quot;&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;div class=&quot;container&quot;&gt;\n    &lt;h2&gt;Dropzone Example&lt;\/h2&gt;\n    &lt;div class=&quot;row justify-content-md-center&quot;&gt;\n        &lt;div class=&quot;col-12&quot;&gt;\n            &lt;div class=&quot;dropzone&quot; id=&quot;file-dropzone&quot;&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;\/div&gt;\n\n&lt;script src=&quot;{{ asset('assets\/js\/jquery.js')}}&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;{{ asset('assets\/js\/bootstrap.js')}}&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;{{ asset('assets\/js\/bootstrap.bundle.js')}}&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/dropzone\/5.7.2\/min\/dropzone.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script&gt;\n    Dropzone.options.fileDropzone = {\n      url: '{{ route('front.upload') }}',\n      acceptedFiles: &quot;.jpeg,.jpg,.png,.gif&quot;,\n      addRemoveLinks: true,\n      maxFilesize: 8,\n      headers: {\n      'X-CSRF-TOKEN': &quot;{{ csrf_token() }}&quot;\n      },\n      removedfile: function(file)\n      {\n        var name = file.upload.filename;\n        $.ajax({\n          type: 'POST',\n          url: '{{ route('front.file-destroy') }}',\n          data: { &quot;_token&quot;: &quot;{{ csrf_token() }}&quot;, name: name},\n          success: function (data){\n              console.log(&quot;File has been successfully removed!!&quot;);\n          },\n          error: function(e) {\n              console.log(e);\n          }});\n          var fileRef;\n          return (fileRef = file.previewElement) != null ?\n          fileRef.parentNode.removeChild(file.previewElement) : void 0;\n      },\n      success: function (file, response) {\n        console.log(file);\n      },\n    }\n  &lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre><\/div>\n\n\n\n<h3>6-) Controller Olu\u015fturulmas\u0131<\/h3>\n\n\n\n<p>A\u015fa\u011f\u0131daki kod sat\u0131r\u0131n\u0131 \u00e7al\u0131\u015ft\u0131rarak controller&#8217; \u0131 olu\u015fturuyoruz.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>php artisan make:controller UploadController<\/code><\/pre>\n\n\n\n<p><strong>app\\Http\\Controllers\\UploadController.php<\/strong>  dosyas\u0131nda metodlar\u0131m\u0131z\u0131 yaz\u0131yoruz.<\/p>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;mode&quot;:&quot;php&quot;,&quot;mime&quot;:&quot;text\/x-php&quot;,&quot;theme&quot;:&quot;material&quot;,&quot;lineNumbers&quot;:false,&quot;styleActiveLine&quot;:false,&quot;lineWrapping&quot;:false,&quot;readOnly&quot;:true,&quot;showPanel&quot;:false,&quot;language&quot;:&quot;PHP&quot;,&quot;modeName&quot;:&quot;php&quot;}\">namespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\nuse App\\Models\\ImageGallery;\n\nclass UploadController extends Controller\n{\n    private $photos_path;\n\n    public function __construct()\n    {\n        $this-&gt;photos_path = public_path('\/uploads');\n    }\n\n    \/** \n * Generate Upload View \n * \n * @return void \n\n *\/  \n\n  public  function dropzoneUI()  \n  {  \n      return view('front.dropzone-upload');  \n  }  \n\n\/** \n * File Upload Method \n * \n * @return void \n *\/  \n\n  public  function uploadDropzoneFile(Request $request)  \n  {  \n\n    if (!is_dir($this-&gt;photos_path)) {\n        mkdir($this-&gt;photos_path, 0777);\n    }\n\n    if ($request-&gt;file('file')) {\n        $file = $request-&gt;file('file');\n        $fileName = $file-&gt;getClientOriginalName();\n        $filePath = time().'.'.$file-&gt;getClientOriginalName();\n        $file-&gt;move(public_path('uploads'), $filePath);\n      }\n\n        $imageUpload = new ImageGallery;\n        $imageUpload-&gt;original_filename =  $fileName;\n        $imageUpload-&gt;filename_path = $filePath;\n        $imageUpload-&gt;save();\n    return response()-&gt;json(['success'=&gt;$fileName]);  \n  }\n\n  public function destroyFile(Request $request)\n  {\n      $filename =  $request-&gt;get('name');\n      ImageGallery::where('original_filename',$filename)-&gt;delete();\n      $path = public_path('uploads\/').$filename;\n      if (file_exists($path)) {\n          unlink($path);\n      }\n      return response()-&gt;json(['success'=&gt;$filename]);\n  } \n}<\/pre><\/div>\n\n\n\n<p>Projemizi \u00e7al\u0131\u015ft\u0131rd\u0131\u011f\u0131m\u0131zda a\u015fa\u011f\u0131daki gibi resimleri s\u00fcr\u00fckleyerek dosyalar\u0131m\u0131z\u0131 servera y\u00fckleyebiliriz.<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"989\" height=\"294\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-9.png\" alt=\"\" class=\"wp-image-1930\"\/><figcaption>Kullan\u0131c\u0131 aray\u00fcz\u00fc<\/figcaption><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" width=\"1030\" height=\"174\" src=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-10.png\" alt=\"\" class=\"wp-image-1937\"\/><figcaption>Veritaban\u0131 g\u00f6r\u00fcn\u00fc\u015f\u00fc <\/figcaption><\/figure><\/div>\n\n\n\n<p>Ba\u015far\u0131lar &#8230;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Web uygulamalar\u0131nda g\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131 deneyimine b\u00fcy\u00fck \u00f6nem veriliyor. Form doldurmak kullan\u0131c\u0131lara s\u0131k\u0131c\u0131 gelen bir aktivitedir. Bu nedenle form doldurmay\u0131 kolayla\u015ft\u0131rmak uygulama geli\u015ftiricisin g\u00f6revidir. Bu yaz\u0131da Laravel ile geli\u015ftirilen uygulamalarda, kullan\u0131c\u0131lar\u0131n kolay bir \u015fekilde birden fazla dosya ve resimi nas\u0131l y\u00fckleyebilece\u011fini anlataca\u011f\u0131m. A\u015fa\u011f\u0131da anlataca\u011f\u0131m \u00f6rnekte javascriptin dropzoneJS k\u00fct\u00fcphanesini kullanaca\u011f\u0131m. DropzoneJS k\u00fct\u00fcphanesi basit, hafif ve ilerleme bar\u0131 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[52,28],"tags":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v16.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Laravel&#039; de DropzoneJS Kullanarak S\u00fcr\u00fckle B\u0131rak ile \u00c7oklu Dosya\/Resim Y\u00fckleme - blog website<\/title>\n<meta name=\"description\" content=\"Web uygulamalar\u0131nda g\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131 deneyimine b\u00fcy\u00fck \u00f6nem veriliyor. Form doldurmak kullan\u0131c\u0131lara s\u0131k\u0131c\u0131 gelen bir aktivitedir. Bu nedenle form doldurmay\u0131 kolayla\u015ft\u0131rmak uygulama geli\u015ftiricisin g\u00f6revidir. Bu yaz\u0131da Laravel ile geli\u015ftirilen uygulamalarda, kullan\u0131c\u0131lar\u0131n kolay bir \u015fekilde birden fazla dosya ve resimi nas\u0131l y\u00fckleyebilece\u011fini anlataca\u011f\u0131m.A\u015fa\u011f\u0131da anlataca\u011f\u0131m \u00f6rnekte javascriptin dropzoneJS k\u00fct\u00fcphanesini kullanaca\u011f\u0131m. DropzoneJS k\u00fct\u00fcphanesi basit, hafif ve ilerleme bar\u0131 bulunan kullan\u0131\u015fl\u0131 bir k\u00fct\u00fcphanedir.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Laravel&#039; de DropzoneJS Kullanarak S\u00fcr\u00fckle B\u0131rak ile \u00c7oklu Dosya\/Resim Y\u00fckleme - blog website\" \/>\n<meta property=\"og:description\" content=\"Web uygulamalar\u0131nda g\u00fcn\u00fcm\u00fczde kullan\u0131c\u0131 deneyimine b\u00fcy\u00fck \u00f6nem veriliyor. Form doldurmak kullan\u0131c\u0131lara s\u0131k\u0131c\u0131 gelen bir aktivitedir. Bu nedenle form doldurmay\u0131 kolayla\u015ft\u0131rmak uygulama geli\u015ftiricisin g\u00f6revidir. Bu yaz\u0131da Laravel ile geli\u015ftirilen uygulamalarda, kullan\u0131c\u0131lar\u0131n kolay bir \u015fekilde birden fazla dosya ve resimi nas\u0131l y\u00fckleyebilece\u011fini anlataca\u011f\u0131m.A\u015fa\u011f\u0131da anlataca\u011f\u0131m \u00f6rnekte javascriptin dropzoneJS k\u00fct\u00fcphanesini kullanaca\u011f\u0131m. DropzoneJS k\u00fct\u00fcphanesi basit, hafif ve ilerleme bar\u0131 bulunan kullan\u0131\u015fl\u0131 bir k\u00fct\u00fcphanedir.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/\" \/>\n<meta property=\"og:site_name\" content=\"blog website\" \/>\n<meta property=\"article:published_time\" content=\"2021-07-19T19:50:42+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-07-19T19:50:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-7.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.etemkeskin.com\/#website\",\"url\":\"https:\/\/www.etemkeskin.com\/\",\"name\":\"blog website\",\"description\":\"Etem KESK\\u0130N\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.etemkeskin.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"tr\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/#primaryimage\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-7.png\",\"contentUrl\":\"https:\/\/www.etemkeskin.com\/wp-content\/uploads\/2021\/07\/image-7.png\",\"width\":937,\"height\":208},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/#webpage\",\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/\",\"name\":\"Laravel' de DropzoneJS Kullanarak S\\u00fcr\\u00fckle B\\u0131rak ile \\u00c7oklu Dosya\/Resim Y\\u00fckleme - blog website\",\"isPartOf\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/#primaryimage\"},\"datePublished\":\"2021-07-19T19:50:42+00:00\",\"dateModified\":\"2021-07-19T19:50:44+00:00\",\"author\":{\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\"},\"description\":\"Web uygulamalar\\u0131nda g\\u00fcn\\u00fcm\\u00fczde kullan\\u0131c\\u0131 deneyimine b\\u00fcy\\u00fck \\u00f6nem veriliyor. Form doldurmak kullan\\u0131c\\u0131lara s\\u0131k\\u0131c\\u0131 gelen bir aktivitedir. Bu nedenle form doldurmay\\u0131 kolayla\\u015ft\\u0131rmak uygulama geli\\u015ftiricisin g\\u00f6revidir. Bu yaz\\u0131da Laravel ile geli\\u015ftirilen uygulamalarda, kullan\\u0131c\\u0131lar\\u0131n kolay bir \\u015fekilde birden fazla dosya ve resimi nas\\u0131l y\\u00fckleyebilece\\u011fini anlataca\\u011f\\u0131m.A\\u015fa\\u011f\\u0131da anlataca\\u011f\\u0131m \\u00f6rnekte javascriptin dropzoneJS k\\u00fct\\u00fcphanesini kullanaca\\u011f\\u0131m. DropzoneJS k\\u00fct\\u00fcphanesi basit, hafif ve ilerleme bar\\u0131 bulunan kullan\\u0131\\u015fl\\u0131 bir k\\u00fct\\u00fcphanedir.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.etemkeskin.com\/index.php\/tr\/2021\/07\/19\/laravel-de-dropzonejs-kullanarak-surukle-birak-ile-coklu-dosya-resim-yukleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Ana sayfa\",\"item\":\"https:\/\/www.etemkeskin.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Laravel&#8217; de DropzoneJS Kullanarak S\\u00fcr\\u00fckle B\\u0131rak ile \\u00c7oklu Dosya\/Resim Y\\u00fckleme\"}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.etemkeskin.com\/#\/schema\/person\/dcbc30282861ce578b96a79ce8789629\",\"name\":\"etemkeskin\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.etemkeskin.com\/#personlogo\",\"inLanguage\":\"tr\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/6af0148b790691ed24ae245fb3dc773b?s=96&d=mm&r=g\",\"caption\":\"etemkeskin\"},\"url\":\"https:\/\/www.etemkeskin.com\/index.php\/author\/etemkeskinyahoo-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1976"}],"collection":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/comments?post=1976"}],"version-history":[{"count":1,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1976\/revisions"}],"predecessor-version":[{"id":1977,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/posts\/1976\/revisions\/1977"}],"wp:attachment":[{"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/media?parent=1976"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/categories?post=1976"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.etemkeskin.com\/index.php\/wp-json\/wp\/v2\/tags?post=1976"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}