GithubHelp home page GithubHelp logo

formio / formio-upload Goto Github PK

View Code? Open in Web Editor NEW
9.0 5.0 11.0 268 KB

A file upload server/proxy for use with the Form.io file component.

License: MIT License

Dockerfile 2.79% JavaScript 96.15% Shell 1.06%

formio-upload's Introduction

Form.io File Upload Server

This library provides an Upload Server/Proxy for use with the Form.io File Component and URL configuration. This allows for Private file upload and downloads by sending Authentication requests to the Form.io API Server to determine if a user has permissions to upload or download based on their access to either Submit the form, or fetch the Submission JSON respectively.

Getting Started

This library can be ran within 3 different environments.

  1. Locally using Node.js
  2. Docker container
  3. AWS Lambda

Running locally with Node.js

In order to run this server locally, you can type the following within your terminal.

npm install
node index

Running within Docker

To run this with docker, you can use the following commands.

docker run -itd \
  -e "PORT=4100" \
  -e "MAX_UPLOAD_SIZE=16mb" \
  -e "DEBUG=*" \
  -e "PROVIDERS=file,alfresco" \
  -e "UPLOAD_DIR=" \
  -e "ALFRESCO_USER=admin" \
  -e "ALFRESCO_PASS=admin" \
  -e "ALFRESCO_HOST=http://127.0.0.1:8082" \
  --restart unless-stopped \
  --name formio-upload \
  -p 4100:4100 \
  formio/formio-upload

Running within AWS Lambda

Before you can run with AWS Lambda, you must first install Claudia.

npm install claudia -g

Next, you will want to configure your access credentials to the AWS CLI. You can do this by following the instructions @ https://claudiajs.com/tutorials/installing.html

Once you have access setup, you can now modify the deploy scripts within package.json to change where this script will be deployed. Once you have made changes to the deploy script within package.json, you can now run the following to deploy this within AWS Lambda using the deploy script.

npm run deploy

Environment Variables.

You must use Environment variables to configure the runtime operation of this server. When running this server locally using Node.js, you can set the Environment variables within the .env file. These variables are defined as follows.

Variable Description Default
PORT The port you wish to run the server on. 4100
MAX_UPLOAD_SIZE The maximum upload size for files being uploaded. 16mb
DEBUG Enables debugging *
PROVIDERS Determines which upload providers are enabled. This is a CSV of the providers you wish to enable. For example "file,alfresco" will enable both local file uploads as well as Alfresco ECM uploads. file
UPLOAD_DIR When using the "file" provider, this is the local upload base directory. providers/uploads
ALFRESCO_USER When using the Alfresco provider, this is the user account to log into the Alfresco ECM admin
ALFRESCO_PASS When using the Alfresco provider, this is the user account password to log into the Alfresco ECM admin
ALFRESCO_HOST When using the Alfresco provider, this is the Alfresco ECM server URL http://127.0.0.1:8082

Configure Form Upload

Now that you have the server running, you can configure a Form.io Form with a new File component. https://help.form.io/userguide/forms/premium-components#file

Within the configuration of this File component, you will need to set the file upload type to URL and then provide the URL of this service. You can decide which upload provider to use based on the path you provide to the url of the running server.

For example:

You will also need to make sure you check Private Download.

The upload will now function against this server.

formio-upload's People

Contributors

airarrazaval avatar heather-formio avatar travist avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

formio-upload's Issues

Does This Work With Hosted form.io

I'm attempting to get this setup with a self-hosted instance of formio and have some questions:

  1. Does the private download option on the file field settings not exist anymore in the latest build or this a form.io hosted thing only?

  2. How exactly does the authentication work and is this documented anywhere? Looking over auth.js it seems like the query params baseURL and form must be present but how that is used to perform the dummy upload isn't very clear to me. Starting the docker instance with this and pointing my forms file field to it returns the following in the console:

formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router query  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router expressInit  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router corsMiddleware  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router dispatching POST /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router query  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router expressInit  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router corsMiddleware  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router jsonParser  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT body-parser:json content-type "multipart/form-data; boundary=----WebKitFormBoundaryCTUu1hNi6a9AvuL6"
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT body-parser:json skip parsing
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT express:router methodOverride  : /file?baseUrl=https%3A%2F%2Fformio.stringercreative.co&project=&form=
formio-upload    | 2019-07-31T17:56:30.271Z upload 7b6c750d-efa1-403a-b3d5-c779899f0124: New Request from https://formio.stringercreative.co/: (192.168.1.1)
formio-upload    | 2019-07-31T17:56:30.272Z upload 7b6c750d-efa1-403a-b3d5-c779899f0124: Authenticating
formio-upload    | Wed, 31 Jul 2019 17:56:30 GMT finalhandler default 500
formio-upload    | Form not found.

I'm assuming there should be a form id # being sent in the URL but what mechanism drives that? Is this something in the forms configuration I'm missing? Adding the form ID to the query param form and sending the request via Postman I can see in the docker console the container is receiving the request and attempting to authenticate but stops on "Authenticating" and never fails or succeeds.

[BUG] SyntaxError: Unexpected token < in JSON at position 0

Environment

Please provide as many details as you can:

  • Hosting type
    • Form.io
    • Local deployment
      • Version:
  • Formio.js version:
  • Frontend framework:
  • Browser: chrome
  • Browser version:

Steps to Reproduce

  1. Just a simple text file upload

Expected behavior

To upload the file

Observed behavior

Crash on the process

Example

If possible, please provide a screenshot, live example (via JSFiddle or similar), and/or example code to help demonstrate the issue.

For code or form JSON, please enclose in a code block:

Full Debug report below

  express:router:route post '/file' +1ms
  express:router:layer new '/' +0ms
File Upload Proxy Listening on 4100
  express:router dispatching OPTIONS /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +9s
  express:router query  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +1ms
  express:router expressInit  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +3ms
  express:router corsMiddleware  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +0ms
  express:router dispatching POST /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +14ms
  express:router query  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +0ms
  express:router expressInit  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +0ms
  express:router corsMiddleware  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +1ms
  express:router jsonParser  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +0ms
  body-parser:json content-type "multipart/form-data; boundary=----WebKitFormBoundary68wCIkA2n3fCzaXW" +0ms
  body-parser:json skip parsing +2ms
  express:router methodOverride  : /file?baseUrl=https%3A%2F%2Fdev-thess.pde.sch.gr%2Fformio&project=undefined&form=620b78c0df278801208dc5e4 +2ms
  upload 298111ec-0749-40ae-bb32-328603304d0b: New Request from undefined: (::1) +0ms  upload 298111ec-0749-40ae-bb32-328603304d0b: Authenticating +1ms
undefined:1
<!doctype html><html ng-app="formioApp"><head><meta charset="utf-8"><title>Form.io: The combined Form and API platform.</title><meta name="description" content=""><meta name="viewport" content="width=device-width"><link href="https://fonts.googleapis.com/css?family=Vast+Shadow" rel="stylesheet" type="text/css"><script src="https://maps.google.com/maps/api/js"></script><script src="//cdn.ckeditor.com/4.7.1/full/ckeditor.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ace.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.2.5/ext-language_tools.js"></script><link rel="stylesheet" href="styles/app-86bcba9989.css"><link rel="stylesheet" href="styles/vendor-0ffa131bfe.css"></head><body><!--[if lt IE 10]>
^

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Request._callback (/mnt/d/git_projects/formioupload/middleware/auth.js:69:34)
    at Request.self.callback (/mnt/d/git_projects/formioupload/node_modules/request/request.js:185:22)
    at Request.emit (events.js:315:20)
    at Request.<anonymous> (/mnt/d/git_projects/formioupload/node_modules/request/request.js:1154:10)
    at Request.emit (events.js:315:20)
    at IncomingMessage.<anonymous> (/mnt/d/git_projects/formioupload/node_modules/request/request.js:1076:12)
    at Object.onceWrapper (events.js:421:28)
    at IncomingMessage.emit (events.js:327:22)
    at endReadableNT (internal/streams/readable.js:1327:12)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.