🐵 🛸 🏂🏿 SonataAdminBundle + AJAX फ़ाइल डाउनलोड ☢️ 📈 👨🏻‍🏭

हर किसी के लिए एक अच्छा समय है। इस लेख में, मैं सामान्य फ़ाइल अपलोड न करने के 2 तरीकों पर विचार करना चाहता हूं, जिन्हें मुझे अपने कर्तव्य के कारण एक परियोजना पर लागू करना था। कार्य यह था: साइट के व्यवस्थापक भाग में ड्रैग एंड ड्रॉप अपलोडिंग फ़ाइलों को लागू करना आवश्यक था, जो फ्रेमफ़ॉर्के सिम्फनी 2.3 पर किया गया था। * + सोनाटाअमिनबंडल। कई कारणों से, मैं उस हिस्से को छोड़ देता हूं जिसमें सोनाटा रखा गया था (यदि आवश्यक हो, तो इस अंतर को भरना संभव है)। इसलिए, मेरा मानना है कि आपने पहले ही सोनाटा को स्थापित कर दिया है और इकाई फ़ोल्डर में कम से कम एक इकाई बनाई है। यदि नहीं, तो आइए करते हैं। बिल्ली में आपका स्वागत है:

// MyFolder / MyBundle / इकाई / नाम

<?php namespace MyFolder\MyBundle\Entity; use Doctrine\ORM\Mapping as ORM; use Symfony\Component\Validator\Constraints as Assert; /** * Table * * @ORM\Table(name="table") * @ORM\Entity */ class Table { /** * @var integer * * @ORM\Column(name="id", type="integer") * @ORM\Id */ private $id; /** * @var string * * @ORM\Column(name="name", type="string", length=255, nullable=true) */ private $filePath; }     .   /:

$ एप्लिकेशन / कंसोल सिद्धांत: उत्पन्न: संस्थाएँ MyFolder / MyBundle / Entity / Name

गेटर्स और सेटर जेनरेट होने के बाद, हम सोनाटा के लिए आगे बढ़ते हैं। तो, हमारी सोनाटा फ़ाइल का कोड इस तरह होगा:

// MyFolder / MyBundle / व्यवस्थापक / नाम

 <?php namespace MyFolder\MyBundle\Admin; use Sonata\AdminBundle\Admin\Admin; use Sonata\AdminBundle\Datagrid\ListMapper; use Sonata\AdminBundle\Datagrid\DatagridMapper; use Sonata\AdminBundle\Form\FormMapper; use Sonata\AdminBundle\Show\ShowMapper; class NameAdmin extends Admin { protected function configureFormFields(FormMapper $formMapper) { $formMapper ->add('name'); } protected function configureDatagridFilters(DatagridMapper $datagridMapper) { $datagridMapper ->add('name') } protected function configureListFields(ListMapper $listMapper) { $listMapper ->addIdentifier('name') } }

हमें कुछ और नहीं करना है। हम एक मिनट के लिए रुकेंगे और इस लिंक का अनुसरण करेंगे - github.com/weixiyen/jquery-filedrop । यहां हम लाइब्रेरी में रुचि रखते हैं, केवल एक जेएस फाइल है, इसलिए याद न करें :)।

So. मज़ा शुरू होता है, क्योंकि हमें ड्रैग एंड ड्रॉप को लागू करने की आवश्यकता है, आइए इसे लागू करें। ऐसा करने के लिए, हम MyBundle / Resources / view / Admin फ़ोल्डर में निम्न कार्य करेंगे (यदि कोई ऐसा नहीं है, तो इसे बनाएं, फिर भ्रम की स्थिति कम होगी) एक twig फ़ाइल बनाएं - sonata_admin_bmin_layout.html.twig निम्न सामग्री के साथ:

