Retrieving file contents using DropzoneJS

Question

I really like the DropZoneJS component, and currently I wrap it with the EmberJS component (here you can see here ). In any case, the shell works fine, but I would like to listen to one of the Dropzone events and analyze the contents of the file (rather than meta-information such as size, lastModified, etc.). The type of file I'm dealing with is an XML file, and I would like to "verify" it before sending it.

How can I do that? I would think that the content would hang with an object filethat you can find on many events, but if I just don’t miss something obvious, it’s not there. :(

Answer 1

Well, I answer my question, and since others are interested, I will post my answer here. For a working demonstration of this, you can find it here:

https://ui-dropzone.firebaseapp.com/demo-local-data

In the demo, I wrapped the Dropzone component in the EmberJS framework, but if you look at the code, you will find it only Javascript code, there is nothing to fear. :)

We will do the following:

• Get file before network request

  The key thing we need to know is the HTML5 API. The good news is quite simple. Take a look at this code and perhaps all you need:

  /**
   * Replaces the XHR send operation so that the stream can be
   * retrieved on the client side instead being sent to the server.
   * The function name is a little confusing (other than it replaces the "send"
   * from Dropzonejs) because really what it doing is reading the file and
   * NOT sending to the server.
   */
  _sendIntercept(file, options={}) {
    return new RSVP.Promise((resolve,reject) => {
      if(!options.readType) {
        const mime = file.type;
        const textType = a(_textTypes).any(type => {
          const re = new RegExp(type);
          return re.test(mime);
        });
        options.readType = textType ? 'readAsText' : 'readAsDataURL';
      }
      let reader = new window.FileReader();
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.onerror = () => {
        reject(reader.result);
      };
  
      // run the reader
      reader[options.readType](file);
    });
  },
  

  https://github.com/lifegadget/ui-dropzone/blob/0.7.2/addon/mixins/xhr-intercept.js#L10-L38

  , , , , "" Javascript. , ( , , "" ... ).

• Dropzone

  -, Dropzone, , . API HTML5 File, , Dropzone .

  "accept", ( XML , ) , , .

  , "" accept, , . , . ** * accept - :

  this.accept = this.localAcceptHandler; // replace "accept" on Dropzone
  

  , this Dropzone. :

  • init hook
  • (, new Dropzone({accept: {...})

  "localAcceptHandler", :

  localAcceptHandler(file, done) {
    this._sendIntercept(file).then(result => {
      file.contents = result;
      if(typeOf(this.localSuccess) === 'function') {
        this.localSuccess(file, done);
      } else {
        done(); // empty done signals success
      }
    }).catch(result => {
      if(typeOf(this.localFailure) === 'function') {
        file.contents = result;
        this.localFailure(file, done);
      } else {
        done(`Failed to download file ${file.name}`);
        console.warn(file);
      }
    });
  }
  

  https://github.com/lifegadget/ui-dropzone/blob/0.7.2/addon/mixins/xhr-intercept.js#L40-L64

  :

  • (aka, _sendIntercept)
  • mime readAsText readAsDataURL
  • .contents

• , , submitRequest. Dropzone , , , :

  this._finished (, " ", "" ");

  https://github.com/lifegadget/ui-dropzone/blob/0.7.2/addon/mixins/xhr-intercept.js#L66-L70

• - , localAcceptHandler accept, dropzone:

  https://github.com/lifegadget/ui-dropzone/blob/0.7.2/addon/components/drop-zone.js#L88-L95

Answer 2

:

Dropzone.options.PDFDrop = {
    maxFilesize: 10, // Mb
    accept: function(file, done) {
        var reader = new FileReader();
        reader.addEventListener("loadend", function(event) { console.log(event.target.result);});
        reader.readAsText(file);
    }
};

reader.reaAsBinaryString(), !