Skip to content
Browse files

added file widget

  • Loading branch information...
zolamk committed Sep 28, 2018
1 parent 99400c3 commit 9cb103060d03996bdc799b234f3bb4b4dfe1ac51

Some generated files are not rendered by default. Learn more.

@@ -1,6 +1,6 @@
"name": "saleina-cms",
"version": "0.31.0",
"version": "0.32.0",
"author": {
"name": "Zelalem Mekonen",
"email": ""
@@ -14,7 +14,11 @@

<template v-else>

<h6 class="picker" v-if="picker" @click="$emit('input', sitePath)">{{ fileName }}</h6>

<h6>{{ fileName }}</h6>


@@ -155,6 +159,14 @@ export default {
text-align: center;
h6 {
color: var(--green);
display: flex;
justify-content: center;
align-items: center;
height: 100%;
img {
width: 100%;
height: 100%;
@@ -1,9 +1,113 @@

<div class="image-input">

<media-library @input="input" :picker="true" @close="showMediaLibrary = false" v-show="showMediaLibrary" v-model="v"/>

<div class="input card">
<media-preview :previewOnly="true" :value="fileName" v-if="fileName"/>
<s-button @click.native="remove" v-if="fileName" class="danger min reverse">Remove File</s-button>
<s-button @click.native="showMediaLibrary = true" class="primary min">Pick File</s-button>

<label>{{ label }}</label>

<label class="error">{{ error }}</label>


import MediaLibrary from "../media";
export default {
name: "file"
name: "file",
components: {
props: {
value: {
type: String
label: {
type: String,
required: true
error: {
type: String
data() {
return {
showMediaLibrary: false,
v: this.value
computed: {
fileName() {
if (!this.v) return undefined;
let parts = this.v.split("/");
return parts[parts.length - 1];
methods: {
input() {
this.showMediaLibrary = false;
this.$emit("input", this.v);
remove() {
this.v = undefined;
this.$emit("input", undefined);

<style scoped>
.image-input {
min-height: 60px;
display: flex;
flex-direction: column-reverse;
margin: 10px;
text-align: right;
border-radius: 3px 3px 0 0;
position: relative;
.input.card {
display: block;
margin: 0;
box-shadow: none;
min-height: 55px;
border-radius: 0 3px 3px 3px;
border: 2px solid var(--label-background);
text-align: left;
button {
margin: 10px;
vertical-align: bottom;
.media-preview {
display: inline-block;
vertical-align: bottom;
@@ -0,0 +1,20 @@
title: File
group: widgets

The file widget allows editors to upload a file or select an existing one from the media library. The path to the file will be saved to the field as a string.

- **Name:** `file`
- **UI:** file picker button opens media gallery allowing to pick files; displays selected file name
- **Data type:** file path string, based on `media_folder`/`public_folder` configuration
- **Options:**
- `default`: accepts a file path string; defaults to null
- **Example:**

- label: "Document"
name: "document"
widget: "file"
default: "/uploads/doc.pdf"
@@ -8,9 +8,6 @@ Widgets define the data type and interface for entry fields. Saleina CMS comes w

Widgets are specified as collection fields in the Saleina CMS `config.yml` file. Note that [YAML syntax]( allows lists and objects to be written in block or inline style, and the code samples below include a mix of both.

To see working examples of all of the built-in widgets, try making a 'Kitchen Sink' collection item on the [CMS demo site]( (No login required: click the login button and the CMS will open.) You can refer to the demo [configuration code]( to see how each field was configured.

## Common widget options

The following options are available on all fields:

0 comments on commit 9cb1030

Please sign in to comment.
You can’t perform that action at this time.