File Upload Default
Default File Upload Description
<div class="form-control">
<label for="" class="form-control__label">File Default<span class="important">*</span><span class="icon icon-information-circle"></span></label>
<input type="file" class="form-control__input" name="ahaha" id="" />
</div>
File Upload Box
Box File Upload Description
Klik untuk pilih file
atau seret file ke sini
SVG, PNG, JPG atau GIF (max. 800x400px)
sedang memuat...
Berhasil
Gagal
Klik untuk pilih file
atau seret file ke sini
SVG, PNG, JPG atau GIF (max. 800x400px)
Berhasil
Klik untuk pilih file
atau seret file ke sini
SVG, PNG, JPG atau GIF (max. 800x400px)
<!-- Single Upload -->
<div class="form-control">
<label for="" class="form-control__label">Single Upload Draggable<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="upload-draggable">
<div class="upload-draggable__box">
<input type="file" class="upload-draggable__file-input" name="files[]" id="" accept="application/pdf,.ppt,.pptx,.doc,.docx,.xlsx,.xls,.zip, image/*,.mp4,.mbz,.txt,.myo,.rar" />
<label class="upload-draggable__icon"><span class="icon icon-cloud-arrow-up"></span></label>
<h2 class="upload-draggable__title">Klik untuk pilih file</h2>
<p class="upload-draggable__sub-title">atau seret file ke sini</p>
<p class="upload-draggable__support">SVG, PNG, JPG atau GIF (max. 800x400px)</p>
</div>
<div class="upload-draggable__uploading">
<span class="loader"></span> sedang memuat...
</div>
<div class="upload-draggable__success">
Berhasil
</div>
<div class="upload-draggable__error">
Gagal
</div>
</div>
</div>
<!-- Multiple Upload -->
<div class="form-control">
<label for="" class="form-control__label">Multiple upload draggable</label>
<div class="upload-draggable">
<div class="upload-draggable__box">
<input type="file" class="upload-draggable__file-input" name="files[]" id="" multiple accept="application/pdf,.ppt,.pptx,.doc,.docx,.xlsx,.xls,.zip, image/*,.mp4,.mbz,.txt,.myo,.rar" />
<label class="upload-draggable__icon"><span class="icon icon-cloud-arrow-up"></span></label>
<h2 class="upload-draggable__title">Klik untuk pilih file</h2>
<p class="upload-draggable__sub-title">atau seret file ke sini</p>
<p class="upload-draggable__support">SVG, PNG, JPG atau GIF (max. 800x400px)</p>
</div>
<div class="upload-draggable__success">
Berhasil
</div>
</div>
</div>
<!-- Disabled -->
<div class="form-control">
<label for="" class="form-control__label">Disable upload draggable</label>
<div class="upload-draggable upload-draggable_disabled">
<div class="upload-draggable__box">
<input type="file" class="upload-draggable__file-input" name="files[]" id="" multiple accept="application/pdf,.ppt,.pptx,.doc,.docx,.xlsx,.xls,.zip, image/*,.mp4,.mbz,.txt,.myo,.rar" />
<label class="upload-draggable__icon"><span class="icon icon-cloud-arrow-up"></span></label>
<h2 class="upload-draggable__title">Klik untuk pilih file</h2>
<p class="upload-draggable__sub-title">atau seret file ke sini</p>
<p class="upload-draggable__support">SVG, PNG, JPG atau GIF (max. 800x400px)</p>
</div>
</div>
</div>
File Upload Box Inline
Box Inline File Upload Description
Klik untuk pilih file atau seret file ke sini
SVG, PNG, JPG atau GIF (max. 800x400px)
Berhasil
Klik untuk pilih file atau seret file ke sini
SVG, PNG, JPG atau GIF (max. 800x400px)
Berhasil
Klik untuk pilih file atau seret file ke sini
SVG, PNG, JPG atau GIF (max. 800x400px)
<!-- Single Upload -->
<div class="form-control">
<label for="" class="form-control__label">Inline Single Upload Draggable<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="upload-draggable upload-inline">
<div class="upload-draggable__box-inline">
<input type="file" class="upload-draggable__file-input" name="files[]" id="" accept="application/pdf,.ppt,.pptx,.doc,.docx,.xlsx,.xls,.zip, image/*,.mp4,.mbz,.txt,.myo,.rar" />
<div class="inline-upload">
<label class="upload-draggable__icon"><span class="icon icon-cloud-arrow-up"></span></label>
<div>
<h2 class="upload-draggable__title">Klik untuk pilih file <span class="upload-draggable__sub-title">atau seret file ke sini</span></h2>
<p class="upload-draggable__support">SVG, PNG, JPG atau GIF (max. 800x400px)</p>
</div>
</div>
</div>
<div class="upload-draggable__success">
Berhasil
</div>
</div>
</div>
<!-- Multiple Upload -->
<div class="form-control">
<label for="" class="form-control__label">Inline Multiple Upload Draggable<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="upload-draggable upload-inline">
<div class="upload-draggable__box-inline">
<input type="file" class="upload-draggable__file-input" name="files[]" multiple id="" accept="application/pdf,.ppt,.pptx,.doc,.docx,.xlsx,.xls,.zip, image/*,.mp4,.mbz,.txt,.myo,.rar" />
<div class="inline-upload">
<label class="upload-draggable__icon"><span class="icon icon-cloud-arrow-up"></span></label>
<div>
<h2 class="upload-draggable__title">Klik untuk pilih file <span class="upload-draggable__sub-title">atau seret file ke sini</span></h2>
<p class="upload-draggable__support">SVG, PNG, JPG atau GIF (max. 800x400px)</p>
</div>
</div>
</div>
<div class="upload-draggable__success">
Berhasil
</div>
</div>
</div>
<!-- Disabled -->
<div class="form-control">
<label for="" class="form-control__label">Disable Upload Draggable<span class="important">*</span>
<span class="icon icon-information-circle"></span>
</label>
<div class="upload-draggable upload-inline upload-draggable_disabled">
<div class="upload-draggable__box-inline">
<input type="file" class="upload-draggable__file-input" name="files[]" id="" accept="application/pdf,.ppt,.pptx,.doc,.docx,.xlsx,.xls,.zip, image/*,.mp4,.mbz,.txt,.myo,.rar" />
<div class="inline-upload">
<label class="upload-draggable__icon"><span class="icon icon-cloud-arrow-up"></span></label>
<div>
<h2 class="upload-draggable__title">Klik untuk pilih file <span class="upload-draggable__sub-title">atau seret file ke sini</span></h2>
<p class="upload-draggable__support">SVG, PNG, JPG atau GIF (max. 800x400px)</p>
</div>
</div>
</div>
</div>
</div>
File Upload Attachment State
Box Inline File Upload Description
<!-- Default -->
<div class="form-control">
<label for="" class="form-control__label">Attachment Default</label>
<div class="attachment">
<div class="attachment__wrapper">
<div class="attachment__title">
<h3 class="title">Customers_Q4_Report.csv</h3>
</div>
<div class="attachment__description">440KB</div>
</div>
<div class="attachment__action">
<button type="button" class="btn btn_text-default">
<span class="icon icon-cloud-arrow-down-solid"></span>
</button>
<button type="button" class="btn btn_text-default">
<span class="icon icon-trash-solid"></span>
</button>
</div>
</div>
</div>
<!-- Loading -->
<div class="form-control">
<label for="" class="form-control__label">Attachment Loading</label>
<div class="attachment loading">
<div class="attachment__wrapper">
<div class="attachment__title">
<h3 class="title">Customers_Q4_Report.csv</h3>
<div class="attachment__dismiss"><span class="icon icon-x-mark"></span></div>
</div>
<div class="attachment__description">440KB • 2 Second Left</div>
<div class="progress progress-small">
<div class="progress__bar" data-percent-start="0" data-percent-end="90"></div>
</div>
</div>
</div>
</div>
<!-- Failed -->
<div class="form-control">
<label for="" class="form-control__label">Attachment Failed</label>
<div class="attachment loading">
<div class="attachment__wrapper">
<div class="attachment__title">
<h3 class="title">Customers_Q4_Report.csv</h3>
<div class="attachment__dismiss"><span class="icon icon-x-mark"></span></div>
</div>
<div class="attachment__description">440KB • <span class="error">Failed</span></div>
<div class="progress progress-small">
<div class="progress__bar error" data-percent-start="0" data-percent-end="100"></div>
</div>
</div>
</div>
</div>
<!-- Success -->
<div class="form-control">
<label for="" class="form-control__label">Attachment Success</label>
<div class="attachment loading">
<div class="attachment__wrapper">
<div class="attachment__title">
<h3 class="title">Customers_Q4_Report.csv</h3>
<div class="attachment__dismiss"><span class="icon icon-x-mark"></span></div>
</div>
<div class="attachment__description">440KB • <span class="success">Success</span></div>
<div class="progress progress-small">
<div class="progress__bar success" data-percent-start="0" data-percent-end="100"></div>
</div>
</div>
</div>
</div>