// MyBundle / Resources / view / admin / sonata_admin_base_layout.html.twig

 {% extends 'SonataAdminBundle::standard_layout.html.twig' %} {% block stylesheets %} {{ parent() }} <link href="{{ asset('bundles/mybundle/css/admin/style.css') }}" rel="stylesheet" type="text/css" /> {% endblock %} {% block javascripts %} {{ parent() }} <script src="{{ asset('bundles/mybundle/js/admin/jquery.filedrop.js') }}"></script> <script src="{{ asset('bundles/mybundle/js/admin/js.fileDropBlock.js') }}"></script> <script src="{{ asset('bundles/mybundle/js/admin/js.fileLoadByDefault.js') }}"></script> <script src="{{ asset('bundles/mybundle/js/admin/init.js') }}"></script> {% endblock %}

जब हम config.yml पर जाते हैं और मुख्य सोनाटा टेम्पलेट को फिर से परिभाषित करते हैं
// app / config / config.yml

 sonata_admin: title: My Admin Panel templates: ## default global templates layout: MyFolderMyBundle:Admin:sonata_admin_base_layout.html.twig

तो हमने क्या किया, हमने अपनी फ़ाइलों को एम्बेड करने में सक्षम होने के लिए मुख्य सोनाटा टेम्पलेट को फिर से परिभाषित किया। आप स्वाभाविक रूप से इन 4 लाइनों को बदल सकते हैं:

 <script src="{{ asset('bundles/mybundle/js/admin/jquery.filedrop.js') }}"></script> <script src="{{ asset('bundles/mybundle/js/admin/js.fileDropBlock.js') }}"></script> <script src="{{ asset('bundles/mybundle/js/admin/js.fileLoadByDefault.js') }}"></script> <script src="{{ asset('bundles/mybundle/js/admin/init.js') }}"></script>

ये फाइलें वास्तव में हमारे साथ इस तरह से रहती हैं:

MyBundle / Resources / public / js / admin / jquery.filedrop.js
MyBundle / Resources / public / js / admin / js.fileDropBlock.js
MyBundle / Resources / public / js / admin / js.fileLoadByDefault.js
MyBundle / संसाधन / सार्वजनिक / js / admin / js.init.js.

ध्यान दें कि सब कुछ सही होगा, मैं दृढ़ता से अनुशंसा करता हूं कि आप फ़ाइलों को बनाने के लिए इसमें सार्वजनिक फ़ोल्डर में व्यवस्थापक फ़ोल्डर बनाएँ:

js.fileDropBlock.js
js.fileLoadByDefault.js
init.js.

जैसा कि आप समझ सकते हैं, 4 की पहली फ़ाइल हमारी पहले से एक गीता से डाउनलोड की गई है, इसलिए इसे शर्मिंदा न करें और इसे व्यवस्थापक फ़ोल्डर में फेंक दें, और उसके बाद हम संपत्ति करते हैं। कंसोल में हम टाइप करते हैं

$ ऐप / कंसोल एसेट्स: सब कुछ सही होने पर वेब -सिमलिंक इंस्टॉल करें , फिर आपके सार्वजनिक फ़ोल्डर की एक प्रति / बंडल / mybundle / फ़ोल्डर में दिखाई देनी चाहिए, क्या यह दिखाई दिया है? हमने धरना दिया। अब क्रम में प्रत्येक फ़ाइल के बारे में। तो, फ़ाइल नंबर 1 (js.fileDropBlock.js) और उसका कोड:

