Using File Picker in HTML Forms

.field {
  padding: 5px;
}
#picker {
  width: 240px;
  height: 60px;
  background-color: orange;
  cursor: pointer;
  border: none;
  color: #fff;
  font-weight: 600;
  border-radius: 5px;
}
#picker:hover {
  background-color: #f1b446;
}

Copied!

// Set up the picker
const client = filestack.init("yourAPIKey");
const options = {
  onUploadDone: updateForm,
  maxSize: 10 * 1024 * 1024,
  accept: "image/*",
  uploadInBackground: false
};
const picker = client.picker(options);

// Get references to the DOM elements

const form = document.getElementById("pick-form");
const fileInput = document.getElementById("fileupload");
const btn = document.getElementById("picker");
const nameBox = document.getElementById("nameBox");
const urlBox = document.getElementById("urlBox");

// Add our event listeners

btn.addEventListener("click", function (e) {
  e.preventDefault();
  picker.open();
});

form.addEventListener("submit", function (e) {
  e.preventDefault();
  alert("Submitting: " + fileInput.value);
});

// Helper to overwrite the field input value

function updateForm(result) {
  const fileData = result.filesUploaded[0];
  fileInput.value = fileData.url;

  // If file is resizable image, resize and embed it as a thumbnail preview
  if (["jpeg", "png"].indexOf(fileData.mimetype.split("/")[1]) !== -1) {
    const container = document.getElementById("thumbnail-container");
    const thumbnail = document.getElementById("thumbnail") || new Image();
    thumbnail.id = "thumbnail";
    thumbnail.src = client.transform(fileData.handle, {
      resize: {
        width: 200
      }
    });

    if (!container.contains(thumbnail)) {
      container.appendChild(thumbnail);
    }
  }
}

Copied!