title: Dropzone getAcceptedFiles content data?
body: <p>How can I get the content of a file when processing files manually with getAcceptedFiles in a separate function? Every image returns a dataURL with base64 which is good and allows me to upload photos to my node serer successfully. But any other file (ie: video, pdf, doc, etc), returns no dataURL.  I found and did triy this <a href="https://stackoverflow.com/questions/33710825/getting-file-contents-when-using-dropzonejs#42326891">answer</a> but it only reads the files. Please see my example and try it for yourself. Upload an image and click on upload files. You will see the dataURL with the base64. Then try with a document. No data. So how do I possibly get the content for other types of files?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Dropzone.autoDiscover = false;
  
  var myDropzone = new Dropzone('.dropzone-file', {
  url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
  paramName: "file", 
  addRemoveLinks: true,
  uploadMultiple: true,
  autoProcessQueue: false,
  });
  
  $('.upload-files').on('click', function() {
  var files = $('.dropzone-file').get(0).dropzone.getAcceptedFiles();
  
  //upload bar
  $('.dz-upload').addClass('dz-progress-bar');
  
  // try upload image and other docs to see result
  console.log(files);
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.dropzone-file{
  border: 1px dashed green;
  padding: 1%;
  text-align: center;
  }
  .dropzone-file:hover{
  cursor:pointer;
  background:whitesmoke;
  }
  @-webkit-keyframes passing-through {
      0% {
          opacity: 0;
          -webkit-transform: translateY(40px);
          -moz-transform: translateY(40px);
          -ms-transform: translateY(40px);
          -o-transform: translateY(40px);
          transform: translateY(40px);
      }
      30%,
      70% {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
      }
      100% {
          opacity: 0;
          -webkit-transform: translateY(-40px);
          -moz-transform: translateY(-40px);
          -ms-transform: translateY(-40px);
          -o-transform: translateY(-40px);
          transform: translateY(-40px);
      }
  }
  @-moz-keyframes passing-through {
      0% {
          opacity: 0;
          -webkit-transform: translateY(40px);
          -moz-transform: translateY(40px);
          -ms-transform: translateY(40px);
          -o-transform: translateY(40px);
          transform: translateY(40px);
      }
      30%,
      70% {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
      }
      100% {
          opacity: 0;
          -webkit-transform: translateY(-40px);
          -moz-transform: translateY(-40px);
          -ms-transform: translateY(-40px);
          -o-transform: translateY(-40px);
          transform: translateY(-40px);
      }
  }
  @keyframes passing-through {
      0% {
          opacity: 0;
          -webkit-transform: translateY(40px);
          -moz-transform: translateY(40px);
          -ms-transform: translateY(40px);
          -o-transform: translateY(40px);
          transform: translateY(40px);
      }
      30%,
      70% {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
      }
      100% {
          opacity: 0;
          -webkit-transform: translateY(-40px);
          -moz-transform: translateY(-40px);
          -ms-transform: translateY(-40px);
          -o-transform: translateY(-40px);
          transform: translateY(-40px);
      }
  }
  @-webkit-keyframes slide-in {
      0% {
          opacity: 0;
          -webkit-transform: translateY(40px);
          -moz-transform: translateY(40px);
          -ms-transform: translateY(40px);
          -o-transform: translateY(40px);
          transform: translateY(40px);
      }
      30% {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
      }
  }
  @-moz-keyframes slide-in {
      0% {
          opacity: 0;
          -webkit-transform: translateY(40px);
          -moz-transform: translateY(40px);
          -ms-transform: translateY(40px);
          -o-transform: translateY(40px);
          transform: translateY(40px);
      }
      30% {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
      }
  }
  @keyframes slide-in {
      0% {
          opacity: 0;
          -webkit-transform: translateY(40px);
          -moz-transform: translateY(40px);
          -ms-transform: translateY(40px);
          -o-transform: translateY(40px);
          transform: translateY(40px);
      }
      30% {
          opacity: 1;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
      }
  }
  @-webkit-keyframes pulse {
      0% {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
      }
      10% {
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          -ms-transform: scale(1.1);
          -o-transform: scale(1.1);
          transform: scale(1.1);
      }
      20% {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
      }
  }
  @-moz-keyframes pulse {
      0% {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
      }
      10% {
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          -ms-transform: scale(1.1);
          -o-transform: scale(1.1);
          transform: scale(1.1);
      }
      20% {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
      }
  }
  @keyframes pulse {
      0% {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
      }
      10% {
          -webkit-transform: scale(1.1);
          -moz-transform: scale(1.1);
          -ms-transform: scale(1.1);
          -o-transform: scale(1.1);
          transform: scale(1.1);
      }
      20% {
          -webkit-transform: scale(1);
          -moz-transform: scale(1);
          -ms-transform: scale(1);
          -o-transform: scale(1);
          transform: scale(1);
      }
  }
  .dropzone-file,
  .dropzone-file * {
      box-sizing: border-box;
  }
  .dropzone-file {
      min-height: 150px;
      border: 2px solid rgba(0, 0, 0, 0.3);
      background: #fff;
      padding: 20px 20px;
  }
  .dropzone-file.dz-clickable {
      cursor: pointer;
  }
  .dropzone-file.dz-clickable * {
      cursor: default;
  }
  .dropzone-file.dz-clickable .dz-message,
  .dropzone-file.dz-clickable .dz-message * {
      cursor: pointer;
  }
  .dropzone-file.dz-started .dz-message {
      display: none;
  }
  .dropzone-file.dz-drag-hover {
      border-style: solid;
  }
  .dropzone-file.dz-drag-hover .dz-message {
      opacity: 0.5;
  }
  .dropzone-file .dz-message {
      text-align: center;
      margin: 2em 0;
  }
  .dropzone-file .dz-message .dz-button {
      background: none;
      color: inherit;
      border: none;
      padding: 0;
      font: inherit;
      cursor: pointer;
      outline: inherit;
  }
  .dropzone-file .dz-preview {
      position: relative;
      display: inline-block;
      vertical-align: top;
      margin: 16px;
      min-height: 100px;
  }
  .dropzone-file .dz-preview:hover {
      z-index: 1000;
  }
  .dropzone-file .dz-preview:hover .dz-details {
      opacity: 1;
  }
  .dropzone-file .dz-preview.dz-file-preview .dz-image {
      border-radius: 20px;
      background: #999;
      background: linear-gradient(to bottom, #eee, #ddd);
  }
  .dropzone-file .dz-preview.dz-file-preview .dz-details {
      opacity: 1;
  }
  .dropzone-file .dz-preview.dz-image-preview {
      background: #fff;
  }
  .dropzone-file .dz-preview.dz-image-preview .dz-details {
      -webkit-transition: opacity 0.2s linear;
      -moz-transition: opacity 0.2s linear;
      -ms-transition: opacity 0.2s linear;
      -o-transition: opacity 0.2s linear;
      transition: opacity 0.2s linear;
  }
  .dropzone-file .dz-preview .dz-remove {
      font-size: 14px;
      text-align: center;
      display: block;
      cursor: pointer;
      border: none;
  }
  .dropzone-file .dz-preview .dz-remove:hover {
      text-decoration: underline;
  }
  .dropzone-file .dz-preview:hover .dz-details {
      opacity: 1;
  }
  .dropzone-file .dz-preview .dz-details {
      z-index: 20;
      position: absolute;
      top: 0;
      left: 0;
      opacity: 0;
      font-size: 13px;
      min-width: 100%;
      max-width: 100%;
      padding: 2em 1em;
      text-align: center;
      color: rgba(0, 0, 0, 0.9);
      line-height: 150%;
  }
  .dropzone-file .dz-preview .dz-details .dz-size {
      margin-bottom: 1em;
      font-size: 16px;
  }
  .dropzone-file .dz-preview .dz-details .dz-filename {
      white-space: nowrap;
  }
  .dropzone-file .dz-preview .dz-details .dz-filename:hover span {
      border: 1px solid rgba(200, 200, 200, 0.8);
      background-color: rgba(255, 255, 255, 0.8);
  }
  .dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) {
      overflow: hidden;
      text-overflow: ellipsis;
  }
  .dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) span {
      border: 1px solid transparent;
  }
  .dropzone-file .dz-preview .dz-details .dz-filename span,
  .dropzone-file .dz-preview .dz-details .dz-size span {
      background-color: rgba(255, 255, 255, 0.4);
      padding: 0 0.4em;
      border-radius: 3px;
  }
  .dropzone-file .dz-preview:hover .dz-image img {
      -webkit-transform: scale(1.05, 1.05);
      -moz-transform: scale(1.05, 1.05);
      -ms-transform: scale(1.05, 1.05);
      -o-transform: scale(1.05, 1.05);
      transform: scale(1.05, 1.05);
      -webkit-filter: blur(8px);
      filter: blur(8px);
  }
  .dropzone-file .dz-preview .dz-image {
      border-radius: 20px;
      overflow: hidden;
      width: 120px;
      height: 120px;
      position: relative;
      display: block;
      z-index: 10;
  }
  .dropzone-file .dz-preview .dz-image img {
      display: block;
  }
  .dropzone-file .dz-preview.dz-success .dz-success-mark {
      -webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .dropzone-file .dz-preview.dz-error .dz-error-mark {
      opacity: 1;
      -webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      -o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
      animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
  }
  .dropzone-file .dz-preview .dz-success-mark,
  .dropzone-file .dz-preview .dz-error-mark {
      pointer-events: none;
      opacity: 0;
      z-index: 500;
      position: absolute;
      display: block;
      top: 50%;
      left: 50%;
      margin-left: -27px;
      margin-top: -27px;
  }
  .dropzone-file .dz-preview .dz-success-mark svg,
  .dropzone-file .dz-preview .dz-error-mark svg {
      display: block;
      width: 54px;
      height: 54px;
  }
  .dropzone-file .dz-preview.dz-processing .dz-progress {
      opacity: 1;
      -webkit-transition: all 0.2s linear;
      -moz-transition: all 0.2s linear;
      -ms-transition: all 0.2s linear;
      -o-transition: all 0.2s linear;
      transition: all 0.2s linear;
  }
  .dropzone-file .dz-preview.dz-complete .dz-progress {
      opacity: 0;
      -webkit-transition: opacity 0.4s ease-in;
      -moz-transition: opacity 0.4s ease-in;
      -ms-transition: opacity 0.4s ease-in;
      -o-transition: opacity 0.4s ease-in;
      transition: opacity 0.4s ease-in;
  }
  .dropzone-file .dz-preview:not(.dz-processing) .dz-progress {
      -webkit-animation: pulse 6s ease infinite;
      -moz-animation: pulse 6s ease infinite;
      -ms-animation: pulse 6s ease infinite;
      -o-animation: pulse 6s ease infinite;
      animation: pulse 6s ease infinite;
  }
  .dropzone-file .dz-preview .dz-progress {
      opacity: 1;
      z-index: 1000;
      pointer-events: none;
      position: absolute;
      height: 16px;
      left: 50%;
      top: 50%;
      margin-top: -8px;
      width: 80px;
      margin-left: -40px;
      background: rgba(255, 255, 255, 0.9);
      -webkit-transform: scale(1);
      border-radius: 8px;
      overflow: hidden;
  }
  .dropzone-file .dz-preview .dz-progress .dz-upload {
      background: #333;
      background: linear-gradient(to bottom, #666, #444);
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      width: 0;
      -webkit-transition: width 300ms ease-in-out;
      -moz-transition: width 300ms ease-in-out;
      -ms-transition: width 300ms ease-in-out;
      -o-transition: width 300ms ease-in-out;
      transition: width 300ms ease-in-out;
  }
  .dropzone-file .dz-preview.dz-error .dz-error-message {
      display: block;
  }
  .dropzone-file .dz-preview.dz-error:hover .dz-error-message {
      opacity: 1;
      pointer-events: auto;
  }
  .dropzone-file .dz-preview .dz-error-message {
      pointer-events: none;
      z-index: 1000;
      position: absolute;
      display: block;
      display: none;
      opacity: 0;
      -webkit-transition: opacity 0.3s ease;
      -moz-transition: opacity 0.3s ease;
      -ms-transition: opacity 0.3s ease;
      -o-transition: opacity 0.3s ease;
      transition: opacity 0.3s ease;
      border-radius: 8px;
      font-size: 13px;
      top: 130px;
      left: -10px;
      width: 140px;
      background: #be2626;
      background: linear-gradient(to bottom, #be2626, #a92222);
      padding: 0.5em 1.2em;
      color: #fff;
  }
  .dropzone-file .dz-preview .dz-error-message:after {
      content: "";
      position: absolute;
      top: -6px;
      left: 64px;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-bottom: 6px solid #be2626;
  }
  .dz-progress-bar {
      width: 0;
      animation: progress 1.5s ease-in-out forwards;
    } 
    
    @keyframes progress {
      from {
        width: 0;
      }
      to {
        width: 100%;
      }
    } 
    @keyframes show  {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"&gt;&lt;/script&gt;
  &lt;link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" /&gt;
  
  &lt;!--begin::Dropzone--&gt;
  &lt;div class="dropzone-file fileuploader"&gt;
  &lt;!--begin::Message--&gt;
  &lt;div class="dz-message needsclick"&gt;
  &lt;!--begin::Icon--&gt;
  &lt;i class="bi bi-file-earmark-arrow-up text-primary fs-3x"&gt;&lt;/i&gt;
  &lt;!--end::Icon--&gt;
  
  &lt;!--begin::Info--&gt;
  &lt;div class="ms-4"&gt;
  &lt;h3 class="fs-5 fw-bolder text-gray-900 mb-1"&gt;Drop files here or click to upload.&lt;/h3&gt;
  &lt;span class="fs-7 fw-bold text-gray-400"&gt;Upload any kind of files&lt;/span&gt;
  &lt;/div&gt;
  &lt;!--end::Info--&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--end::Dropzone--&gt;
  
  &lt;button class='upload-files'&gt;Upload Files&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>