Streaming live at 10am (PST)

INSTRUCTIONS: Built in Webflow - File Upload Using Ajax / JQuery


#1

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


File Upload option for site, urgent help
Website For Selling Custom Video Animations
#2

@Revolution You are a legend, I have a project that is going to need this just starting and I was thinking how the hell would I do it.

Cheers


#3

Seems that all the videos are gone. Can you reupload please? Also the source file is gone.

Also, Is there any way to just embed the snippet into an existing page in webflow? I don't want to replaced the index.html file.


#4

@DFink, a link to the original files are here:
http://tutorialzine.com/2013/05/mini-ajax-file-upload-form/

Cheers.


#5