Issue #1816💬 AnsweredOpened February 20, 2019by Shah-ali0 reactions

Not allowing to upload same image on same the position after delete that image

快速解答by artf

We have to clear the file input once the image is selected

Read full answer below ↓

Question

Ajax call which is uploading image file in assests folder

module.exports =  {
  // Default assets
  assets: [],

  // Style prefix
  stylePrefix: 'am-',

  // Url where uploads will be send, set false to disable upload
  upload: 'http://localhost/grapeJs/src/file_uploader/fileUpload.php',

  // Text on upload input
  uploadText: 'Drop files here or click to upload',

  // Label for the add button
  addBtnText: 'Add image',

  // Custom uploadFile function
 // @example
  uploadFile: function(e) {
    var files = e.dataTransfer ? e.dataTransfer.files : e.target.files;
    // ...send somewhere
      console.log(files);

      var formData = new FormData();

      for(var i in files){
          formData.append('file-'+i, files[i])
      }

      $.ajax({url: 'http://localhost/grapeJs/src/file_uploader/fileUpload.php',
          type: 'POST',
          data: formData,
          contentType:false,
          crossDomain: true,
          mimeType: "multipart/form-data",
          processData:false,
          success: function(result){
            var images = result.data; // <- should be an array of uploaded images
            editor. AssetManager.add(images);
          }
});

  }

 //  uploadFile: '',
};

It's working fine to add an image from the local.

But in another scenario, It's not working. Please have a look Drag image block Select an image Delete that image Add the same image again on same the place, "uploadFile" function is not calling It's not allowing me to upload same image on same position after delete that image

Answers (3)

artfFebruary 22, 2019

We have to clear the file input once the image is selected

Shah-aliFebruary 23, 2019

Any hint please. how to clear file input?

Shah-aliFebruary 25, 2019

I think, I have fixed it. In OpenAssets.js

if (accept) {
      const uploadEl = amContainer.querySelector(
        `input#${config.stylePrefix}uploadFile`
      );
      uploadEl && uploadEl.setAttribute('accept', accept);
      uploadEl.value = "";
    }

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Free option

Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.

Browse free plugins →
Premium option

Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.

Browse premium plugins →

Related tutorials

In-depth guides on the same topic.

All tutorials →

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.