Skip to content

Commit

Permalink
💄 [#1309] Added upload script and upload file-input styles
Browse files Browse the repository at this point in the history
  • Loading branch information
@jiromaykin
jiromaykin committed Apr 13, 2023
1 parent 8b69321 commit 9f12f73
Show file tree
Hide file tree
Showing 5 changed files with 189 additions and 4 deletions.
1 change: 1 addition & 0 deletions src/open_inwoner/js/components/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import './preview'
import './questionnaire'
import './search'
import './toggle'
import './upload-document'
import './session'

const htmx = (window.htmx = require('htmx.org'))
Expand Down
56 changes: 56 additions & 0 deletions src/open_inwoner/js/components/upload-document/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
// class UploadDocument {
// constructor(node) {
// this.node = node
// this.node.addEventListener('click', this.toggleOpen.bind(this))
// }
//
// toggleOpen(event) {
// event.preventDefault()
// this.node.parentElement.parentElement.classList.toggle('upload--open')
// }
// }
//
// const uploadButtons = document.querySelectorAll('.upload__button .button')
// ;[...uploadButtons].forEach((uploadButton) => new UploadDocument(uploadButton))

const fileEle = document.getElementById('id_file')
const sizeEle = document.getElementById('upload-size')
const nameEle = document.getElementById('upload-name')
const closeUpload = document.getElementById('closeUpload')

fileEle.addEventListener('change', function (e) {
const files = e.target.files
if (files.length === 0) {
// Hide the size element if user doesn't choose any file
sizeEle.innerHTML = ''
sizeEle.style.display = 'none'
nameEle.innerHTML = ''
nameEle.style.display = 'none'
} else {
// Convert the file size to a readable format
const formatFileSize = function (bytes) {
const sufixes = ['B', 'kB', 'MB', 'GB', 'TB']
const i = Math.floor(Math.log(bytes) / Math.log(1024))
return `${(bytes / Math.pow(1024, i)).toFixed(2)} ${sufixes[i]}`
}
// File size in bytes
sizeEle.innerHTML = formatFileSize(files[0].size)
nameEle.innerHTML = `${files[0].name}`

// Display it
sizeEle.style.display = 'block'
nameEle.style.display = 'block'
}
})

closeUpload.onclick = function (e, fileEle, sizeEle, nameEle) {
const files = e.target.files
document.getElementById('id_file').value = null
sizeEle.innerHTML = "null"
nameEle.innerHTML = "null"

// Display it
sizeEle.style.display = 'block'
nameEle.style.display = 'block'
console.log('close button clicked')
}
94 changes: 94 additions & 0 deletions src/open_inwoner/scss/components/Form/DocumentUpload.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
///
/// Toggle upload.
///

#document-upload {
input[type='file'] {
border: 0;
clip: rect(0 0 0 0);
height: 20px;
margin: 0 -100px 0 0;
overflow: hidden;
padding: 0 -100px 0 0;
//position: absolute;
width: 100%;
}
//::-webkit-file-upload-button {
// color: white;
// background-color: var(--color-primary);
// font-family: 'Lato', sans-serif;
// text-transform: uppercase;
// border: 0;
// border-radius: 2px;
// font-size: 12px;
// line-height: 32px;
// height: 32px;
// font-weight: normal;
// text-align: center;
// vertical-align: middle;
// cursor: pointer;
// white-space: nowrap;
// padding: 0 12px;
//}
.id_file {
background-color: coral;
border: 1px solid green;
display: inline-block;
width: 100%;
}

.fieldset-container {
display: flex;
flex-direction: row;
border: 1px solid grey;
overflow: hidden;
}

.upload {
display: flex;
flex-direction: column;
&--open {
.upload__container {
display: grid;
grid-template-columns: 1fr;
}
}
}

.upload__container {
align-items: center;
border-bottom: 1px solid var(--color-white);
display: grid;
gap: var(--spacing-medium);
grid-template-columns: 1fr;
margin-bottom: var(--spacing-medium);
padding: 8px;

.form__control {
& *[class*='icon'] {
position: static;
transform: none;
}
.label {
flex-direction: column;
position: static;
}
}

.input {
min-width: 300px;
}
}
}

#document-upload
.upload__container.container
.form__actions
.button
*[class*='icon'],
#document-upload .upload__container.container .form__actions .button,
#document-upload > div > div.upload__button .button *[class*='icon'],
#document-upload > div > div.upload__button .button {
position: static;
transform: none;
}
1 change: 1 addition & 0 deletions src/open_inwoner/scss/components/_index.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
@import './Form/ButtonRadio.scss';
@import './Form/Checkbox.scss';
@import './Form/Date.scss';
@import './Form/DocumentUpload.scss';
@import './Form/Error.scss';
@import './Form/Fieldset.scss';
@import './Form/Form.scss';
Expand Down
41 changes: 37 additions & 4 deletions src/open_inwoner/templates/pages/cases/status.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
{% extends 'master.html' %}
{% load i18n anchor_menu_tags card_tags dashboard_tags file_tags grid_tags status_tags table_tags solo_tags form_tags button_tags %}
{% load i18n anchor_menu_tags card_tags dashboard_tags file_tags grid_tags status_tags table_tags solo_tags form_tags button_tags link_tags icon_tags pagination_tags form_tags dropdown_tags messages_tags thumbnail cropping %}

{% block sidebar_content %}
{% if case %}
Expand All @@ -9,7 +9,7 @@

{% block content %}
{% get_solo 'openzaak.OpenZaakConfig' as openzaak_config %}

{% if case %}
{% render_grid %}
{% render_column span=9 %}
Expand All @@ -35,10 +35,43 @@ <h2 class="h2" id="documents">{% trans 'Documenten' %}</h2>
<h2 class="h2" id=>{% trans "Document toevoegen" %}</h2>
<p class="p">
{% blocktranslate with max_filesize=openzaak_config.max_upload_size allowed_extensions=case.allowed_file_extensions|join:', ' %}
Grootte max. {{ max_filesize }} MB, toegestane bestandsformaten {{ allowed_extensions }}.
Grootte max. {{ max_filesize }} MB, toegestane bestandsformaten {{ allowed_extensions }}.
{% endblocktranslate %}
</p>
{% form id="document-upload" form_object=form method="POST" submit_text=_("Bestand uploaden") enctype="multipart/form-data" %}

{% render_form id="document-upload" form=form method="POST" submit_text=_("Bestand uploaden") enctype="multipart/form-data" show_required=True %}
{% csrf_token %}
<div class="form__control upload">
<div class="upload__container container">
<div class="form__control "><label class="label" for="id_title"> <label class="label__label ">{% trans 'Titel bestand' %}</label> <input type="text" name="title" maxlength="255" class="input" required="" id="id_title"> </label></div>
<input type="hidden" name="type" value="14" id="id_type">
<div class="form__control">

<label class="label__label id_file" for="id_file">
{% button icon="cloud_upload" text=_("Bestanden uploaden") type="button" primary=True icon_outlined=True icon_position="before" %}
</label><input type="file" name="file" class="input" required="" id="id_file">


</div>


<div class="form__actions ">
{% button icon="cloud_upload" text=_("Bestand uploaden") href=action_history_url uuid=action.uuid primary=True icon_outlined=True icon_position="before" %}
</div>
</div>
</div>
{% endrender_form %}

<div class="fieldset-container">
<div class="foo">{% icon icon="insert_drive_file" outlined=True icon_position="before" %}</div>
<div class="fieldset__content">
<div id="upload-name" class="p"></div>
<div id="upload-size" class="p"></div>
</div>
<div class="close" id="closeUpload">{% button icon="cancel" text='' transparent=True icon_outlined=True icon_position="before" %}</div>
</div>


{% elif case.external_upload_enabled %}
<p class="p">{% trans "By clicking the button below you can upload a document. This is an external link and you will be redirected to a different system." %}</p>
{% button_row %}
Expand Down

0 comments on commit 9f12f73

Please sign in to comment.