# File uploads ::: tip Formspark stores a link to your uploaded file, not the file itself. You upload the file to a third-party storage provider and Formspark records the resulting URL with the submission. A submission that carries the file itself is rejected with a `400` error. ::: The examples below use Uploadcare and Cloudinary. Any provider that returns a public URL after upload will work the same way. ## Uploadcare Create an Uploadcare account at [https://uploadcare.com/](https://uploadcare.com/). ::: warning Uploadcare's free plan is metered in operations, not uploads, and an operation covers uploading, image transformations, video processing and document conversion alike. The allowance is small enough that a busy form will pass it, and the cheapest paid plan is a significant step up. Check [their pricing](https://uploadcare.com/pricing/) against your expected volume before you commit, and see [Cloudinary](#cloudinary) below for another option. ::: ### Steps Start with a simple Formspark form. ```html
``` Add the Uploadcare widget to the `head` of your HTML file. ```html ``` Add an input of type `hidden`, set its role to `uploadcare-uploader`, add your Uploadcare public key as the `data-public-key` attribute. ```html ``` Links to the uploaded files will now automatically be attached to your submissions. ![Uploadcare submission](https://documentation.formspark.io/uploadcare-submission.png) Final code: ```html Formspark with Uploadcare
``` ## Cloudinary [Cloudinary](https://cloudinary.com/) offers an upload widget that works the same way: the visitor uploads, and you put the resulting URL into a hidden field that Formspark records. ### Steps Create an [unsigned upload preset](https://cloudinary.com/documentation/upload_presets) in your Cloudinary console. Unsigned is what lets the browser upload without a server-side signature, so the preset should restrict what it accepts. Add the widget script to the `head` of your HTML file. ```html ``` Add a hidden input to hold the URL, and a button that opens the widget. ```html ``` Wire the widget up so a successful upload writes its URL into that input. ```html ``` The submitted `photo` field now carries the uploaded file's URL. ::: tip Give the button `type="button"`. A button inside a form defaults to `type="submit"`, so without it opening the widget submits the form instead. ::: ## Alternatives - [Filestack](https://www.filestack.com/): drop-in widget similar to Uploadcare. - [Bunny Storage](https://bunny.net/storage/): cheap edge storage with a simple HTTP API. - [Amazon S3 pre-signed URLs](https://docs.aws.amazon.com/AmazonS3/latest/userguide/using-presigned-url.html): generate an upload URL from your own backend, then submit the resulting file URL to Formspark.