Upload Multiple Images on the frontend Form

Question

I want to upload Multiple images on frontend side. i have added

enctype and Input type file

the field is accepting multiple images but after printing array of Data its shows only one single image.

Frontend form field code is

<div class="control">
 <input type="file" name="images " id="review_field" data-validate="{required:false}" data-bind="value: review().images" multiple title="Upload Product Images" />
 </div>

when I add name="images[]" and after printing the $Data array, the images field doesn't shows. The screenshot is attached with adding images[] in name. enter image description here

Controller

 /** @var \Magento\Review\Model\Review $review */
 $pathurl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'review_booster/';
 $mediaDir = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath();
 $mediapath = $this->_mediaBaseDirectory = rtrim($mediaDir, '/');
 $files = $this->getRequest()->getFiles();
 if (isset($files['image']) && !empty($files['image']["name"])){
 try {
 $uploader = $this->_fileUploaderFactory->create(['fileId' => 'image']);
 $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
 $uploader->setAllowRenameFiles(true);
 $path = $mediapath . '/review_module/';
 $data['images'] = $files['image']['name'];
 $result = $uploader->save($path);
 }catch (\Exception $e) {
 $this->messageManager->addError(__($e->getMessage()));
 }
 }

• Rohan Hapani: Can you please upload your files code here?
• sudo55: added the complete code.
• AboElnouR: May this comment help someone later, check this answer: magento.stackexchange.com/a/199132/81049

Answer 1

Try below code:

<div class="control">
 <input type="file" name="images[]" id="review_field" data-validate="{required:false}" 
 data-bind="value: review().images" title="Upload 
 Product Images" multiple/>
</div>
<?php
$pathurl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA) . 'review_booster/';
$mediaDir = $this->_filesystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath();
$mediapath = $this->_mediaBaseDirectory = rtrim($mediaDir, '/');
//$files = $this->getRequest()->getFiles(); 
$images = $this->getRequest()->getFiles('images');
if(count($files)){
 $i = 0;
 foreach ($images as $files) {
 if (isset($files['tmp_name']) && strlen($files['tmp_name']) > 0) {
 try {
 $uploader = $this->_fileUploaderFactory->create(['fileId' => $images[$i]]);
 $uploader->setAllowedExtensions(['jpg', 'jpeg', 'gif', 'png']);
 $uploader->setAllowRenameFiles(true);
 $path = $mediapath . '/review_module/';
 $data['images'] = $files['name'];
 $result = $uploader->save($path);
 // echo $result['file']; 
 }catch (\Exception $e) {
 $this->messageManager->addError(__($e->getMessage()));
 }
 }
 $i++;
 }
}
?>

• user55776: These answer help to multiple upload images
• sudo55: i will check this later. Thanks for the help

Answer 2

did you add array on the input image in your form, if you want enable multiple upload image, please try add [] on image input name in the form :

 <input name="image[]" class="image" title="<?php echo __('Image') ?>" />

when you print array of data from the form you should be get multiple image data.

• sudo55: yes i have added the array.
• mrfizh: did you add enctype="multipart/form-data to the form, the form should be to be like this : <form action="..." method=".." enctype="multipart/form-data">
• sudo55: yes added that as well
• mrfizh: hmm... very strange, maybe it's better to show your completely form code. so we could help to analyze more detail.
• sudo55: actually the problem is in the controller where the images will be saved in DB. When i upload one image it is working fine but when I add multiple images it only uploads one image to the database as well as when i print post data array that shows only one image.