Skip to content

Instantly share code, notes, and snippets.

@fritsvt

fritsvt/filepond.html

Last active June 30, 2018 15:27
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save fritsvt/5d050192b44cf6e39965640388783bec to your computer and use it in GitHub Desktop.
Save fritsvt/5d050192b44cf6e39965640388783bec to your computer and use it in GitHub Desktop.
Download ZIP
Raw
filepond.html
<!DOCTYPE html>
<html>
<head>
<title>FilePond from CDN</title>
<!-- Filepond stylesheet -->
<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<!-- image preview -->
<link href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.css" rel="stylesheet">
</head>
<body>
<!-- We'll transform this input into a pond -->
<input type="file" name="file" class="filepond">
<!-- image preview -->
<script src="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.js"></script>
<!-- exif -->
<script src="https://unpkg.com/filepond-plugin-image-exif-orientation/dist/filepond-plugin-image-exif-orientation.js"></script>
<!-- Load FilePond library -->
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>
<!-- Turn all file input elements into ponds -->
<script>
// We want to preview images, so we register
// the Image Preview plugin, We also register
// exif orientation (to correct mobile image
// orientation) and size validation, to prevent
// large files from being added
FilePond.registerPlugin(
FilePondPluginImagePreview,
FilePondPluginImageExifOrientation,
// FilePondPluginFileValidateSize
);
FilePond.setOptions({
server: 'https://api.boring.host/api/upload'
});
// Select the file input and use
// create() to turn it into a pond
FilePond.create(
document.querySelector('input'),
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment