Magento2: Image not uploaded for visual swatch options

[rbostan]

Preconditions

1. Magento 2.1.2
2. PHP 7.0.11
3. Both Production and Developer mode

Steps to reproduce

1. Create an visual swatch attribute
2. Add some options
3. Choose 'Upload file' from swatch dropdown
4. Select file.

Expected result

1. File uploaded and shown in row

Actual result

1. Image not uploaded.
   Ajax response: File '/home/xxxx/public_html/pub/media/attribute/swatch/3/1/3101-5.png' does not exists.

[slopukhov]

@rbostan thank you for your feedback.
I cannot reproduce this issue.
Could you provide information about your environment and could you check write permissions for directory /home/xxxx/public_html/pub/media/?
Do you have problems with downloading images for products or only with visual swatch options?

[rbostan]

@slopukhov site working on apache & suPHP with php 7.0.11.
all folders are 755 and files 644 as magento requirements.

Also tried /pub/media to 777, no result.

[rbostan]

Problem is just about visual swatch options. All of other things related images working fine.

Any update ?

[usmanshah-mag]

Same issue. It was fine few days ago. I have not added any new extensions or anything that may have caused any issue. Its strange that it worked fine and now it isnt working at all. I dont get any response like how you said you had a response that the image is not found, with me, after I select the file, it uploads, like the browser starts loading, but it never uploads and the uploaded file is never shown in the row and I dont even get any ajax response.

[minlare]

For me it breaks when using Database Media Storage, if I change to Filesystem storage the upload works fine.

[ebubekirkaragol]

It's not solved with changing storage type on Magento 2.1.7. Is there any update to solve this issue?

[magento-engcom-team]

@rbostan Thanks for reporting this issue. Unfortunately, I could not reproduce the issue as you described it.
Steps:
Go to Store-Attributes-Product, than Add New Attribute

Tried to reproduce with File System and Database storage types, production and developer modes.
Can you tell what I am doing wrong for reproducing this issue?

[magento-engcom-team]

@rbostan, we are closing this issue due to inactivity. If you'd like to update it, please reopen the issue.

[jacuenca]

The error occurs when using a role other than the administrator
The call to the iframe returns permission error

[lammanh0405]

In file vendor/magento/module-swatches/view/adminhtml/web/js/visual.js
Change this code "var imageParams = $.parseJSON($(this).contents().find('body').html())"
to "var imageParams = $.parseJSON(this.contentWindow.document.body.innerHTML)"

Hope this helps.

[minlare]

I think the issue may be due to the fact that the swatch upload config is saving to catalog/product media path rather than attribute/swatch which the JS is looking for.

I fixed the issue on my install (which is using db storage) with the following plugin to move the file to the correct path.

<?php

namespace Module\Magento\Swatches\Plugin;

use Magento\Swatches\Helper\Media;
use Magento\MediaStorage\Helper\File\Storage\Database;

class SwatchesMediaPlugin
{
    /**
     * @var Database
     */
    protected $fileStorageDb = null;

    /**
     * @param Database $fileStorageDb;
     */
    public function __construct(Database $fileStorageDb)
    {
        $this->fileStorageDb = $fileStorageDb;
    }

    public function beforeGenerateSwatchVariations(Media $subject, $imageUrl)
    {
        if ($this->fileStorageDb->checkDbUsage()) {
            $fullImageUrl = 'catalog/product' . $imageUrl;
            $swatchImageUrl = 'attribute/swatch' . $imageUrl;
            $this->fileStorageDb->renameFile(
                $fullImageUrl,
                $swatchImageUrl
            );
            $this->fileStorageDb->saveFileToFilesystem($swatchImageUrl);
        }

        return null;
    }
}

[Vanessa1906]

@magento-engcom-team the same issue. i can't upload file to swatches attribute if use a role orther than adminitrator (= set role is Custom, not All ), role = All is working fine

[thanhnd0905]

@magento-engcom-team i have the same issue.. error happens when I have a role other than adminitrator Althought I have config user have role that be upload swatch image .. Please check this issue again .. It just woking fine if User role = adminitrator

[gouravsyscraft]

I also facing same issue, and its happenig for all user roll.

Please tell me, if any have fix this issue.

[alexjuniodev]

I'm facing same issue.

Magento 2.2.5
PHP 7.0.30

[medinadato]

I'm facing same issue.

Magento 2.2.3
PHP 7.0.

[aeu]

I am seeing the same issue, Magento 2.2.5, PHP 7.1.19. Inspector shows:

VM6795:1 Uncaught SyntaxError: Unexpected token < in JSON at position 114
at JSON.parse ()
at Function.jQuery.parseJSON (jquery.js:9011)
at Function.jQuery.parseJSON (jquery-migrate.js:235)
at HTMLIFrameElement.iframeHandler (visual.js:364)
at HTMLIFrameElement.dispatch (jquery.js:5226)
at HTMLIFrameElement.elemData.handle (jquery.js:4878)

[daniellof]

I am seeing the same issue, Magento 2.2.5, PHP 7.1.19. Inspector shows:

VM6795:1 Uncaught SyntaxError: Unexpected token < in JSON at position 114
at JSON.parse ()
at Function.jQuery.parseJSON (jquery.js:9011)
at Function.jQuery.parseJSON (jquery-migrate.js:235)
at HTMLIFrameElement.iframeHandler (visual.js:364)
at HTMLIFrameElement.dispatch (jquery.js:5226)
at HTMLIFrameElement.elemData.handle (jquery.js:4878)

@aeu for me the same error is presented in the console and I have the same settings that I quoted. I even upgraded Magento to the newly released version 2.2.6 but the error remains the same! Did you get any solutions?

[aeu]

Hi @daniellof - unfortunately I did not get a solution to this problem, we had to do something else to work around this bug.

[anvanza]

@aeu , @daniellof For me, the bug was caused by an extension in my Chrome browser. When I tried it in an incognito tab without any extensions loaded, it worked.

The chrome-extension injected some HTML in the json response when uploading the image. The root cause of this issue is in Magento, the response is marked as text/html while it's a json document.

[grichards]

I am experiencing this problem in 2.3.3 when trying to upload (replace) a swatch image.

Uncaught SyntaxError: Unexpected token < in JSON at position 108

The response JSON is mal-formed, it looks like this:

{"swatch_path":"http:\/\/100.21.184.114\/media\/attribute\/swatch","file_path":"\/v\/a\/vanilla-lush_2.jpg"}<div style="display: none;"></div>

Position 108 is the beginning of the div.... where did that come from?!