// MyBundle / Resources / public / js / admin / js.fileDropBlock.js

 function fileDropBlock(block, type) { var allowType = { 'img': ['image/jpeg', 'image/png', 'image/gif'] }; block.filedrop({ url: '/upload-file', # url         paramname: 'file', # .     name  input  fallbackid: 'upload_button', maxfiles: 1, # -  maxfilesize: 2, #    mb #   .      error: function (err, file) { switch (err) { case 'BrowserNotSupported': console.log('Old browser'); break; case 'FileTooLarge': console.log('File Too Large'); break; case 'TooManyFiles': console.log('Only 1 file can be downloader'); break; case 'FileTypeNotAllowed': console.log('Wrong file type'); break; default: console.log('Some error'); } }, allowedfiletypes: allowType[type], #      dragOver: function () { block.addClass('active-drag-block'); }, dragLeave: function () { block._removeClass('active-drag-block'); }, uploadFinished: function (i, file, response) { block.find('input[type="text"]').val(response.filePath); #       } }) }

फ़ाइल नंबर 2 (js.fileLoadByDefault.js) और उसका कोड:
// MyBundle / Resources / public / js / admin / js.LoadByDefault.js

 var arrayType = { 'img': [ 'image/png', 'image/jpg', 'image/jpeg' ], 'pdf': [ 'application/pdf', 'application/x-pdf' ] }; function fileLoadByDefault(selector, type, block) { var input = document.getElementById(selector), formdata = false; input.click(); }

ज्यादा नहीं, है ना? हमें थोड़ी देर बाद उसकी जरूरत है। तो, अंत में, फ़ाइल नंबर 3 (init.js) और उसका कोड:

// MyBundle / Resources / public / js / admin / init.js

 (function ($) { $(document).ready(function () { $.fn.uploadFile = function (type) { var blockText = { 'img': {'text': ['Drag Image File Here'], 'name': ['img'], 'id': ['imguploadform']} }; this.append('<p>' + blockText[type].text + '</p>'); this.append('<input type="file" class="upload-file" name="' + type + 'file" id="' + type + 'uploadform" data-type="'+ blockText[type].name +'">'); this.addClass('drag_n_drop--' + type + 'Path'); $('input', this).hide(); fileDropBlock(this, type); }; var imgBlock = $('div', 'div[id$="_coverPath"]'); imgBlock.uploadFile('img'); $('input[type="file"]').on("change", function () { var $_this = $(this), type = $_this.data('type'), reader, file; file = this.files[0]; if (window.FormData) { formdata = new FormData(); } if (window.FileReader) { reader = new FileReader(); reader.readAsDataURL(file); } if (formdata) { formdata.append("file", file); } if (!$.inArray(file.type, arrayType[type])) { $.ajax({ url: "/upload-file", type: "POST", data: formdata, processData: false, contentType: false, success: function (res) { var userData = jQuery.parseJSON(res); $_this.parent().find('input[type="text"]').val(userData.filePath); } }); } else { alert('Wrong type') } }); imgBlock.click(function () { fileLoadByDefault('imguploadform', 'img', this); }); }); })(jQuery);

आइए स्पष्ट करें कि क्या चल रहा है और भागों में कोड का विश्लेषण करें। पहले, हमारे पास प्रति पृष्ठ केवल एक इनपुट था, लेकिन हमें ड्रैग एंड ड्रॉप के लिए एक क्षेत्र की आवश्यकता है।

 $.fn.uploadFile = function (type) { var blockText = { 'img': { 'text': ['Drag Image File Here'], 'name': ['img'], 'id': ['imguploadform'] } }; this.append('<p>' + blockText[type].text + '</p>'); this.append('<input type="file" class="upload-file" name="' + type + 'file" id="' + type + 'uploadform" data-type="'+ blockText[type].name +'">'); this.addClass('drag_n_drop--' + type + 'Path'); $('input', this).hide(); fileDropBlock(this, type); };

एक फ़ंक्शन, जो एक एकल पैरामीटर के रूप में, दस्तावेज़ का प्रकार लेता है जिसे हम एक विशिष्ट क्षेत्र में लोड (ड्रॉप) करने जा रहे हैं।

फ़ंक्शन ने इसे स्वीकार किया और हमारे पास लौट आया, अनिवार्य रूप से एक नया HTML कोड। जिसमें पाठ के साथ एक अनुच्छेद शामिल है:

 this.append('<p>' + blockText[type].text + '</p>');

डाउनलोड बटन, फिर भी यह एक महत्वपूर्ण भूमिका निभाएगा:

 this.append('<input type="file" class="upload-file" name="' + type + 'file" id="' + type + 'uploadform" data-type="'+ blockText[type].name +'">');

तत्व को समझने के लिए एक वर्ग जोड़ें।

 this.addClass('drag_n_drop--' + type + 'Path');

और सभी इनपुट छिपाएँ:

 $('input', this).hide();

सीएसएस रंग जोड़ें:

// MyBundle / संसाधन / सार्वजनिक / css / style.css

 .drag_n_drop--imgPath{ width: 150px; height: 100px; cursor: pointer; border: 2px solid #e0e0e0; background: #f9f9f9; }

अंत में, इन सभी जोड़तोड़ के बाद, आपको इसके समान कुछ मिलना चाहिए।

यदि ऐसा है, तो सब ठीक है।

Init.js फ़ाइल पर आगे

ऐसा कोड:

 var imgBlock = $('div', 'div[id$="_name"]'); #        imgBlock.uploadFile('img'); #     uploadFile

निम्नलिखित कोड का एक छोटा सा टुकड़ा है:

 $('input[type="file"]').on("change", function () { #   ,     var $_this = $(this), type = $_this.data('type'), reader, file; file = this.files[0]; #      file if (window.FormData) { formdata = new FormData(); #   (     js) } if (window.FileReader) { reader = new FileReader(); #   reader.readAsDataURL(file); } if (formdata) { formdata.append("file", file); #     } if (!$.inArray(file.type, arrayType[type])) { #        $.ajax({ url: "/upload-file", #    type: "POST", data: formdata, #     processData: false, contentType: false, success: function (res) { var userData = jQuery.parseJSON(res); #   $_this.parent().find('input[type="text"]').val(userData.filePath); #              } }); } else { alert('Wrong type'); #   alert   } });

अगला, कोड:

 imgBlock.click(function () { fileLoadByDefault('imguploadform', 'img', this); });

यह सिर्फ इतना है कि जब हम अपने दिवा पर क्लिक करते हैं, जो इसमें चित्र फेंकने के लिए डिज़ाइन किया गया है, तो इसमें fileLoadByDefault फ़ंक्शन के 3 तर्क हैं। 1 - आईडी input'a प्रकार फ़ाइल के साथ। 2 - जिस प्रकार की फाइल हम अपलोड करना चाहते हैं। 3 - मूल तत्व स्वयं, जिस पर क्लिक हुआ।

वास्तव में यहां, एक चौकस पाठक यह नोटिस कर सकता है कि, वास्तव में, हमारा कोड लोडिंग के 2 तरीकों को लागू करता है। पहला ड्रैग एंड ड्रॉप (जो कि उनके लिए स्ट्रीम किया गया था) है, और दूसरा अपलोड डीए फाइल के मानक रूप को कॉल करने के लिए कंटेनर दिवा पर एक क्लिक है, जो ड्रूप एंड ड्रॉप के लिए अभिप्रेत है। अनिवार्य रूप से 2 एक साइड इफेक्ट है, ऐसा एक अच्छा साइड इफेक्ट है।

मैं आपको परेशान नहीं करना चाहूंगा, लेकिन हमने केवल आधा काम किया है ... आगे और अधिक मज़ा, अब चलो php पर जाएं!

इसलिए, हमें याद है कि हम किसी भी घटना के लिए [/ अपलोड-फ़ाइल] लिंक का संदर्भ देते हैं, चाहे वह ड्रॉप फ़ाइल या प्रत्यक्ष डाउनलोड हो।

हमें इस मामले के लिए मार्ग निर्धारित करने की आवश्यकता है:

// MyFolder / MyBundle / Resourses / config / rounting.yml

 my_file_upload: pattern: /upload-file defaults: { _controller: MyFolderMyBundle:Default:uploadFile }

[UploadFile] विधि के कोड पर एक नज़र डालें:

// MyFolder / MuBundle / Contraller / Default.php

 <?php namespace MyFolder\MyBundle\Controller; use Symfony\Component\HttpFoundation\File\File; use Symfony\Bundle\FrameworkBundle\Controller\Controller; use Symfony\Component\HttpFoundation\Request; use Symfony\Component\HttpFoundation\Response; use Symfony\Component\HttpFoundation\File\UploadedFile; class DefaultController extends Controller { public function uploadFileAction() { $filename = $_FILES['file']; #    $uploadPath = $this->upload($filename); #    /** *   .     */ return null === $uploadPath ? new Response(json_encode(array( 'status' => 0, 'message' => 'Wrong file type' ) ) ) : new Response(json_encode(array( 'status' => 1, 'message' => $filename, #   'filePath' => $uploadPath #     ) ) ); } private function getFoldersForUploadFile($type) { $fileType = $this->returnExistFileType($type); #       if ($fileType !== null) { return array( 'root_dir' => $this->container->getParameter('upload_' . $fileType . '_root_directory'), #       'dir' => $this->container->getParameter('upload_' . $fileType . '_directory'), #     ); } else { return null; } } #   ()     private function returnExistFileType($type) { $typeArray = array( 'img' => array( 'image/png', 'image/jpg', 'image/jpeg', ), 'pdf' => array( 'application/pdf', 'application/x-pdf', ) ); foreach ($typeArray as $key => $value) { if (in_array($type, $value)) { return $key; } } return null; } #     . ,  ,    private function upload($file) { $filePath = $this->getFoldersForUploadFile($file['type']); if (null === $this->getFileInfo($file['name']) || $filePath === null) { return null; } $pathInfo = $this->getFileInfo($file['name']); $path = $this->fileUniqueName() . '.' . $pathInfo['extension']; $this->uploadFileToFolder($file['tmp_name'], $path, $filePath['root_dir']); unset($file); return $filePath['dir'] . DIRECTORY_SEPARATOR . $path; } #       (    ) private function getFileInfo($file) { return $file !== null ? (array)pathinfo($file) : null; } #    private function fileUniqueName() { return sha1(uniqid(mt_rand(), true)); } #      private function uploadFileToFolder($tmpFile, $newFileName, $rootFolder) { $e = new File($tmpFile); $e->move($rootFolder, $newFileName); }

जैसा कि यह निकला, शैतान इतना भयानक नहीं है। शायद मैं कुछ बिंदु से चूक गया ... लेकिन आप, प्रिय पाठक, अपने सवाल लिखने के लिए स्वतंत्र हैं, कोड पर शुभकामनाएं और टिप्पणियों में इसके अनुकूलन। वास्तव में इस लेख में मैंने सिम्फनी में अपने बूटलोडर को लागू करने का सबसे आसान तरीका दिखाया। स्वाभाविक रूप से, इन तरीकों को सेवा में ले जाना चाहिए और केवल इसे कॉल करना चाहिए। हम जल्द ही ऐसा करेंगे, लेकिन यह एक और कहानी है।

PS फ़ाइलों को डाउनलोड करने के लिए फ़ोल्डर्स का रास्ता इस तरह दिखता है

// app / config / config.yml

 parameters: upload_img_root_directory: %kernel.root_dir%/../web/upload/img upload_img_directory: upload/img

अपलोड फ़ोल्डर और img फ़ोल्डर इसके अंदर नहीं हैं, आपको उन्हें बनाने की आवश्यकता है।

आप एक ऐसी विधि लिखने के लिए भी स्वतंत्र हैं जो यह करेगी कि ये फ़ोल्डर मौजूद नहीं हैं। उनके लिए राइटिंग परमिशन रखना याद रखें।

SonataAdminBundle + AJAX फ़ाइल डाउनलोड

More articles: