Back to File Upload-guidelines
JavaScriptThe latest version of this package is: 0.18.6, Opens in new window
File Upload javascript
This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-js/file-upload@0.18.6
Table of Contents
Usage
Drag and drop
<form autocomplete="off">
<div class="if input-wrapper">
<input
data-size="large"
type="file"
class="if drag-drop"
multiple=""
id="if-file-upload-anatomy-6"
placeholder="Drop files here to upload"
/>
<label for="if-file-upload-anatomy-6">Upload file</label>
<button aria-hidden="true" type="button" class="if file-upload">
<svg
xmlns="http://www.w3.org/2000/svg"
class="if loader dots horizontal small"
viewBox="0 0 64 64"
width="32"
height="32"
>
<circle cx="8" cy="32" r="8" fill="#0054f0"></circle>
<circle cx="32" cy="32" r="8" fill="#0054f0"></circle>
<circle cx="56" cy="32" r="8" fill="#0054f0"></circle>
<style>
.if.loader.dots.horizontal circle {
transform: scale(0);
animation: ifAnimationLoaderHorizontal 1.15s infinite ease-in-out;
transform-origin: 56px 32px;
}
.if.loader.dots.horizontal circle:nth-child(1) {
animation-delay: -0.32s;
transform-origin: 8px 32px;
}
.if.loader.dots.horizontal circle:nth-child(2) {
animation-delay: -0.16s;
transform-origin: 32px 32px;
}
@-moz-keyframes ifAnimationLoaderHorizontal {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
@-webkit-keyframes ifAnimationLoaderHorizontal {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
@-o-keyframes ifAnimationLoaderHorizontal {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
@keyframes ifAnimationLoaderHorizontal {
0%,
80%,
100% {
transform: scale(0);
}
40% {
transform: scale(1);
}
}
</style>
</svg>
<svg
class="if icon"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 32 32"
>
…
</svg>
<span class="if">
Drop files here to upload
<br />
<span class="if fake-link text-meta">Or select files to upload</span>
</span>
</button>
<div class="if uploaded-files"></div>
</div>
</form>
Script
<script src="../file-upload.iife.js"></script>
<script>
IDSFileUpload.init();
</script>
Module
import { init as IDSFileUpload } from '@ids-js/file-upload';
IDSFileUpload();
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
0.17.0 (2021-10-21)
Code Refactoring
- 💡 Remove support for CommonJS (9f84d9a)
BREAKING CHANGES
- 🧨 We have removed the support for CommonJS for all @ids-js packages
0.16.1 (2021-10-21)
Bug Fixes
- Use common for cjs and main for esm (96f673d)