Note: The code was developer by someone else. I adapted it to work with Webflow.
01: Download the original code from this url:
http://businesswebsites.info/wf/mini-ajax-upload-form/source.zip
02: Save it locally into a folder on your computer.
03: Unzip the file.
- This will create a new folder named “source”.
The “source” folder will contain
- 2 folders (assets & uploads), and
- 2 files (index.html & upload.php).
04: Create a New Webflow Project.
05: In the project… add a SECTION.
06: Add a CONTAINER in the SECTION.
07: Add an HTML EMBED in the CONTAINER.
08: Double-Click on the HTML EMBED and add this Code to it:
<form id="upload" method="post" action="upload.php" enctype="multipart/form-data">
<div id="drop">
Drop Here
<a>Browse</a>
<input type="file" name="upl" multiple />
</div>
<ul>
<!-- The file uploads will be shown here -->
</ul>
</form>
09: Exit the Designer.
10: Open Custom Code and place this code in the “Head” section:
<link href="assets/css/style.css" rel="stylesheet" />
11: Place this code in the “Custom Code Footer” section
<script src="assets/js/jquery.knob.js"></script>
<script src="assets/js/jquery.ui.widget.js"></script>
<script src="assets/js/jquery.iframe-transport.js"></script>
<script src="assets/js/jquery.fileupload.js"></script>
<script src="assets/js/script.js"></script>
12: Save the Newly entered Custom Code
13: Re-enter the Designer and Export the website to your local computer.
14: Unzip the Webflow website in the same folder** where you downloaded “source.zip”.
15: From Webflow Folder… copy index.html, uploads.php, and folders (assets / css / js) to the Source Folder
— this will over-right / delete the current index.html file in the Source Folder.
DONE