Grapesjs: [QUESTION] How do I save the images to database?

[josefph]

Please do bare with me but it's really hard to understand the documentation. Can you guys help me do do this?

[JulyanoF]

Hello @pranzikkin
You can pass images to your backend to proccess image and store it in database:

var editor = grapesjs.init({
    container : '#gjs',
    assetManager: {
        upload: 'http://localhost/mybackend/storeImageDatabase.php',
        autoAdd: true
    },
    // [...]
});

And in PHP file you can take the image as a file: $_FILES

[josefph]

@JulyanoF thanks bro. I'll try doing that.

[josefph]

@JulyanoF I am getting unexpected identifier in autoAdd: true

[JulyanoF]

@pranzikkin it’s missing a comma in line above, I edited...

[josefph]

@JulyanoF what would be the name of the file when it's passed to the php?
// $_FILES['whatsthename'];

[JulyanoF]

@pranzikkin it is an array of files:
$_FILES['files']
You can debug and see the response on browser's network (console).
As it is passing a single file of each time, the file is passing at the first position, so you can take the name of file ($_FILES['files']['name'][0]) the tmp name ($_FILES['files']['tmp_name'][0])...
Reference: PHP - File Upload

[arthuralmeidap]

@pranzikkin the name of the input is file. So you should access something like $_FILES['file'].

Try that and let me know

[josefph]

@JulyanoF okay I'll try it. thanks for the great help. and at the same time sorry for the noobish questions. I'm new to using a framework that uses js. I am actually used to PHP and laravel framework.

[josefph]

@arthuralmeidap trying it right now. Thanks for the help

[JulyanoF]

@pranzikkin You're welcome, I'm implementing GrapesJS in my CakePHP 3.x project 👍

[josefph]

@JulyanoF would it be okay to ask you to help me with future problems that I will encounter while implementing grapesjs in my laravel project? I will just gonna ask some questions. not literally need you to help me build my project lol

[JulyanoF]

@pranzikkin I'm trying to learn this framework at all too.. I'm having many difficulties too hahaha. You can see how many questions I made here :/

[josefph]

@JulyanoF do you know how to save the template you created in a db? and on how to load it back into the editor?

[JulyanoF]

@pranzikkin yes, I made exactly it hahaha and I created tree differente "Models" to user choose to start with them too xD And I made very significative changes in editor 😮

[JulyanoF]

