Upload and delete image though ajax in Magento 2

As per my requirements, I have made a code to upload an image and given the various effects to the image.

So please follow the below steps to achieve the functionality.

Step1: Add below code in your .phtml file where you want to upload an image.

<div class="container wallpapercustompage">
  <div class="row">
    <div class="col-lg-8">
      <div class="mainImage">
        <img src="<?php echo $this->getUrl(); ?>10221276943_45e198c6c6_4k.jpg" id="mainImageSrc" />
      </div>
      <div class="actions-save" style="display:none;">
          <button type="button" class="action-cancel" data-role="cancel-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Cancel'); ?>"><span><?php echo __('Cancel'); ?></span></button>
          <button type="button" class="action-apply" data-role="apply-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Apply'); ?>"><span><?php echo __('Apply'); ?></span></button>
      </div>
      <div class="actions">
          <button type="button" class="action-flip" data-role="flip-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Flip image'); ?>"><span><?php echo __('Flip image'); ?></span></button>
          <button type="button" class="action-bw" data-role="bw-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Black & White Filter'); ?>"><span><?php echo __('Black & White Filter'); ?></span></button>
          <button type="button" class="action-sepia" data-role="sepia-button" data-image="10221276943_45e198c6c6_4k.jpg" data-type="jpg" title="<?php echo __('Sepia Filter'); ?>"><span><?php echo __('Sepia Filter'); ?></span></button>
      </div>
    </div>
    <div class="col-lg-4">
      <form class="form-horizontal"  id="frm_attachment" name="frm_attachment" method="post" enctype="multipart/form-data" action="<?php echo $this->getUrl(); ?>wallpaper/index/customize">
          <div class="browse-wrap">
            <input accept="image/*" id="attachment" name="attachment" type="file" value="">
          </div>
          
          <div class="row">
            <button type="submit" id="uploadAttachment" class="btn btn-primary"><?php echo __('Submit'); ?></button>
          </div>
      </form>

      <div id="attachmentFiles"></div>
    </div>  
	</div>
</div>

<style type="text/css">
    .mainImage-image-grayscale{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }

    .mainImage-image-sepia{ -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); }

    .mainImage-image-flip{ transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -khtml-transform: scale(-1, 1); -ms-transform: scale(-1, 1); }
</style>


<script>

function getSizeInCM (sizeInPX) {  
   return sizeInPX * 2.54 / (96 * window.devicePixelRatio)
};

