1

I want to upload images using graphql, can anyone tell me how can I implement this?

Let me know if anyone has any idea.

3 Answers 3

2

First convert your image into base64 then use that base64 string in to graphql input.

<?php

namespace VendoreName\ModuleName\Model\Resolver;

use Magento\Framework\GraphQl\Config\Element\Field;
use Magento\Framework\GraphQl\Exception\GraphQlInputException;
use Magento\Framework\GraphQl\Query\ResolverInterface;
use Magento\Framework\GraphQl\Schema\Type\ResolveInfo;
use Magento\Framework\App\Filesystem\DirectoryList;
use Magento\Framework\Filesystem;
use Magento\Framework\Filesystem\Driver\File;

class UploadImage implements ResolverInterface
{
    public function __construct(
        ....................................
        Filesystem $fileSystem,
        File $fileDriver,
        ....................................
    ) {
        ....................................
        $this->fileSystem = $fileSystem;
        $this->fileDriver = $fileDriver;
        ....................................
    }
    public function resolve(
        Field $field,
        $context,
        ResolveInfo $info,
        array $value = null,
        array $args = null
    ) {
        //your logic
        $this->uploadFile($fileData);
        //your logic
    }

    public function uploadFile($fileData)
    {
        // convert base64 string to image and save as file on server.
        $uploadedFileName = "";
        $fileName = '';
        if (isset($fileData['name'])) {
            $fileName = $fileData['name'];
        } else {
            $fileName = rand() . time();
        }
        if (isset($fileData['filecontent'])) {
            $mediaPath = $this->fileSystem->getDirectoryRead(DirectoryList::MEDIA)->getAbsolutePath();
            $originalPath = 'ModuleName/Attachments/';
            $mediaFullPath = $mediaPath . $originalPath;
            if (!file_exists($mediaFullPath)) {
                mkdir($mediaFullPath, 0775, true);
            }
            /* Check File is exist or not */
            $fullFilepath = $mediaFullPath . $fileName;
            if ($this->fileDriver->isExists($fullFilepath)) {
                $fileName = rand() . time() . $fileName;
            }
            $fileContent = base64_decode($fileData['filecontent']);
            $savedFile = fopen($mediaFullPath . $fileName, "wb");
            fwrite($savedFile, $fileContent);
            fclose($savedFile);
            $uploadedFileName = "/" . $fileName ;
        }
        return $uploadedFileName;
    }
}

Here $fileData is array and with $fileData['filecontent'] = base64 string of file and $fileData['name'] = file name.

2
  • Thanks for your answer, how can I add conditions to upload only these 'jpg', 'jpeg', 'gif', 'png','JPEG' images
    – Mohit Rane
    Jan 4, 2022 at 5:43
  • For check file extensions click here edureka.co/community/92445/…
    – Msquare
    Jan 4, 2022 at 5:50
2

Please check the below link and see if it helps:

https://github.com/huykon/magento-graphql-uploader

0

There are two easy steps to achieve this

  • Client Side (in browser or mobile application): Convert your image into base64 on client side then use that base64 string in to graphql input.
  • Server Side: Convert base64 string to image and save as file on server.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.