@pranzikkin check it (it's a option of init method):

storageManager: {
        autosave: true,
        setStepsBeforeSave: 2,
        type: 'remote',
        urlStore: 'http://localhost/store.php',
        urlLoad: 'http://localhost/load.php',
        contentTypeJson: true,
    },

[josefph]

@JulyanoF okay bro I'll check it. what does the setStepsBeforeSave mean?

[JulyanoF]

@pranzikkin API Reference - Storage Manager

[josefph]

@JulyanoF I'm getting this error while trying to save an image.
Failed to load http://localhost/grapesjs-dev/savetodb.php: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

and I tried adding header('Access-Control-Allow-Origin: *'); on top of the php file. still no luck

[JulyanoF]

@pranzikkin Stack Overflow
In savetodb.php you must to return a json object

[arthuralmeidap]

@pranzikkin ,
This error is happening because the grapes is probably running on a different port from the server.
Something like localhost:8080 and the server runs on 80.
as @JulyanoF mention you can enable the CORS for this

[josefph]

@JulyanoF what data should I return?
@arthuralmeidap actually it's running on the same port. I was mistakenly editing a different savetodb.php file hahaha my bad

[JulyanoF]

@pranzikkin you must return the image url (array),
Something like [ "http://localhost/uploads/image1.png" ] or as a Array of Object: [ [ 'src' => 'http://localhost/uploads/image1.png', 'width' => '150', 'height' => '150' ] ]

[josefph]

@JulyanoF okay i'll try that after the CORS error. thanks for the help

[arthuralmeidap]

@pranzikkin
put the http\https for the url;

something like http://<youraddress>

[josefph]

@JulyanoF deleted my comment. got it working now but now i'm getting unexpected token in JSON

[josefph]

@arthuralmeidap got it working already guys. I wasn't opening the app in localhost but opened the html file. so its getting the error. now i'm getting the unexpected token in JSON error. maybe something's wrong with what I returned

[arthuralmeidap]

@pranzikkin

try to return a JSON with a src property that points to the image url

[josefph]

@arthuralmeidap
$file = ["src" => pathtoimage'], "width" => 150, "height" => 150]; return json_encode($file);

this is what I am returning in my php file and also $_FILES['file'] is not working. I'm getting unidentified index

[JulyanoF]

@pranzikkin

$file = array(
    array(
        'src' => 'http://localhost/image.png',
        'width' => '150',
        'height' => '150',
    )
);
echo json_encode($file);die;

[josefph]

@JulyanoF okay ill try that. but i'm getting index not found in $_FILES['file']

[JulyanoF]

@pranzikkin

@pranzikkin it is an array of files:
$_FILES['files']
You can debug and see the response on browser's network (console).
As it is passing a single file of each time, the file is passing at the first position, so you can take the name of file ($_FILES['files']['name'][0]) the tmp name ($_FILES['files']['tmp_name'][0])...
Reference: PHP - File Upload

[josefph]

@JulyanoF thank you

[josefph]

@JulyanoF thank you for the great help. got it working now.
@arthuralmeidap thank you for the help. got it working now.

[JulyanoF]

@pranzikkin you can close your "issue" question if it is solved 😄

[josefph]

@JulyanoF oh sorry didn't see your reply. sadly this structure is not working $file = array( array( 'src' => 'http://localhost/image.png', 'width' => '150', 'height' => '150', ) ); echo json_encode($file);

how do you indent this code block anyway?

[JulyanoF]

@pranzikkin I'm actually using this format.. What is the error?

[josefph]

@JulyanoF unexpected token b in JSON position 0

[JulyanoF]

@pranzikkin please post your code

[josefph]

@JulyanoF
$file = array(
array(
'src' => 'http://localhost/grapesjs-dev/uploads/'.$_FILES['files']['name'][0],
'width' => '150',
'height' => '150',
)
);
var_dump($file);
return json_encode($file);die;

i don't know how to indent the inserted code :(

[JulyanoF]

obviously, you shouldn't return a var_dump. You should only echo the json_encode of object and try to have a die; after json_encode like echo json_encode($file);die;

[arthuralmeidap]

Instead of returning an array of files, try to return just one.

$file = array(
'src' => 'http://localhost/grapesjs-dev/uploads/'.$_FILES['files']['name'][0],
'width' => '150',
'height' => '150',
);

return json_encode($file);die;

[josefph]

@arthuralmeidap I removed all the var_dump because it might cause the error. now I am getting unexpected end of JSON input

[josefph]

@arthuralmeidap im getting this error
SyntaxError: Unexpected end of JSON input
at JSON.parse (<anonymous>)
at R.i.onUploadResponse (grapes.min.js:2)
at grapes.min.js:2
at <anonymous>
onUploadError @ grapes.min.js:2
(anonymous) @ grapes.min.js:2
Promise.catch (async)
uploadFile @ grapes.min.js:2
i @ grapes.min.js:2

[JulyanoF]

@pranzikkin did you try to simulate directly in php file before use in grapesjs?

[josefph]

@JulyanoF how do I do that? well in network in debug tool. the savetodp.php doesn't give any error. when used.

[JulyanoF]

access savetodp.php directly, simulating a json return (without need a file)

[josefph]

@JulyanoF it does work. and I get an error because no file was passed.

[josefph]

@JulyanoF could you show me your php code? I want to see how you returned your json

[arthuralmeidap]

@pranzikkin @JulyanoF

Here we go guys. In GrapesJS docs has a topic about what is expected as a response from the server.

Take a look here: https://github.com/artf/grapesjs/wiki/Assets#response

[arthuralmeidap]

something like:

$file = array(
  'data' => array(
'src' => 'http://localhost/grapesjs-dev/uploads/'.$_FILES['files']['name'][0],
'width' => '150',
'height' => '150',
)
);

return json_encode($file);die;

[JulyanoF]

@pranzikkin

    public function upload()
    {
        if(isset($_FILES['files'])){
            // echo json_encode( $_FILES['files']['name']);die;
            $tipo = explode('.', $_FILES['files']['name'][0]);
            $tipo = $tipo[1];
            $nome_url = md5(microtime(true)) . '.' . $tipo;
            if(move_uploaded_file($_FILES['files']['tmp_name'][0], 'uploads/'. $nome_url)){
                $this->add($_FILES['files']['name'][0], $nome_url);
                $images = array([
                    'src' =>Router::url("/uploads/".$nome_url,true)
                ]);
                echo json_encode($images);die;
                exit;
            }
        }
        echo '{"status":"error"}';
        exit;
    }

[josefph]

@arthuralmeidap I was actually looking at the documentation and tried that format. still no luck ;(
@JulyanoF why use echo?

[JulyanoF]

@pranzikkin because in CakePHP, each function represents a view when called by url. If I don't use die;, it get's an error for view's file not found

[josefph]

@arthuralmeidap okay got it working with that format and replaced return with echo. thanks for the big help.
@JulyanoF thank you for the help. got it working now. changed my return to echo.

I actually tried using echo then got no error but the image was not loaded in the asset manager so I thought what I was doing is wrong.

[josefph]

@JulyanoF @arthuralmeidap I dont know how to thank you guys for the great help you have given me today. wow this post got so many replies hahaha well I hope we could help others with this.

[josefph]

@JulyanoF @arthuralmeidap thank you guyss. I'll now go on my next step which is how to save the template(html and css codes) to the db. and on how to load it back to the editor.

[josefph]

@JulyanoF can you help me on what data should I save to the database and on how to load it back in the editor?

[JulyanoF]

@pranzikkin check it:
Store/Load data
Store Manager

[irfanhanfi]

@pranzikkin @JulyanoF

I am also trying to integrate it with laravel. I checked $_FILES array and I can see uploaded file in that array but if I try laravel method to get file it's blank. Is any of you have tried request()->file('files') method to get uploaded file?

Thanks,

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.