Dropzone doesn't work, how to save picture jszip or another API

blackbirdzzz commented 7 years ago

Hi i'm back, today i wanted to use the dropzone from the tutorial on the assets manager , i allowed my dropzone like this : "dropzone: 1" and nothing happen when i'm dropping something on my builder , i don't really want to get the dropzone tools but i just want to get the code of the modal to create my own gesture of picture, like click on a button and open this big space of picture and search your picture to set it on the builder. if you just give me some link to know how to do it, cause with the actual modal of picture gesture i got a dropzone on the left so its not what i want is the same modal of the dropzone in the gif on the assets manager tutorial.

Also i wanted to save pictures with JSZIP i want to search in all of my "editor.getHtml" and save all picture by their link (all link will be local so i think i can do it, but i don't know how with JSZIP save picture if you know could you help me , tutorial from jszip use imgData but i don't know how to get it ;x Thanks

artf commented 7 years ago

On my side dropzone works fine, are you able to provide some code to reproduce?

About JSZip, there is an example on their README which explains how to do it

var img = zip.folder("images");
img.file("smile.gif", imgData, {base64: true});

if you don't know how to fetch image data check here https://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript

blackbirdzzz commented 7 years ago

I can give you my code on the index side,


<html lang="en">

<head>
  <meta charset="utf-8">

  <title>TheKooples - Newsletter - BUILDER</title>

  <link rel="stylesheet" href="css/pagebuilder.css">
  <link rel="stylesheet" href="css/tools.css">
  <link rel="stylesheet" href="css/gjs-koop-preset-webpage.css">
  <link rel="stylesheet" href="css/gjs-koop-scroll.css">
  <link rel="icon" href="http://cdn.thekooples.com/skin/frontend/base/default/favicon.ico" type="image/x-icon">
  <link rel="shortcut icon" href="http://cdn.thekooples.com/skin/frontend/base/default/favicon.ico" type="image/x-icon">
  <script src="dist/sweetalert.min.js"></script>
  <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">

  <link rel="stylesheet" href="css/tooltip.css">
  <script src="./node_modules/jquery/dist/jquery.min.js"></script>
  <script src="./node_modules/grapesjs/dist/grapes.min.js"></script>
  <script src="./dist/grapesjs-preset-newsletter.min.js"></script>

</head>
<style>
  body > .inner {
  display: none;
}

body.pg-loaded > .inner {
  display: block;
}
  body,
  html {
    height: 100%;
    margin: 0;
  }

</style>

<body>

  <div id="gjs" style="height:0px; overflow:hidden">

  </div>

<style>
  .hide { position:absolute; top:-1px; left:-1px; width:1px; height:1px; }
</style>

<iframe name="hiddenFrame" class="hide"></iframe>

<form onsubmit="return builderForm();" id="builder-form" class="builder-form" action="" style="display:none" target="hiddenFrame">

    <div class="putsmail-c">
      <p style="font-weight: bold;margin-top: 10px;margin-bottom:10px;text-transform: uppercase;text-align: center;font-size: 10px;">
        Remplir tout les champs pour procéder à une traduction de la newsletter !</p>
    </div>
    <div class="gjs-sm-property" style="margin-bottom: 5px;">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Nom de la newsletter :</p>

      <div class="gjs-field">
        <span id="gjs-sm-input-holder">
            <input type="text" id="nl_name" name="nl_name" placeholder="NL-001-FR-M-CATEGORY-Name" required>
          </span>
      </div>
    </div>

    <div class="gjs-sm-property" style="margin-bottom: 5px;">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Nom du sheets :</p>

      <div class="gjs-field">
        <span id="gjs-sm-input-holder">
            <input type="text" id="nl_sheets" name="nl_sheets" placeholder="Sheets 1" required>
          </span>
      </div>
    </div>
    <div class="gjs-sm-property" style="margin-bottom: 5px;">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Nom de l'utm-compaign :</p>

      <div class="gjs-field">
        <span id="gjs-sm-input-holder">
            <input type="text" id="nl_utm" name="nl_utm" placeholder="sale-collection-mixte-fr" required>
          </span>
      </div>
    </div>
    <div class="gjs-sm-property">
      <p style="margin-bottom:0px; padding: 4px;margin-top: 2px;color: #00acff;font-weight: bold;">Pays de la newsletter:</p>

      <div class="gjs-field">

        <span id="gjs-sm-input-holder">
<select id="nl_lang">
  <option value="french">France</option>
  <option value="europe">Europe</option>
  <option value="german">Allemagne</option>
  <option value="england">United-Kingdom</option>
  <option value="america">United-State</option>
  <option value="suisse-fr">Suisse - France</option>
  <option value="suisse-de">Suisse - Allemagne</option>
  <option value="luxembourg">Luxembourg</option>
</select>        
  </span>
      </div>
    </div>
    <input type="hidden" name="body">
    <button class="gjs-btn-prim gjs-btn-import"  style="width: 100%;margin-top: 0px;">ENREGISTRER</button>
  </form>

  <script type="text/javascript">
    var editor = grapesjs.init({
      allowScripts: 1,
      showOffsets: 1,
      noticeOnUnload: 0,
      height: '100%',
      storageManager: {
        id: 'gjs-',
        type: 'local',
        autosave: false,
        autoload: false,
        storeComponents: 1,
        storeStyles: 1,
      },
      assetManager: {
        upload: 1,
        uploadText: 'Selectionner une image',
           dropzone: 1,
    dropzoneContent: '<div class="dropzone-inner">Drop here your assets</div>'
      },
      protectedCss: '',
      container: '#gjs',
      fromElement: true,
      plugins: ['gjs-preset-newsletter'],
      pluginsOpts: {
        'gjs-preset-newsletter': {
          modalLabelImport: "Copiez ici votre code pré-fait à fin de l'importer",
          modalLabelExport: 'Rendu du code de la Newsletter',
          importPlaceholder: '<table class="table"><tr><td class="cell">Importez votre code ici.</td></tr></table>',
        }
      }
    });

     function builderForm(){
      editor.nl_name = document.getElementById("nl_name").value;
      editor.nl_sheets = document.getElementById("nl_sheets").value;
      editor.nl_utm = document.getElementById("nl_utm").value;
      editor.nl_lang = document.getElementById("nl_lang").value;
      editor.trigger('builder_form');
    }

  </script>
</body>

</html>```

Thanks for the jszip i have succeeded to save picture :)

blackbirdzzz commented 7 years ago

Also i got a new problem when i'm clicking on picture and picture have a link behind i'm going into the url so i lost my work why this does'nt open the select picture modal like before ? I do'nt know if i touched something to disable this :x thanks

artf commented 7 years ago

Which version of grapesjs do you use?

blackbirdzzz commented 6 years ago

grapesjs@0.9.18 i'm using this version of grapesjs

artf commented 6 years ago

First of all, update to the latest version and then assetManager.upload should an url to your uploading script

lock[bot] commented 4 years ago

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.

GrapesJS / grapesjs

Dropzone doesn't work, how to save picture jszip or another API #298