diff --git a/resources/js/Files/Create.vue b/resources/js/Files/Create.vue
new file mode 100644
index 0000000..24f34ac
--- /dev/null
+++ b/resources/js/Files/Create.vue
@@ -0,0 +1,23 @@
+<template>
+    <AppLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                Create File
+            </h2>
+        </template>
+
+        <Create title="Files" />
+    </AppLayout>
+</template>
+
+<script>
+import create from "Pub/js/Projectbuilder/Model/create"
+
+export default {
+    extends: create,
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/Files/Edit.vue b/resources/js/Files/Edit.vue
new file mode 100644
index 0000000..bb76a15
--- /dev/null
+++ b/resources/js/Files/Edit.vue
@@ -0,0 +1,26 @@
+<template>
+    <AppLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                Edit File: {{ file.name }}
+            </h2>
+        </template>
+
+        <Edit :element="file" title="Files" />
+    </AppLayout>
+</template>
+
+<script>
+import edit from "Pub/js/Projectbuilder/Model/edit"
+
+export default {
+    extends: edit,
+    props: {
+        file: Object,
+    },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/Files/Index.vue b/resources/js/Files/Index.vue
new file mode 100644
index 0000000..f87b8f0
--- /dev/null
+++ b/resources/js/Files/Index.vue
@@ -0,0 +1,22 @@
+<template>
+    <AppLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                Files
+            </h2>
+        </template>
+
+        <Index :elements="files" title="Files" />
+    </AppLayout>
+</template>
+
+<script>
+import index from "Pub/js/Projectbuilder/Model/index"
+
+export default {
+    extends: index,
+    props: {
+        files: Object,
+    },
+}
+</script>
diff --git a/resources/js/Files/Show.vue b/resources/js/Files/Show.vue
new file mode 100644
index 0000000..be9e3fe
--- /dev/null
+++ b/resources/js/Files/Show.vue
@@ -0,0 +1,26 @@
+<template>
+    <AppLayout>
+        <template #header>
+            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
+                File: {{ file.name }}
+            </h2>
+        </template>
+
+        <Show :element="file" title="Files" />
+    </AppLayout>
+</template>
+
+<script>
+import show from "Pub/js/Projectbuilder/Model/show"
+
+export default {
+    extends: show,
+    props: {
+        file: Object,
+    },
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/resources/js/Forms/Inputs/File.vue b/resources/js/Forms/Inputs/File.vue
new file mode 100644
index 0000000..d84237b
--- /dev/null
+++ b/resources/js/Forms/Inputs/File.vue
@@ -0,0 +1,90 @@
+<template>
+    <div
+        :class="'mt-2 mb-2 w-full h-auto bg-center bg-cover bg-no-repeat bg-clip-padding p-6 border rounded' + (!disabled ? ' border-4 border-dashed' : '')"
+        :style="'background-image: url('+fileUrl+')'"
+        v-on:drop="dropHandler"
+        v-on:dragover="dragOverHandler"
+    >
+        <div v-if="!disabled" class="bg-gray-200 border rounded opacity-50 as-input h-48">
+            <input
+                :id="'grid-'+ keyel +'-' + keyid"
+                ref="file"
+                type="file"
+                class="appearance-none block w-full h-40 opacity-0 cursor-pointer h-full"
+                :required="isRequired('file')"
+                @change="processInputFile"
+            >
+            <span
+                class="relative as-message px-2 py-1 bg-gray-800 text-gray-200 inline-block opacity-50 cursor-pointer"
+                @click="triggerClick"
+            > Drag & Drop / Click</span>
+        </div>
+        <div v-else class="h-40"></div>
+    </div>
+</template>
+
+<script>
+import PbInput from "Pub/js/Projectbuilder/pbinput"
+export default {
+    extends: PbInput,
+    name: "File",
+    props: {
+        url: String,
+    },
+    data() {
+        return {
+            disabled: !!this.url,
+            fileUrl: !!this.url ? this.url : null,
+        }
+    },
+    methods: {
+        updateFilePreview(file) {
+            let url = "#";
+            if (file && file.type.includes('image/')) {
+                url = URL.createObjectURL(file)
+            }
+            this.fileUrl = url
+        },
+        processInputFile() {
+            let file = this.$refs.file.files[0]
+            this.updatePreviewAndEmit(file)
+        },
+        updatePreviewAndEmit(file) {
+            const reader = new FileReader();
+            reader.onload = (e) => {
+                this.updateFilePreview(file)
+            };
+            reader.readAsDataURL(file)
+            this.emitFileValue(file)
+        },
+        dropHandler(ev) {
+            ev.preventDefault();
+            if (this.disabled) {
+                return
+            }
+            let file = ev.dataTransfer.files
+            this.setFile(file);
+            this.processInputFile()
+        },
+        dragOverHandler(ev) {
+            ev.preventDefault();
+        },
+        setFile(files) {
+            document.getElementById('grid-'+ this.keyel +'-' + this.keyid).files = files;
+        },
+        triggerClick(ev) {
+            ev.target.previousElementSibling.click();
+        },
+    },
+}
+</script>
+
+<style scoped>
+.as-message {
+    transform: translate(0, -50%);
+    bottom: 50%;
+}
+.as-input:hover {
+    opacity: 0.65;
+}
+</style>
diff --git a/resources/js/Forms/SimpleInput.vue b/resources/js/Forms/SimpleInput.vue
index c29d180..a770dce 100644
--- a/resources/js/Forms/SimpleInput.vue
+++ b/resources/js/Forms/SimpleInput.vue
@@ -45,6 +45,16 @@
             @input="emitInputValue"
         />
     </div>
+    <div v-if="formconfig[keyel].type === 'file'">
+        <File
+            :value="value"
+            :keyel="keyel"
+            :keyid="keyid"
+            :url="url"
+            :required="required"
+            @input="emitInputValue"
+        />
+    </div>
 </template>
 
 <script>
@@ -54,6 +64,7 @@ import Checkbox from "@/Pages/Projectbuilder/Forms/Inputs/Checkbox"
 import Select from "@/Pages/Projectbuilder/Forms/Inputs/Select"
 import Textarea from "@/Pages/Projectbuilder/Forms/Inputs/Textarea"
 import Hidden from "@/Pages/Projectbuilder/Forms/Inputs/Hidden"
+import File from "@/Pages/Projectbuilder/Forms/Inputs/File"
 
 export default {
     name: "Input",
@@ -71,6 +82,7 @@ export default {
         Select,
         Text,
         Checkbox,
+        File,
     },
     data() {
         return {
diff --git a/src/assets/js/pbform.js b/src/assets/js/pbform.js
index 4e10855..56062da 100644
--- a/src/assets/js/pbform.js
+++ b/src/assets/js/pbform.js
@@ -67,9 +67,11 @@ export default {
                     case 'password':
                         inputs[index] = ''
                         break;
-                    default:
+                    case 'file':
                         inputs[index] = null
                         break;
+                    default:
+                        break;
                 }
             }
             return inputs
diff --git a/src/assets/js/pbinput.js b/src/assets/js/pbinput.js
index a868f41..59001b2 100644
--- a/src/assets/js/pbinput.js
+++ b/src/assets/js/pbinput.js
@@ -62,5 +62,16 @@ export default {
             }
             this.$emit('input', el.target.value)
         },
+        emitFileValue(el) {
+            if (this.isDebugEnabled()) {
+                console.log(
+                    "[ProjectBuilder] DEBUG" + "\n" +
+                    "Input activated" + "\n" +
+                    "Value to emit: " + el.target.value + "\n" +
+                    "Component: Input"
+                )
+            }
+            this.$emit('input', el)
+        },
     },
 }