Search code examples
javascriptfilepond

Why are my Filepond uploads not working on Android devices only?


I am currently using Filepond to upload images to an S3 bucket. This functionality works great on a computer or on iOS devices but refuses to work on Android devices and I'm having the time of my life figuring out the root cause. It should upload just fine across all devices. Has anyone experienced any issues similar to this on an Android device using Filepond? I've also attached below the relevant Filepond code. I don't see any issues with it, but of course, I may be missing something. If anyone could offer a pointer or any kind of advice it would be greatly appreciated or if I left anything out please let me know. Thanks!

JS

  <!-- Load FilePond library -->
  <script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
  <script src="https://unpkg.com/filepond/dist/filepond.js"></script>
    <script src="//cdn.jsdelivr.net/npm/sweetalert2@10"></script>

  <!-- include FilePond jQuery adapter -->
  <script src="https://unpkg.com/jquery-filepond/filepond.jquery.js"></script>

  <script type="application/javascript">
    let tags = [];
    let folderOpen = false;
    let currentTag = "Uncategorized";
    let imageUploadUrl = "{{ url_for('testing_jobs.job_image_upload', id=job.id) }}";

    // Page init code
    $( document ).ready(() => {
      // Select Fields
      $(".select2").select2();

      // Setup FilePond inputs
      $.fn.filepond.registerPlugin(FilePondPluginImagePreview);

      // Turn input element into a pond
      $('.filepond').filepond();

      // Set FilePond properties
      $('.filepond').filepond('allowMultiple', true);
      $('.filepond').filepond('instantUpload', true);
      $('.filepond').filepond('server', {
        url: imageUploadUrl,
        process: {
          onload: (res) => {
            // Select the response field to use as a unique ID
            let image = JSON.parse(res).image;
            if (folderOpen) {
                getJobImages(currentTag);
            } else {
                alert("Image added")
            }
            return image.id;
          }
        }
      });

      // Listen for addfile event
      $('.filepond').on('FilePond:addfile', function(e) {
          console.log('file added event', e);
          // Set the current tag for the image
          e.detail.file.setMetadata("tag",currentTag);
      });

      // Listen for processfile event
      $('.filepond').on('FilePond:processfile', function(e) {
          console.log('file process event', e);
          setTimeout(() => {
            e.detail.pond.removeFile();
          }, 2000);
      });

Html for submitting

        <div class="card">
          <div class="card-header">
            <h4>Upload Images</h4>
          </div>
          <div class="card-body">
            <input type="file" class="filepond">
          </div>
        </div>

Solution

  • The issue turned out to be the image attachments on my Android device. Set up some checks for checking the file types and now it all works.