require(['jquery'], function ($) {

    $(document).ready(function ($) {

    	/**** Delete Image & Image Effects ****/
        $(document).on('click', '#attachmentFiles .action-remove', function(){
           if (window.confirm("Are you sure you want to delete?")) {
               var attachmentPath = $(this).attr("data-image");
               var divID = $(this).parents(".base-image").attr("id");
               var imageID = $(this).parents(".base-image").find(".hiddneattachID").val();
               
               jQuery.ajax({
                    url: "<?php echo $this->getUrl(); ?>wallpaper/index/deleteCustomize?isAjax=true",
                    type: "POST",
                    data: {filename: attachmentPath, form_key: window.FORM_KEY, imageID:imageID},
                    showLoader: true,
                    success: function (response) {
                        if(response.success == true){
                            var parentElements = $(".base-image#"+divID).prev().children();
                            $(".base-image#"+divID).remove();
                            if($(".base-image").length > 0)
                            {
                              $('#mainImageSrc').attr("src",parentElements.find('.wallpaper-image').attr('src'));
                              parentElements.find('.selectImage').attr('checked','checked');
                              var srcFilename = parentElements.find('.selectImage').attr('data-srcfilename');
                              var srcType = parentElements.find('.selectImage').attr('data-srctype');
                              $('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);
                            }
                            else
                            {
                              $('#mainImageSrc').attr("src", "<?php echo $this->getUrl(); ?>10221276943_45e198c6c6_4k.jpg");
                              var srcFilename = '10221276943_45e198c6c6_4k.jpg';
                              var srcType = 'jpg';
                              $('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);
                              $('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);
                            }
                        }
                    },
                   error: function (response) {
                        alert(response.message);
                   }
                });
           } 
        });

        $(document).on('click', '.action-bw', function(){
           var attachmentPath = $(this).attr("data-image");
           $('.mainImage').addClass('mainImage-image-grayscale');
           $('div.actions').hide();
           $('div.actions-save').show();
           $('.action-apply').attr('data-action', '1');
        });

        $(document).on('click', '.action-sepia', function(){
           var attachmentPath = $(this).attr("data-image");
           $('.mainImage').addClass('mainImage-image-sepia');
           $('div.actions').hide();
           $('div.actions-save').show();
           $('.action-apply').attr('data-action', '2');
        });

        $(document).on('click', '.action-flip', function(){
           var attachmentPath = $(this).attr("data-image");
           $('.mainImage').addClass('mainImage-image-flip');
           $('div.actions').hide();
           $('div.actions-save').show();
           $('.action-apply').attr('data-action', '3');
        });
        
     	  $(document).on('click', '.action-cancel', function(){
           var attachmentPath = $(this).attr("data-image");
           $('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');
           $('div.actions').show();
           $('div.actions-save').hide();
           $('.action-apply').removeAttr('data-action');
        });

        $(document).on('change', "input[name='selectImage']", function(){
            var srcPath = $(this).attr("data-src");
            var srcType = $(this).attr("data-srctype");
            var srcFilename = $(this).attr("data-srcfilename")

            $('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);
            $('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);
            $('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);
            $('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);
            $('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);
            $('#mainImageSrc').attr("src", srcPath);
        });

        $(document).on('click', '.action-apply', function(){
           	var imageName = $(this).attr("data-image");
           	var imageType = $(this).attr("data-type");
           	var imageAction = $(this).attr("data-action");
           
           	jQuery.ajax({
                url: "<?php echo $this->getUrl(); ?>wallpaper/index/imageCustomize?isAjax=true",
                type: "POST",
                data: {filename: imageName, fileType:imageType, fileAction:imageAction},
                showLoader: true,
                success: function (response) {
                  if(response.error == false)
                  {
                    $('.action-bw').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-sepia').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-flip').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-cancel').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-apply').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

         			      $('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');
    		           	$('div.actions').show();
    		           	$('div.actions-save').hide();
    	           		$('.action-apply').removeAttr('data-action');

                    $("#attachmentFiles").append(response.data.html);
                    $('#mainImageSrc').attr("src", response.data.path);

                    // Create dummy image to get real width and height
                    $("<img>").attr("src", response.data.path).load(function(){
                      var realWidth = this.width;
                      var realHeight = this.height;
                      var width = getSizeInCM(realWidth);
                      var height = getSizeInCM(realHeight);
                      /*alert("Original width=" + width + ", " + "Original height=" + height);*/
                    });
                  }
                  else
                  {
                    $('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');
                    $('div.actions').hide();
                    $('div.actions-save').show();
                    alert(response.message);
                  }
                },
               error: function (response) {
                    alert(response.message);
               }
            });
        });
        

        /**** Upload Image ****/
        $('#uploadAttachment').click(function(e){e.preventDefault();  $('#attachment').trigger('click'); });
        
        $("#attachment").change(function(){
            var data = $("#frm_attachment").get(0);
            
            jQuery.ajax({
             	url: "<?php echo $this->getUrl(); ?>wallpaper/index/addCustomize?isAjax=true' ?>",
             	type: "POST",
             	data: new FormData(data),
             	processData: false,
             	contentType: false,
             	showLoader: true,
             	success: function (response) {
                  if(response.error == false)
                  {
               			$('.action-bw').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-sepia').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-flip').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-cancel').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);
               			$('.action-apply').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

               			$('div.actions').show();

                  	$("#attachmentFiles").append(response.data.html);
                    $('#mainImageSrc').attr("src", response.data.path);
                  	$('#frm_attachment')[0].reset();

                  	// Create dummy image to get real width and height
                    $("<img>").attr("src", response.data.path).load(function(){
                      var realWidth = this.width;
                      var realHeight = this.height;
                      var width = getSizeInCM(realWidth);
                      var height = getSizeInCM(realHeight);
                      /*alert("Original width=" + width + ", " + "Original height=" + height);*/
                    });
                  }
                  else
                  {
                    alert(response.message);
                    $('#frm_attachment')[0].reset();
                  }
             	},
              error: function (response) {
              	alert(response.message);
              	$('#frm_attachment')[0].reset();
              }
            });
        });
    });
});
</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

<img src="<?php echo $this->getUrl(); ?>10221276943_45e198c6c6_4k.jpg" id="mainImageSrc" />

</div>

</div>

</div>

<form class="form-horizontal" id="frm_attachment" name="frm_attachment" method="post" enctype="multipart/form-data" action="<?php echo $this->getUrl(); ?>wallpaper/index/customize">

</div>

</div>

</form>

</div>

.mainImage-image-grayscale{ -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); -ms-filter: grayscale(100%); filter: grayscale(100%); }

.mainImage-image-sepia{ -webkit-filter: sepia(100%); -moz-filter: sepia(100%); -o-filter: sepia(100%); -ms-filter: sepia(100%); filter: sepia(100%); }

.mainImage-image-flip{ transform: scale(-1, 1); -moz-transform: scale(-1, 1); -webkit-transform: scale(-1, 1); -o-transform: scale(-1, 1); -khtml-transform: scale(-1, 1); -ms-transform: scale(-1, 1); }

</style>

function getSizeInCM (sizeInPX) {

return sizeInPX * 2.54 / (96 * window.devicePixelRatio)

};

require(['jquery'], function ($) {

$(document).ready(function ($) {

/**** Delete Image & Image Effects ****/

$(document).on('click', '#attachmentFiles .action-remove', function(){

if (window.confirm("Are you sure you want to delete?")) {

var attachmentPath = $(this).attr("data-image");

var divID = $(this).parents(".base-image").attr("id");

var imageID = $(this).parents(".base-image").find(".hiddneattachID").val();

jQuery.ajax({

url: "<?php echo $this->getUrl(); ?>wallpaper/index/deleteCustomize?isAjax=true",

type: "POST",

data: {filename: attachmentPath, form_key: window.FORM_KEY, imageID:imageID},

showLoader: true,

success: function (response) {

if(response.success == true){

var parentElements = $(".base-image#"+divID).prev().children();

$(".base-image#"+divID).remove();

if($(".base-image").length > 0)

{

$('#mainImageSrc').attr("src",parentElements.find('.wallpaper-image').attr('src'));

parentElements.find('.selectImage').attr('checked','checked');

var srcFilename = parentElements.find('.selectImage').attr('data-srcfilename');

var srcType = parentElements.find('.selectImage').attr('data-srctype');

$('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);

}

else

{

$('#mainImageSrc').attr("src", "<?php echo $this->getUrl(); ?>10221276943_45e198c6c6_4k.jpg");

var srcFilename = '10221276943_45e198c6c6_4k.jpg';

var srcType = 'jpg';

$('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);

}

error: function (response) {

alert(response.message);

}

});

}

});

$(document).on('click', '.action-bw', function(){

var attachmentPath = $(this).attr("data-image");

$('.mainImage').addClass('mainImage-image-grayscale');

$('div.actions').hide();

$('div.actions-save').show();

$('.action-apply').attr('data-action', '1');

});

$(document).on('click', '.action-sepia', function(){

var attachmentPath = $(this).attr("data-image");

$('.mainImage').addClass('mainImage-image-sepia');

$('div.actions').hide();

$('div.actions-save').show();

$('.action-apply').attr('data-action', '2');

});

$(document).on('click', '.action-flip', function(){

var attachmentPath = $(this).attr("data-image");

$('.mainImage').addClass('mainImage-image-flip');

$('div.actions').hide();

$('div.actions-save').show();

$('.action-apply').attr('data-action', '3');

});

$(document).on('click', '.action-cancel', function(){

var attachmentPath = $(this).attr("data-image");

$('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');

$('div.actions').show();

$('div.actions-save').hide();

$('.action-apply').removeAttr('data-action');

});

$(document).on('change', "input[name='selectImage']", function(){

var srcPath = $(this).attr("data-src");

var srcType = $(this).attr("data-srctype");

var srcFilename = $(this).attr("data-srcfilename")

$('.action-bw').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-sepia').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-flip').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-cancel').attr('data-image',srcFilename).attr('data-type',srcType);

$('.action-apply').attr('data-image',srcFilename).attr('data-type',srcType);

$('#mainImageSrc').attr("src", srcPath);

});

$(document).on('click', '.action-apply', function(){

var imageName = $(this).attr("data-image");

var imageType = $(this).attr("data-type");

var imageAction = $(this).attr("data-action");

jQuery.ajax({

url: "<?php echo $this->getUrl(); ?>wallpaper/index/imageCustomize?isAjax=true",

type: "POST",

data: {filename: imageName, fileType:imageType, fileAction:imageAction},

showLoader: true,

success: function (response) {

if(response.error == false)

{

$('.action-bw').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-sepia').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-flip').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-cancel').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-apply').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');

$('div.actions').show();

$('div.actions-save').hide();

$('.action-apply').removeAttr('data-action');

$("#attachmentFiles").append(response.data.html);

$('#mainImageSrc').attr("src", response.data.path);

// Create dummy image to get real width and height

$("<img>").attr("src", response.data.path).load(function(){

var realWidth = this.width;

var realHeight = this.height;

var width = getSizeInCM(realWidth);

var height = getSizeInCM(realHeight);

/*alert("Original width=" + width + ", " + "Original height=" + height);*/

});

}

else

{

$('.mainImage').removeClass('mainImage-image-grayscale').removeClass('mainImage-image-sepia').removeClass('mainImage-image-flip');

$('div.actions').hide();

$('div.actions-save').show();

alert(response.message);

}

error: function (response) {

alert(response.message);

}

});

/**** Upload Image ****/

$('#uploadAttachment').click(function(e){e.preventDefault(); $('#attachment').trigger('click'); });

$("#attachment").change(function(){

var data = $("#frm_attachment").get(0);

jQuery.ajax({

url: "<?php echo $this->getUrl(); ?>wallpaper/index/addCustomize?isAjax=true' ?>",

type: "POST",

data: new FormData(data),

processData: false,

contentType: false,

showLoader: true,

success: function (response) {

if(response.error == false)

{

$('.action-bw').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-sepia').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-flip').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-cancel').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('.action-apply').attr('data-image',response.data.filename).attr('data-type',response.data.fileType);

$('div.actions').show();

$("#attachmentFiles").append(response.data.html);

$('#mainImageSrc').attr("src", response.data.path);

$('#frm_attachment')[0].reset();

// Create dummy image to get real width and height

$("<img>").attr("src", response.data.path).load(function(){

var realWidth = this.width;

var realHeight = this.height;

var width = getSizeInCM(realWidth);

var height = getSizeInCM(realHeight);

/*alert("Original width=" + width + ", " + "Original height=" + height);*/

});

}

else

{

alert(response.message);

$('#frm_attachment')[0].reset();

}

error: function (response) {

alert(response.message);

$('#frm_attachment')[0].reset();

}

});

</script>

Step2: Create one “AddCustomize.php” file to upload an image.

<?php
namespace Magemonkeys\Wallpaper\Controller\Index;

use Magento\Framework\Json\Helper\Data as JsonHelper;

class AddCustomize extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;
	protected $connection;
    protected $_mediaDirectory;
    protected $_fileUploaderFactory;
    public $_storeManager;

	public function __construct(
		\Magento\Framework\App\Action\Context $context,
        \Magento\Framework\App\ResourceConnection $connection,
        JsonHelper $jsonHelper,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
		\Magento\Framework\View\Result\PageFactory $pageFactory)
	{
		$this->_pageFactory = $pageFactory;
        $this->connection = $connection;      
        $this->jsonHelper = $jsonHelper;
        $this->resultJsonFactory = $resultJsonFactory;
        $this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
        $this->_fileUploaderFactory = $fileUploaderFactory;
        $this->_storeManager = $storeManager;
		return parent::__construct($context);
	}

	public function execute(){
        
        $_postData = $this->getRequest()->getPost();
        
        $message = "";
        $newFileName = "";
        $error = false;
        $data = array();
        
        try{
            $target = $this->_mediaDirectory->getAbsolutePath('wallpaper/');        
            
            //attachment is the input file name posted from your form
            $uploader = $this->_fileUploaderFactory->create(['fileId' => 'attachment']);
            
            $_fileType = $uploader->getFileExtension();
            $uniqid = uniqid();
            $newFileName = $uniqid .'.'. $_fileType;
            
            /** Allowed extension types */
            $uploader->setAllowedExtensions(['jpg', 'jpeg', 'png']);
            /** rename file name if already exists */
            $uploader->setAllowRenameFiles(true);
            
            $result = $uploader->save($target, $newFileName); //Use this if you want to change your file name
            //$result = $uploader->save($target);
            if ($result['file']) {
                
                $_mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
                
                $_src = $_mediaUrl.'wallpaper/'.$newFileName;
                
                $error = false;
                $message = __("File has been successfully uploaded");
                
                $html = '<div class="image item base-image" data-role="image" id="'. $uniqid .'">
                            <div class="wallpaper-image-wrapper">
                                <div class="radioContainer">
                                    <input data-src="'.$_src.'" data-srctype="'. $_fileType .'" data-srcfilename="'. $newFileName .'" checked="checked" class="selectImage selectImage-'. $uniqid .'" type="radio" name="selectImage" value="'. $uniqid .'" />
                                </div>
                                <div class="imageContainer">
                                    <img class="wallpaper-image" data-role="image-element" src="'.$_src.'" alt="">
                                </div>
                                <div class="delete-action">
                                    <button type="button" class="action-remove" data-role="delete-button" data-image="'.$newFileName.'" title="'. __('Delete image') .'"><span>'. __('Delete image') .'</span></button>
                                </div>
                            </div>
                        </div>';
                
                $data = array('filename' => $newFileName, 'path' => $_mediaUrl.'wallpaper/'.$newFileName, 'fileType' => $_fileType, 'html' => $html);
            }
        } catch (\Exception $e) {
            $error = true;
            $message = $e->getMessage();
        }
        
        $resultJson = $this->resultJsonFactory->create();

        return $resultJson->setData([
                    'message' => $message,
                    'data' => $data,
                    'error' => $error
        ]);
    }
}

<?php

namespace Magemonkeys\Wallpaper\Controller\Index;

use Magento\Framework\Json\Helper\Data as JsonHelper;

class AddCustomize extends \Magento\Framework\App\Action\Action

{

protected $_pageFactory;

protected $connection;

protected $_mediaDirectory;

protected $_fileUploaderFactory;

public $_storeManager;

public function __construct(

\Magento\Framework\App\Action\Context $context,

\Magento\Framework\App\ResourceConnection $connection,

JsonHelper $jsonHelper,

\Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,

\Magento\Framework\Filesystem $filesystem,

\Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,

\Magento\Store\Model\StoreManagerInterface $storeManager,

\Magento\Framework\View\Result\PageFactory $pageFactory)

{

$this->_pageFactory = $pageFactory;

$this->connection = $connection;

$this->jsonHelper = $jsonHelper;

$this->resultJsonFactory = $resultJsonFactory;

$this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);

$this->_fileUploaderFactory = $fileUploaderFactory;

$this->_storeManager = $storeManager;

return parent::__construct($context);

}

public function execute(){

$_postData = $this->getRequest()->getPost();

$message = "";

$newFileName = "";

$error = false;

$data = array();

try{

$target = $this->_mediaDirectory->getAbsolutePath('wallpaper/');

//attachment is the input file name posted from your form

$uploader = $this->_fileUploaderFactory->create(['fileId' => 'attachment']);

$_fileType = $uploader->getFileExtension();

$uniqid = uniqid();

$newFileName = $uniqid .'.'. $_fileType;

/** Allowed extension types */

$uploader->setAllowedExtensions(['jpg', 'jpeg', 'png']);

/** rename file name if already exists */

$uploader->setAllowRenameFiles(true);

$result = $uploader->save($target, $newFileName); //Use this if you want to change your file name

//$result = $uploader->save($target);

if ($result['file']) {

$_mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

$_src = $_mediaUrl.'wallpaper/'.$newFileName;

$error = false;

$message = __("File has been successfully uploaded");

$html = '<div class="image item base-image" data-role="image" id="'. $uniqid .'">

</div>

</div>

<button type="button" class="action-remove" data-role="delete-button" data-image="'.$newFileName.'" title="'. __('Delete image') .'"><span>'. __('Delete image') .'</span></button>

</div>

</div>';

$data = array('filename' => $newFileName, 'path' => $_mediaUrl.'wallpaper/'.$newFileName, 'fileType' => $_fileType, 'html' => $html);

}

} catch (\Exception $e) {

$error = true;

$message = $e->getMessage();

}

$resultJson = $this->resultJsonFactory->create();

return $resultJson->setData([

'message' => $message,

'data' => $data,

'error' => $error

]);

}

Step3: Create one “DeleteCustomize.php” file to delete your uploaded image.

<?php
namespace Magemonkeys\Wallpaper\Controller\Index;

use Magento\Framework\Json\Helper\Data as JsonHelper;

class DeleteCustomize extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;
	protected $connection;
    protected $_mediaDirectory;
    protected $_fileUploaderFactory;
    public $_storeManager;
    protected $_file;

	public function __construct(
		\Magento\Framework\App\Action\Context $context,
        \Magento\Framework\App\ResourceConnection $connection,
        JsonHelper $jsonHelper,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\Filesystem\Driver\File $file,
		\Magento\Framework\View\Result\PageFactory $pageFactory)
	{
		$this->_pageFactory = $pageFactory;
        $this->connection = $connection;      
        $this->jsonHelper = $jsonHelper;
        $this->resultJsonFactory = $resultJsonFactory;
        $this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
        $this->_fileUploaderFactory = $fileUploaderFactory;
        $this->_storeManager = $storeManager;
        $this->_file = $file;
		return parent::__construct($context);
	}

	public function execute(){
        
        $_postData = $this->getRequest()->getPost();
        
        $message = "";
        $newFileName = "";
        $success = false;
        
        $mediaRootDir = $this->_mediaDirectory->getAbsolutePath();
        $_fileName = $mediaRootDir .'wallpaper/'. $_postData['filename'];
        if ($this->_file->isExists($_fileName))  {
            try{
                /*$this->attachment->load($_postData['imageID']);
                $this->attachment->delete();*/
                
                $this->_file->deleteFile($_fileName);
                $message = __('File removed successfully.');
                $success = true;
            } catch (Exception $ex) {
                $message = $ex->getMessage();
                $success = false;
            }
        }else{
            $message = "File not found.";
            $success = false;
        }
        
        $resultJson = $this->resultJsonFactory->create();

        return $resultJson->setData([
                    'message' => $message,
                    'data' => '',
                    'success' => $success
        ]);
    }
}

<?php

namespace Magemonkeys\Wallpaper\Controller\Index;

use Magento\Framework\Json\Helper\Data as JsonHelper;

class DeleteCustomize extends \Magento\Framework\App\Action\Action

{

protected $_pageFactory;

protected $connection;

protected $_mediaDirectory;

protected $_fileUploaderFactory;

public $_storeManager;

protected $_file;

public function __construct(

\Magento\Framework\App\Action\Context $context,

\Magento\Framework\App\ResourceConnection $connection,

JsonHelper $jsonHelper,

\Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,

\Magento\Framework\Filesystem $filesystem,

\Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,

\Magento\Store\Model\StoreManagerInterface $storeManager,

\Magento\Framework\Filesystem\Driver\File $file,

\Magento\Framework\View\Result\PageFactory $pageFactory)

{

$this->_pageFactory = $pageFactory;

$this->connection = $connection;

$this->jsonHelper = $jsonHelper;

$this->resultJsonFactory = $resultJsonFactory;

$this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);

$this->_fileUploaderFactory = $fileUploaderFactory;

$this->_storeManager = $storeManager;

$this->_file = $file;

return parent::__construct($context);

}

public function execute(){

$_postData = $this->getRequest()->getPost();

$message = "";

$newFileName = "";

$success = false;

$mediaRootDir = $this->_mediaDirectory->getAbsolutePath();

$_fileName = $mediaRootDir .'wallpaper/'. $_postData['filename'];

if ($this->_file->isExists($_fileName)) {

try{

/*$this->attachment->load($_postData['imageID']);

$this->attachment->delete();*/

$this->_file->deleteFile($_fileName);

$message = __('File removed successfully.');

$success = true;

} catch (Exception $ex) {

$message = $ex->getMessage();

$success = false;

}

}else{

$message = "File not found.";

$success = false;

}

$resultJson = $this->resultJsonFactory->create();

return $resultJson->setData([

'message' => $message,

'data' => '',

'success' => $success

]);

}

Step4: Create one “ImageCustomize.php” file to give the effects to your uploaded image. I have given some effect to an image as per my requirements.

<?php
namespace Magemonkeys\Wallpaper\Controller\Index;

use Magento\Framework\Json\Helper\Data as JsonHelper;

class ImageCustomize extends \Magento\Framework\App\Action\Action
{
    protected $_pageFactory;
	protected $connection;
    protected $_mediaDirectory;
    protected $_rootDirectory;
    protected $_fileUploaderFactory;
    public $_storeManager;
    protected $_file;

	public function __construct(
		\Magento\Framework\App\Action\Context $context,
        \Magento\Framework\App\ResourceConnection $connection,
        JsonHelper $jsonHelper,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,
        \Magento\Framework\Filesystem $filesystem,
        \Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,
        \Magento\Store\Model\StoreManagerInterface $storeManager,
        \Magento\Framework\Filesystem\Driver\File $file,
		\Magento\Framework\View\Result\PageFactory $pageFactory)
	{
		$this->_pageFactory = $pageFactory;
        $this->connection = $connection;      
        $this->jsonHelper = $jsonHelper;
        $this->resultJsonFactory = $resultJsonFactory;
        $this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);
        $this->_rootDirectory = $filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::ROOT);
        $this->_fileUploaderFactory = $fileUploaderFactory;
        $this->_storeManager = $storeManager;
        $this->_file = $file;
		return parent::__construct($context);
	}

	public function execute(){
        
        $_postData = $this->getRequest()->getPost();
        
        $message = "";
        $newFileName = "";
        $error = false;
        $data = array();
        $uniqid = uniqid();
        $mediaRootDir = $this->_mediaDirectory->getAbsolutePath();
        $rootDirectory = $this->_rootDirectory->getAbsolutePath();
        $_fileType = $_postData['fileType'];
        $_fileAction = $_postData['fileAction'];

        if($_postData['filename'] == '10221276943_45e198c6c6_4k.jpg')
        {
            $newFileName = $uniqid .'.'.$_fileType;
            $filePath = $rootDirectory . $_postData['filename'];
            $_fileName = $mediaRootDir .'wallpaper/'. $newFileName;
            $newFullPathOfImage = $_fileName;
            copy($filePath, $_fileName);
        }
        else
        {
            $_fileName = $mediaRootDir .'wallpaper/'. $_postData['filename'];
            $newFullPathOfImage = $mediaRootDir .'wallpaper/'. $uniqid .'.'.$_fileType;
            $newFileName = $uniqid .'.'.$_fileType;
        }

        if ($this->_file->isExists($_fileName)){
            try{
                if($_fileAction == 1) /*** Grayscale (Black & White) ***/
                {
                    if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')
                    {
                        $im = ImageCreateFromJpeg($_fileName); 

                        $imgw = imagesx($im);
                        $imgh = imagesy($im);

                        for ($i=0; $i<$imgw; $i++)
                        {
                            for ($j=0; $j<$imgh; $j++)
                            {
                                // get the rgb value for current pixel
                                $rgb = ImageColorAt($im, $i, $j); 

                                // extract each value for r, g, b
                                $rr = ($rgb >> 16) & 0xFF;
                                $gg = ($rgb >> 8) & 0xFF;
                                $bb = $rgb & 0xFF;

                                // get the Value from the RGB value
                                $g = round(($rr + $gg + $bb) / 3);

                                // grayscale values have r=g=b=g
                                $val = imagecolorallocate($im, $g, $g, $g);

                                // set the gray value
                                imagesetpixel ($im, $i, $j, $val);
                            }
                        }

                        imagejpeg($im, $newFullPathOfImage);
                        $message = __('Image converted to grayscale.');
                        imagedestroy($im);
                    }
                    else
                    {
                        $im = imagecreatefrompng($_fileName);

                        if($im && imagefilter($im, IMG_FILTER_GRAYSCALE))
                        {
                            $message = __('Image converted to grayscale.');
                            
                            imagepng($im, $newFullPathOfImage);
                            imagedestroy($im);
                        }
                        else
                        {
                            $message = __('Conversion to grayscale failed.');
                        }
                    }
                }
                else if($_fileAction == 2) /*** Sepia Color Scale ***/
                {
                    if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')
                    {
                        // Load
                        $im = ImageCreateFromJpeg($_fileName);

                        imagefilter($im, IMG_FILTER_GRAYSCALE);
                        imagefilter($im,IMG_FILTER_BRIGHTNESS,-10);
                        imagefilter($im, IMG_FILTER_COLORIZE, 65, 50, 0);
                        
                        // Output
                        imagejpeg($im, $newFullPathOfImage);
                        imagedestroy($im);
                    }
                    else
                    {
                        // Load
                        $im = imagecreatefrompng($_fileName);

                        imagefilter($im, IMG_FILTER_GRAYSCALE);
                        imagefilter($im,IMG_FILTER_BRIGHTNESS,-10);
                        imagefilter($im, IMG_FILTER_COLORIZE, 65, 50, 0);
                        
                        // Output
                        imagepng($im, $newFullPathOfImage);
                        imagedestroy($im);
                    }

                    $message = __('Image converted to sepia.');
                }
                else if($_fileAction == 3) /*** Flip Image ***/
                {
                    if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')
                    {
                        // Load
                        $im = ImageCreateFromJpeg($_fileName);

                        // Flip it horizontally
                        imageflip($im, IMG_FLIP_HORIZONTAL);

                        // Output
                        imagejpeg($im, $newFullPathOfImage);
                        imagedestroy($im);
                    }
                    else
                    {
                        // Load
                        $im = imagecreatefrompng($_fileName);

                        // Flip it horizontally
                        imageflip($im, IMG_FLIP_HORIZONTAL);

                        // Output
                        imagepng($im, $newFullPathOfImage);
                        imagedestroy($im);
                    }

                    $message = __('Image flipped.');
                }



                $_mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);
                
                $_src = $_mediaUrl.'wallpaper/'.$newFileName;
                
                $message = __("File has been successfully uploaded");
                
                $html = '<div class="image item base-image" data-role="image" id="'. $uniqid .'">
                            <div class="wallpaper-image-wrapper">
                                <div class="radioContainer">
                                    <input data-src="'.$_src.'" data-srctype="'. $_fileType .'" data-srcfilename="'. $newFileName .'" checked="checked" class="selectImage selectImage-'. $uniqid .'" type="radio" name="selectImage" value="'. $uniqid .'" />
                                </div>
                                <div class="imageContainer">
                                    <img class="wallpaper-image" data-role="image-element" src="'.$_src.'" alt="">
                                </div>
                                <div class="delete-action">
                                    <button type="button" class="action-remove" data-role="delete-button" data-image="'.$newFileName.'" title="'. __('Delete image') .'"><span>'. __('Delete image') .'</span></button>
                                </div>
                            </div>
                        </div>';
                
                $data = array('filename' => $newFileName, 'path' => $_mediaUrl.'wallpaper/'.$newFileName, 'fileType' => $_fileType, 'html' => $html);
                $error = false;
            }
            catch (Exception $ex) {
                $message = $ex->getMessage();
                $error = true;
            }
        }else{
            $message = __("File not found.");
            $error = true;
        }
        
        $resultJson = $this->resultJsonFactory->create();

        return $resultJson->setData([
            'message' => $message,
            'data' => $data,
            'error' => $error
        ]);
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

<?php

namespace Magemonkeys\Wallpaper\Controller\Index;

use Magento\Framework\Json\Helper\Data as JsonHelper;

class ImageCustomize extends \Magento\Framework\App\Action\Action

{

protected $_pageFactory;

protected $connection;

protected $_mediaDirectory;

protected $_rootDirectory;

protected $_fileUploaderFactory;

public $_storeManager;

protected $_file;

public function __construct(

\Magento\Framework\App\Action\Context $context,

\Magento\Framework\App\ResourceConnection $connection,

JsonHelper $jsonHelper,

\Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory,

\Magento\Framework\Filesystem $filesystem,

\Magento\MediaStorage\Model\File\UploaderFactory $fileUploaderFactory,

\Magento\Store\Model\StoreManagerInterface $storeManager,

\Magento\Framework\Filesystem\Driver\File $file,

\Magento\Framework\View\Result\PageFactory $pageFactory)

{

$this->_pageFactory = $pageFactory;

$this->connection = $connection;

$this->jsonHelper = $jsonHelper;

$this->resultJsonFactory = $resultJsonFactory;

$this->_mediaDirectory = $filesystem->getDirectoryWrite(\Magento\Framework\App\Filesystem\DirectoryList::MEDIA);

$this->_rootDirectory = $filesystem->getDirectoryRead(\Magento\Framework\App\Filesystem\DirectoryList::ROOT);

$this->_fileUploaderFactory = $fileUploaderFactory;

$this->_storeManager = $storeManager;

$this->_file = $file;

return parent::__construct($context);

}

public function execute(){

$_postData = $this->getRequest()->getPost();

$message = "";

$newFileName = "";

$error = false;

$data = array();

$uniqid = uniqid();

$mediaRootDir = $this->_mediaDirectory->getAbsolutePath();

$rootDirectory = $this->_rootDirectory->getAbsolutePath();

$_fileType = $_postData['fileType'];

$_fileAction = $_postData['fileAction'];

if($_postData['filename'] == '10221276943_45e198c6c6_4k.jpg')

{

$newFileName = $uniqid .'.'.$_fileType;

$filePath = $rootDirectory . $_postData['filename'];

$_fileName = $mediaRootDir .'wallpaper/'. $newFileName;

$newFullPathOfImage = $_fileName;

copy($filePath, $_fileName);

}

else

{

$_fileName = $mediaRootDir .'wallpaper/'. $_postData['filename'];

$newFullPathOfImage = $mediaRootDir .'wallpaper/'. $uniqid .'.'.$_fileType;

$newFileName = $uniqid .'.'.$_fileType;

}

if ($this->_file->isExists($_fileName)){

try{

if($_fileAction == 1) /*** Grayscale (Black & White) ***/

{

if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')

{

$im = ImageCreateFromJpeg($_fileName);

$imgw = imagesx($im);

$imgh = imagesy($im);

for ($i=0; $i<$imgw; $i++)

{

for ($j=0; $j<$imgh; $j++)

{

// get the rgb value for current pixel

$rgb = ImageColorAt($im, $i, $j);

// extract each value for r, g, b

$rr = ($rgb >> 16) & 0xFF;

$gg = ($rgb >> 8) & 0xFF;

$bb = $rgb & 0xFF;

// get the Value from the RGB value

$g = round(($rr + $gg + $bb) / 3);

// grayscale values have r=g=b=g

$val = imagecolorallocate($im, $g, $g, $g);

// set the gray value

imagesetpixel ($im, $i, $j, $val);

}

imagejpeg($im, $newFullPathOfImage);

$message = __('Image converted to grayscale.');

imagedestroy($im);

}

else

{

$im = imagecreatefrompng($_fileName);

if($im && imagefilter($im, IMG_FILTER_GRAYSCALE))

{

$message = __('Image converted to grayscale.');

imagepng($im, $newFullPathOfImage);

imagedestroy($im);

}

else

{

$message = __('Conversion to grayscale failed.');

}

else if($_fileAction == 2) /*** Sepia Color Scale ***/

{

if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')

{

// Load

$im = ImageCreateFromJpeg($_fileName);

imagefilter($im, IMG_FILTER_GRAYSCALE);

imagefilter($im,IMG_FILTER_BRIGHTNESS,-10);

imagefilter($im, IMG_FILTER_COLORIZE, 65, 50, 0);

// Output

imagejpeg($im, $newFullPathOfImage);

imagedestroy($im);

}

else

{

// Load

$im = imagecreatefrompng($_fileName);

imagefilter($im, IMG_FILTER_GRAYSCALE);

imagefilter($im,IMG_FILTER_BRIGHTNESS,-10);

imagefilter($im, IMG_FILTER_COLORIZE, 65, 50, 0);

// Output

imagepng($im, $newFullPathOfImage);

imagedestroy($im);

}

$message = __('Image converted to sepia.');

}

else if($_fileAction == 3) /*** Flip Image ***/

{

if(strtolower($_fileType) == 'jpg' || strtolower($_fileType) == 'jpeg')

{

// Load

$im = ImageCreateFromJpeg($_fileName);

// Flip it horizontally

imageflip($im, IMG_FLIP_HORIZONTAL);

// Output

imagejpeg($im, $newFullPathOfImage);

imagedestroy($im);

}

else

{

// Load

$im = imagecreatefrompng($_fileName);

// Flip it horizontally

imageflip($im, IMG_FLIP_HORIZONTAL);

// Output

imagepng($im, $newFullPathOfImage);

imagedestroy($im);

}

$message = __('Image flipped.');

}

$_mediaUrl = $this->_storeManager->getStore()->getBaseUrl(\Magento\Framework\UrlInterface::URL_TYPE_MEDIA);

$_src = $_mediaUrl.'wallpaper/'.$newFileName;

$message = __("File has been successfully uploaded");

$html = '<div class="image item base-image" data-role="image" id="'. $uniqid .'">

</div>

</div>

<button type="button" class="action-remove" data-role="delete-button" data-image="'.$newFileName.'" title="'. __('Delete image') .'"><span>'. __('Delete image') .'</span></button>

</div>

</div>';

$data = array('filename' => $newFileName, 'path' => $_mediaUrl.'wallpaper/'.$newFileName, 'fileType' => $_fileType, 'html' => $html);

$error = false;

}

catch (Exception $ex) {

$message = $ex->getMessage();

$error = true;

}

}else{

$message = __("File not found.");

$error = true;

}

$resultJson = $this->resultJsonFactory->create();

return $resultJson->setData([

'message' => $message,

'data' => $data,

'error' => $error

]);

}

Fill the below form if you have any Magento programming need.

Author Info

A. Patel

Hire A. Patel

Fill the form & Get Installation Support

Connect With Us

Upload and delete image though ajax in Magento 2

Recent Articles

Get a Free Quote

Author Info

A. Patel

Fill the form & Get Installation Support

Connect With Us

Upload and delete image though ajax in Magento 2

Recent Articles

Get a Free Quote

Author Info

A. Patel

FILL THE FORM BELOW & GET FREE DEVELOPMENT FOR 25 HOURS.